谷歌图表中的实时图表

Question

I don't know if it's already too much to ask in StackOverflow but I'm just so exhausted and disappointed with my own capacity. I've been doing this chart for 3 months and not successful. Anyways I'm trying again google chart I'm asking for help out there.

I have my livedata.php(the time_stamp(named ts),ph,moist are data values in my database) in json format showing:

[{"ts":"12","ph":736,"moist":92},{"ts":"27","ph":0,"moist":0},{"ts":"21","ph":192,"moist":24},{"ts":"15","ph":0,"moist":0}]

that is "ts"(time stamp('d')) shows a specific day of a month(this example the month is august). "ph" and "moisture" are the overall value of that specific day. Obviously I am making charts here and I know I am a dumb full of ambitions I am trying to create a live chart that looks like this

Now my problem is with this code below I found which is working to their example but trying to my PHP JSON fails.

function drawChart() {
    var jsonData = $.ajax({
        url: 'livedata.php',
        dataType: 'json',
        async: false
    })

    .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.LineChart($('#chart').get(0));
        chart.draw(data, {
            title: 'Soil Analysis'
        });
    });

}
// load chart lib
google.load('visualization', '1', {
    packages: ['corechart']
});
// call drawChart once google charts is loaded
google.setOnLoadCallback(drawChart);

Answer 1

there are several issues here, I'll try to help...

for starters, use the current version of google charts...

use this --> <script src="https://www.gstatic.com/charts/loader.js"></script>

jsapi is an old version...

not this --> <script src="https://www.google.com/jsapi"></script>

this will only change the load statement

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

---

as for ajax async: false has been deprecated, remove it...

---

next, the contructor for the data table only accepts json data in a specific format
found here --> Format of the Constructor's JavaScript Literal data Parameter

just leave the argument blank

var data = new google.visualization.DataTable();

finally, the posted json example does not contain a property for time_stamp

looks like ts instead, you could try using the current month instead

recommend something similar to the following...

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

function drawChart() {
  $.ajax({
    url: 'livedata.php',
    dataType: 'json'
  }).done(function (results) {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'time_stamp');
    data.addColumn('number', 'ph');
    data.addColumn('number', 'moist');

    $.each(results, function (i, row) {
      var today = new Date();

      data.addRow([
        new Date(today.getFullYear(), today.getMonth(), row.ts),
        parseFloat(row.ph),
        parseFloat(row.moist)
      ]);
    });

    var chart = new google.visualization.LineChart($('#chart').get(0));
    chart.draw(data, {
      title: 'Soil Analysis'
    });
  });
}