CODEWITHSUNDEEP
javascriptjqueryjsonchartsgoogle-visualization
njhelloworld
njhelloworld

Reputation: 147

Google Chart with time from php json

I have this json output from the file countrows.php:

[  
   {  
      "time_stamp":"08:22:46 am",
      "ph":"8",
      "moist":"0"
   },
   {  
      "time_stamp":"08:22:50 am",
      "ph":"8",
      "moist":"0"
   },
   {  
      "time_stamp":"08:22:54 am",
      "ph":"8",
      "moist":"0"
   },
   {  
      "time_stamp":"08:22:57 am",
      "ph":"8",
      "moist":"0"
   },
   {  
      "time_stamp":"08:23:01 am",
      "ph":"8",
      "moist":"0"
   },
   {  
      "time_stamp":"08:23:05 am",
      "ph":"8",
      "moist":"0"
   },
   {  
      "time_stamp":"08:23:09 am",
      "ph":"8",
      "moist":"0"
   }
]

The thing here is I want to show the time(coming from my json file) in my chart, specifically in the horizontal side. Something like the image below but the yellow green line shows the time from my json file.

enter image description here

By the way the following is my javascript code in my google chart,I need help on what to do with the following code:

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

// onload callback
function drawChart() {
  // JSONP request
  var jsonData = $.ajax({
    url: 'countrows.php',
    dataType: 'json',
  }).done(function (results) {
    var data = new google.visualization.DataTable(jsonData);

    data.addColumn('datetime', 'time_stamp');
    data.addColumn('number', 'ph');
    data.addColumn('number', 'moist');

    $.each(results, function (i, row) {
      data.addRow([
       new Date(row.time_stamp),
       parseFloat(row.ph),
       parseFloat(row.moist)
       ]);
    });

    var chart = new google.visualization.AreaChart($('#chart').get(0));

    chart.draw(data, {
      title: 'Soil Analysis',
      curveType: 'function',
      displayAnnotations: true,
      //legend: { position: 'bottom' }
      pointSize: 10
      hAxis: {format: 'Y,M,d,H';}
    });
  });
}

drawChart();

setInterval(drawChart, 10000);

Upvotes: 1

Views: 601

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

the easiest way would be to change the first column to --> 'string' 

data.addColumn('string', 'time_stamp');

also, since ajax is async, no need to assign to a variable,
remove this --> var jsonData =

and remove from argument to the data table constructor... 

var data = new google.visualization.DataTable(jsonData);  // <-- remove jsonData

try following snippet... 

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

// onload callback
function drawChart() {
  $.ajax({
    url: 'countrows.php',
    dataType: 'json'
  }).done(function (results) {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'time_stamp');
    data.addColumn('number', 'ph');
    data.addColumn('number', 'moist');
    $.each(results, function (i, row) {
      data.addRow([
        row.time_stamp,
        parseFloat(row.ph),
        parseFloat(row.moist)
      ]);
    });
    var chart = new google.visualization.AreaChart($('#chart').get(0));
    chart.draw(data, {
      title: 'Soil Analysis',
      curveType: 'function',
      pointSize: 10
    });
  });
}
drawChart();
setInterval(drawChart, 10000);

Upvotes: 1

Related Questions