来自数据库的Google图表日期和时间

时间:2014-03-17 17:21:01

标签: javascript php html datetime google-visualization

我正在进行谷歌图表实验。我之前有一个问题是在x轴上显示时间和时间。用户在jsbin:http://jsbin.com/yaqew/1/edit给了我这个例子,你可以在这里看到每个点的日期和时间。我遇到的问题是在我的解决方案中实现这个问题:

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>

这是我的数据库(phpmyadmin)的样子:

enter image description here

2 个答案:

答案 0 :(得分:1)

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

$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;   

答案 1 :(得分:0)

我发现了一种在数据库中执行此操作的方法,因此您可以获得完成此操作所需的信息,而无需使用所有代码。我会在这里分享,以防其他人偶然发现这个问题,并喜欢这样做。

所以这就是我的查询的样子,因为我有一个类型为datetime的列:

SELECT 
    CONCAT(DATE_FORMAT(date, '%Y, '),
            DATE_FORMAT(date, '%c') - 1,
            DATE_FORMAT(date, ', %e, %H, %i, %S')) AS date
FROM
    my_table

我已经测试了这个查询,但它确实有效,但我想OP的那个看起来像这样:

SELECT 
    CONCAT(DATE_FORMAT(Date, '%Y, '),
        DATE_FORMAT(Date, '%c') - 1,
        DATE_FORMAT(Date, ', %e, '),
        DATE_FORMAT(Time, '%H, %i, %S')) AS date,
    amount
FROM
    my_table

有关PHP代码的示例,请查看@asgallant帖子。这与他的代码略有不同:

$temp[] = array('v' => "Date(your_preferred_method_for_fetching_the_query_above)"); 

注意:在我第一次这样做之后我也想到了@asgallant。

欢迎提出问题和建议。