如何使用php和谷歌图表生成图表从数据库表获取输入

时间:2016-12-09 10:31:13

标签: php mysql charts google-visualization

我想生成从数据库表获取输入的图表。在图表中,X轴日期和Y轴消耗时间。对于具有值的后续表行,将发生这种情况。最后生成图表.. 现在我想从表中获取值来生成图表.. 请检查我的代码并帮助我...

谢谢......

 database table below...
   --------------------------
       day        time_diff
   --------------------------
   2016-12-09     00:15:38
   2016-12-09     00:10:12
   2016-12-09     00:05:40
  ---------------------------

chart.php

 <?php
 $mysql =mysqli_connect('localhost', 'root', '', 'chart');

 $result = $mysql->query('select * from clock');

 $rows = array();
 $table = array();
 $table['cols'] = array(

                array('label' => 'day', 'type' => 'date'),
                array('label' => 'time_diff', 'type' => 'time')

               );
               $rows = array();
while($r=mysqli_fetch_assoc($result))  
{
//assumes dates are in the format "yyyy-MM-dd"
$dateString = $r['day'];
$dateArray = explode('-', $dateString);
$year = $dateArray[0];
$month = $dateArray[1] - 1; // subtract 1 to convert to javascript's 0-indexed months
$day = $dateArray[2];

//echo $dateString."<br>";

// assumes time is in the format "hh:mm:ss"
$timeString = $r['time_diff'];
$timeArray = explode(':', $timeString);
$hours = $timeArray[0];
$minutes = $timeArray[1];
$seconds = $timeArray[2];

//echo $timeString;


  $temp = array();   
  $temp[] = array('v' => "date($year-$month-$day)");       
  $temp[] = array('v' => "time( $hours:$minutes:$seconds)");

  $rows[] = array('c' => $temp);
  }
  $table['rows'] = $rows;

  $jsonTable = json_encode($table);
  print_r($jsonTable);

 //$jsonTable1 = new DateTime( date(strtotime($jsonTable) ));

 ?>

  <html>
  <head>
   <!--Load the Ajax API-->
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script type="text/javascript">

  // Load the Visualization API and the piechart package.
  google.load("visualization", "1", {packages:["corechart"]});

  // Set a callback to run when the Google Visualization API is loaded.
   google.setOnLoadCallback(drawChart);


   function drawChart()
   {
   var bar_chart_data = new google.visualization.arrayToDataTable(<?php echo $jsonTable1; ?>);

   var options = {
        title:"Company Performance",
        width:400,
        height:600,

               };
   var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

   chart.draw(bar_chart_data,options);
   }

  </script>
  </head>
        <body>
            <div id="chart_div"></div>
        </body>
    </html>
  </script>
  </head>
  </html>

我得到了这个

的输出
{"cols":[{"label":"day","type":"date"},{"label":"time_diff","type":"time"}],"rows":[{"c":[{"v":"date(2016,11,09)"},{"v":"time( 00,15,28)"}]},{"c":[{"v":"date(2016,11,10)"},{"v":"time( 03,05,00)"}]},{"c":[{"v":"date(2016,11,11)"},{"v":"time( 06,54,00)"}]},{"c":[{"v":"date(2016,11,14)"},{"v":"time( 00,00,02)"}]}]}

0 个答案:

没有答案