Google chart time/date formatting issues

StackOverflow https://stackoverflow.com/questions/22487066

题

I am having some issues which I am have been working for couple of days now, and I am really stuck solving this problem. The problem is that I am making a line chart which shows values as PH, Chlorine and Temperature over a time with date and Time. I dont think I have formatted the jsoncode correct as it shows here: https://developers.google.com/chart/interactive/docs/reference#dataparam

When I echo my jsoncode, it looks like this: 

  {"cols":[{"label":"Time","type":"date"},{"label":"Date","type":"date"},     {"label":"PH","type":"number"},{"label":"temperature","type":"number"},   {"label":"Chlorine","type":"number"}],"rows":[{"c":[{"v":"Date(2014, 2, 17, 15, 03, 14)"},   {"v":"7.00"},{"v":"34.00"},{"v":"3.40"}]}]}

my database looks like this:

enter image description here

Code:

<?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>
  <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>
有帮助吗？

解决方案

The issue is because the Google Chart API wants a JavaScript Date object. What you gave the chart is a string object, despite it seems the value has Date() in it.

You need to assign that property without quotes and since it requires the Date Object, it'd be something like this:

    "v": new Date("2014-02-17 15:03:14")

其他提示

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

would be like below:

$temp[] = array('v' => 'Date('.date('Y',strtotime($r['Date'])).','.(date('n',strtotime($r['Date'])) - 1).','.date('d',strtotime($r['Date'])).','.date('H',strtotime($r['Time'])).','.date('i',strtotime($r['Time'])).','.date('s',strtotime($r['Time'])).')');
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top