CODEWITHSUNDEEP
javascriptphpgoogle-visualizationstring-formatting
user3185936
user3185936

Reputation: 1667

Google chart time/date formatting issues

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>

Upvotes: 0

Views: 1049

Answers (2)

Zulfiqar Dholkawala
Zulfiqar Dholkawala

Reputation: 478

$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'])).')');

Upvotes: 0

hrgui
hrgui

Reputation: 630

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

Upvotes: 1

Related Questions