Google图表从数据库的日期和时间 [英] Google chart date and time from database

问题描述

我正在开展Google图表实验。我以前在x轴上显示时间的问题。用户在jsbin中给了我这个例子： http://jsbin.com/yaqew/1/edit 您可以看到每个点的日期和时间。我的问题是在我的解决方案中实现：

Phpcode：

 <？php 
 $ con = mysql_connect（localhost，root，）或die（无法连接数据库!!!!）; 
 mysql_select_db（chart，$ con）; 
 
 $ sth = mysql_query（SELECT * FROM googlechart）; 
 
 $ rows = array（）; 
 //不需要标志
 $ flag = true; 
 $ table = array（）; 
 
 $ table ['cols'] = array（
 
 array（'label'=>'Time'，'type'=>'date'），
 array（'label'=>'Date'，'type'=>'date'），
 array（'label'=>'PH'，'type'=& ''），
 array（'label'=>'temperature'，'type'=>'number'），
 array（'label'=>'Chlorine'，'type'= "'number'），
）; 
 
 $ rows = array（）; 
 
 while（$ r = mysql_fetch_assoc（$ sth））{
 
 //假定日期格式为yyyy-MM-dd
 $ dateString = $ r ['Date']; 
 $ dateArray = explode（' - '，$ dateString）; 
 $ year = $ dateArray [0] 
 $ month = $ dateArray [1]  -  1; // subtract 1 to convert to javascript's 0-indexed months 
 $ day = $ dateArray [2]; 
 
 //假定时间格式为hh：mm：ss
 $ timeString = $ r ['Time']; 
 $ timeArray = explode（'：'，$ timeString）; 
 $ hours = $ timeArray [0]; 
 $ minutes = $ timeArray [1]; 
 $ seconds = $ timeArray [2]; 
 echo $ dateString。< br>; 
 echo $ timeString。< br>; 
 $ temp = array（）; 
 $ temp [] = array（'v'=>Date（$ year，$ month，$ day，$ hours，$ minutes，$ seconds））; 
 $ temp [] = array（'v'=>（string）$ r ['PH']）; 
 $ temp [] = array（'v'=>（string）$ r ['temperature']）; 
 $ temp [] = array（'v'=>（string）$ r ['Chlorine']）; 
 
 $ rows [] = array（'c'=> $ temp）; 
 
} 
 
 $ table ['rows'] = $ rows; 
 $ jsonTable = json_encode（$ table）; 
 echo $ jsonTable; 
  

Html / javascript：

 < html> 
< head> 
 
< script type =text / javascriptsrc =https://www.google.com/jsapi>< / script> 
< script type =text / javascript> 
 google.load（visualization，1，{packages：[corechart]}）; 
 google.setOnLoadCallback（drawChart）; 
 
函数drawChart（）{
 var data = new google.visualization.DataTable（<？= $ jsonTable？>）; 
 
 
 
 var options = {
 / * width：900，height：900，* / 
 title：'Visualization'，
 curveType：'function'，
 legend：{position：'bottom'}，
 pointSize：12，
 vAxis：{title：Values，titleTextStyle：{italic：false}}， 
 hAxis：{title：Time，titleTextStyle：{italic：false}}，
 explorer：{
 actions：['dragToZoom'，'rightClickToReset']，
轴：'vertical'
} 
 
 
}; 
 
 var chart = new google.visualization.LineChart（document.getElementById（'chart_div'））; 
 chart.draw（data，options）; 
 
 
} 
< / script> 
< / head> 
  

这是我的数据库（phpmyadmin）如下所示：

解决方案

您需要将日期和时间输入到您的DataTable中，作为'datetime'数据类型：

  $ table ['cols'] = array（
 array（'label'=>'Time'，'type'=>' datetime'），
数组（'label'=>'PH'，'type'=>'number'），
 array（'label'=>'temperature' =''number'），
 array（'label'=>'Chlorine'，'type'=>'number'），
）; 
 
 $ rows = array（）; 
 
 while（$ r = mysql_fetch_assoc（$ sth））{
 //假定日期格式为yyyy-MM-dd
 $ dateString = $ r [日期']; 
 $ dateArray = explode（' - '，$ dateString）; 
 $ year = $ dateArray [0]; 
 $月= $ dateArray [1]  -  1; // subtract 1 to convert to javascript's 0-indexed months 
 $ day = $ dateArray [2]; 
 
 //假定时间格式为hh：mm：ss
 $ timeString = $ r ['Time']; 
 $ timeArray = explode（'：'，$ timeString）; 
 $ hours = $ timeArray [0]; 
 $ minutes = $ timeArray [1]; 
 $ seconds = $ timeArray [2]; 
 
 $ temp = array（）; 
 $ temp [] = array（'v'=>Date（$ year，$ month，$ day，$ hours，$ minutes，$ seconds））; 
 $ temp [] = array（'v'=>（string）$ r ['PH']）; 
 $ temp [] = array（'v'=>（string）$ r ['temperature']）; 
 $ temp [] = array（'v'=>（string）$ r ['Chlorine']）; 
 
 $ rows [] = array（'c'=> $ temp）; 
} 
 
 $ table ['rows'] = $ rows; 
 $ jsonTable = json_encode（$ table）; 
 echo $ jsonTable; 
  

I am working on a google chart experiment. I earlier had a problem to display date with time in x axis. And a user gave me this example in jsbin: http://jsbin.com/yaqew/1/edit where you have the ability to see date and time for each of the dots. The problem i came into was to implement that in my solution:

Phpcode:

   <?php
            $con=mysql_connect("localhost","root","") or die("Failed to connect with database!!!!");
        mysql_select_db("chart", $con);

        $sth = mysql_query("SELECT * FROM googlechart");

        $rows = array();
        //flag is not needed
        $flag = true;
        $table = array();

        $table['cols'] = array(

        array('label' => 'Time', 'type' => 'date'),
        array('label' => 'Date', 'type' => 'date'),
        array('label' => 'PH',      'type' => 'number'),
        array('label' => 'temperature','type' => 'number'), 
        array('label' => 'Chlorine','type' => 'number'),
        );

        $rows = array();

        while($r = mysql_fetch_assoc($sth)) {

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

        // assumes time is in the format "hh:mm:ss"
        $timeString = $r['Time'];
        $timeArray = explode(':', $timeString);
        $hours = $timeArray[0];
        $minutes = $timeArray[1];
        $seconds = $timeArray[2];
        echo $dateString."<br>";
        echo $timeString."<br>";
        $temp = array();
        $temp[] = array('v' => "Date($year, $month, $day, $hours, $minutes, $seconds)"); 
        $temp[] = array('v' => (string) $r['PH']);
        $temp[] = array('v' => (string) $r['temperature']);
        $temp[] = array('v' => (string) $r['Chlorine']);

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

        }

        $table['rows'] = $rows;
        $jsonTable = json_encode($table);
         echo $jsonTable; 

Html/javascript:

    <html>
  <head>

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable(<?=$jsonTable?>);



        var options = {
        /*width: 900, height: 900, */
          title: 'Visualization',
          curveType: 'function', 
           legend: { position: 'bottom' },
           pointSize: 12,
        vAxis: {title: "Values", titleTextStyle: {italic: false}},
        hAxis: {title: "Time", titleTextStyle: {italic: false}},
        explorer: { 
                actions: ['dragToZoom', 'rightClickToReset'], 
                axis: 'vertical'
            }


        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);


      }
    </script>
  </head>

This is how my database (phpmyadmin) looks like:

解决方案

You need to input both date and time into your DataTable, as a 'datetime' data type:

$table['cols'] = array(
    array('label' => 'Time', 'type' => 'datetime'),
    array('label' => 'PH', 'type' => 'number'),
    array('label' => 'temperature','type' => 'number'), 
    array('label' => 'Chlorine','type' => 'number'),
);

$rows = array();

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

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

    $temp = array();
    $temp[] = array('v' => "Date($year, $month, $day, $hours, $minutes, $seconds)"); 
    $temp[] = array('v' => (string) $r['PH']);
    $temp[] = array('v' => (string) $r['temperature']);
    $temp[] = array('v' => (string) $r['Chlorine']);

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

$table['rows'] = $rows;
$jsonTable = json_encode($table);
echo $jsonTable;   

这篇关于Google图表从数据库的日期和时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！