Question

I am looking to create a dashboard gauge that updates via ajax. Below is the code I have. I have the ajax code but just am unsure on how to update the gauge. Any suggestions?

         google.load('visualization', '1', {packages:['gauge']});
          google.setOnLoadCallback(drawChart);
          function drawChart() {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Label');
            data.addColumn('number', 'Value');
            data.addRows(1);
            data.setValue(0, 0, 'Tempature');
            data.setValue(0, 1, 76);

            var chart = new google.visualization.Gauge(document.getElementById('liveTempChart'));
            var options = {width: 340, height: 130, redFrom: 90, redTo: 100,
                yellowFrom:75, yellowTo: 90, minorTicks: 5};
            chart.draw(data, options);
          }

ajax code…

foreach($obj->sensor as $unit) {
if ($unit->label==”Temp”) {
echo $unit->tempf.” F”;
}
}

---

---

Answer 1

You can use the same kind of code for update too. You need to create a new data table instance and call the draw function of the chart again (very similar to how you updated the first time).

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Label');
        data.addColumn('number', 'Value');
        data.addRows(1);
        data.setValue(0, 0, 'Tempature');
        data.setValue(0, 1, 76);

        chart.draw(data, options);