I want to update my Google Gauge with MySQL data using Php. Can anyone please help me?

154 views
Skip to first unread message

Ganesh Maurya

unread,
Feb 26, 2020, 11:48:26 PM2/26/20
to Google Visualization API
<html>
  <head>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
      google.charts.load('current', {'packages':['gauge']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Temp°C', 80]
        ]);


        var options = {
          width: 600, height: 300,
          greenFrom:0, greenTo:30,
          yellowFrom:30, yellowTo: 40,
          redFrom: 40, redTo: 100,
          minorTicks: 5
        };

        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

        chart.draw(data, options);

      }
    </script>
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

Tushar Patel

unread,
Feb 27, 2020, 12:21:10 AM2/27/20
to Google Visualization API
You have to make ajax call, and send json encoded format in success.

$.ajax({
url: "ajaxify/data.php",
type: 'POST',
dataType: 'JSON',
data: {},
success: function(data_res, textStatus, jqXHR)
{
  if( data_res.status == 200 )
  { 
google.charts.setOnLoadCallback();
var data_fulltime = google.visualization.arrayToDataTable(data_res);
var options = {
  chart_fulltime: {
title: '',
subtitle: '',
  },
  bars: 'vertical' // Required for Material Bar Charts.
};
var chart_fulltime = new google.charts.Bar(document.getElementById('chart'));
chart_fulltime.draw(data_fulltime, google.charts.Bar.convertOptions(options));
  }
  else
  {

  }
},
error: function(data)
{
toastr.error("Something went wrong. Please contact administrator.");
$('#full-page-loader').removeClass('showLoader');
}
  });

Ganesh Maurya

unread,
Feb 27, 2020, 12:42:23 AM2/27/20
to google-visua...@googlegroups.com
Actually, I am using Google Gauge and in MySQL database, data is stored in four parameters i.e. Temperature, Humidity, Vibration, and BeamForce with TimeStamp. So I want to fetch a particular parameter in Google Gauge.
 ['Temp°C', 80]  here the value of temperature is given. But I want to replace this value by MySQL Database value. 

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/e1f937a1-db01-4b6c-8600-2cef9c998dbd%40googlegroups.com.
Reply all
Reply to author
Forward
0 new messages