Graphique en direct dans Google Chart

Question

Je ne sais pas si c'est déjà trop demander en pile mais je suis tellement épuisé et déçu de ma propre capacité.J'ai fait ce tableau comme 3 mois et pas réussi.Au J'essaie à nouveau google chart je demande de l'aide là-bas.

J'ai mon livedata.php (le time_stamp (nommés ts), ph, sont des valeurs de données humides dans ma base de données) au format JSON indiquant:

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

est" ts "(horodatage ('d')) le jour d'un mois (cet exemple est le mois d'août). "ph" et "humidité" sont la valeur globale de ce jour spécifique. Évidemment, je fais des graphiques ici et je sais que je suis plein d'ambitions stupide que je suis en train de créer un graphique en direct qui ressemble à ceci

Maintenant, mon problème est avec ce code ci-dessous j'ai trouvé qui travaille à leur exemple mais en essayant de mon php json échoue.

fonction 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

il y a plusieurs questions ici, je vais essayer d'aider ...

pour commencer, utilisez la version actuelle des cartes Google. ..

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

jsapi est une ancienne version ...

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

cela ne changera la déclaration load

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

---

que pour ajax async: false a été dépréciée, enlever ...

---

suivant, le contructor pour la table de données accepte uniquement les données JSON dans un format spécifique
trouvés ici ->Format of the Constructor's JavaScript Literal data Parameter

laisser juste l'argument vide

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

enfin, l'exemple JSON affiché ne contiennent une propriété pour time_stamp

ressemble ts à la place, vous pouvez essayer d'utiliser le mois en cours à la place

recommandent quelque chose de similaire à ce qui suit ...

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' 
    }); 
    }); 
}