Google Gauge chart not displaying

Question

I want to create and display a google gauge chart on a webpage for a remote monitoring program I am developing. I am using an eWON Flexy 201 to do this. I am just having trouble getting the gauge to display on the webpage.

Basically what I have to do is use a form of VBScript on the server to grab the oil temperature and return that value to the gauge to display the temperature. I have been able to return that value to the page in various ways correctly, however I am having trouble displaying and updating the gauge every second like I want to.

In the current script I am receiving no errors in the console, however nothing is rendering. I get just a blank space where the gauge should appear.

<script type='text/javascript'>
  google.load('visualization', '1', {packages:['gauge']});
  google.setOnLoadCallback(drawChart);
function drawChart() {

var x = '<%#TagSSI,Target_Pressure_Setting%>';


var data = new google.visualization.DataTable([
  ['Label', 'Value'],
  ['Oil Temp', x],
]);
var options = {
  width: 450, height: 240,
  greenFrom: 100, greenTo: 150,
  redFrom: 275, redTo: 325,
  yellowFrom:225, yellowTo: 275,
  minorTicks: 5,
  max: 350
};

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

function refreshData () {
    var json = $.ajax({
        url: 'gauge.shtm', // make this url point to the data file
        dataType: 'number',
        async: true 
    }).responseText;
    //alert(json)

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

    chart.draw(data, options);
}

refreshData();
setInterval(refreshData, 1000);
}

</script>

and here is the gauge.shtm file

<%#TagSSI,Oil_Temp%>

Answer 1

In your scenario i would advise you to do the following rearrangement and see if it works for you. The google.setOnLoadCallback() set up a callback function to execute when Google Visualization API has loaded. But you can omit this here as your result depends upon the success of an ajax call.

<script type='text/javascript'>
    google.load('visualization', '1', {packages:['gauge']});
</script>

<script type='text/javascript'>

    function drawChart(result) {

        var x = '<%#TagSSI,Target_Pressure_Setting%>';

        // this may not required here because it anyway get replaced down the line..
        var data = new google.visualization.DataTable([
          ['Label', 'Value'],
          ['Oil Temp', x],
        ]);

        var options = {
          width: 450, height: 240,
          greenFrom: 100, greenTo: 150,
          redFrom: 275, redTo: 325,
          yellowFrom:225, yellowTo: 275,
          minorTicks: 5,
          max: 350
        };

        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
        data = new google.visualization.DataTable(result);
        chart.draw(data, options);
    }

    function refreshData(callBack) {
        $.ajax({
            url: 'gauge.shtm',
            dataType: 'number',
            async: true 
        }).done(function(result) {
            callBack(result);           
        });
    }

    refreshData(drawChart);

</script>

If you have notice little modification, i am calling refreshData() and drawChart() will execute as a callback function on success eg done(function(result) { }) . The result of the ajax success passed on to drawChart() function which is used as a callback. Let me know the result if it did not work.

More to read on callback functions.

Answer 2

I figured out my problem. I'm not particularly sure what was going wrong with the answer @Rohit416 was giving me, however upon more searching on the web I came across a solution and amended it to my needs.

Here is the solution that ended up working for me

<script type="text/javascript">

      google.setOnLoadCallback(drawChart);

      function drawChart() {

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

        var options = {
          width: 400, height: 140,
          redFrom: 275, redTo: 350,
          yellowFrom:200, yellowTo: 275,
          greenFrom: 100, greenTo: 150,
          minorTicks: 5,
          max: 350
        };

        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
        chart.draw(data, options);

       function getData () {
        $.ajax({
            url: 'oil.shtm',
            success: function (response) {
                data.setValue(0, 1, response);
                chart.draw(data, options);
                setTimeout(getData, 1000);

            }
        });
    }
    getData();
}
google.load('visualization', '1', {packages: ['gauge'], callback: drawChart});

and my oil.shtm file is as follows

This successfully updates my gauge every second, and I tested this method with multiple gauges at once and it works as well.