Google chart time/date formatting issues

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

Pregunta

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>
¿Fue útil?

Solución

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")

Otros consejos

$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'])).')');
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top