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%>

`refreshData()` willl load `asynchronously`, i think there is some race condition going on in your code. — Rohit416, Nov 10 '15 at 16:47
Btw, why you are not using the success handler in `ajax` call explicitly? — Rohit416, Nov 10 '15 at 16:50
And probably because I have very little knowledge of javascript/ajax in general. I pieced this together through multiple online sources and debugging — last10seconds, Nov 10 '15 at 16:54
@Rick, if javascript/ajax is not your favorite game, have you considered using [viewON](http://ewon.biz/companion-tool/viewon), eWON Flexy's web-based dashboard tool? — Serge Wautier, Nov 11 '15 at 13:24
Yes that has been considered, however my boss is really wanting to go down this route until all options are exhausted regardless of my skill level of javascript/ajax — last10seconds, Nov 12 '15 at 13:02

Rohit416 · Answer 1 · 2015-11-14T17:51:46.140

0

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 e.g. 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.

edited Nov 14 '15 at 17:51

answered Nov 10 '15 at 17:20

Rohit416

3,416
3
24
41

It's still doing the same thing as my original problem – last10seconds Nov 10 '15 at 18:03
Although I am confused. Where does result come from? I don't see a variable or function that goes by that name? – last10seconds Nov 10 '15 at 20:01
Please see my edit. Basically result comes from the success of `ajax` call. It is not declared as variable anywhere. It is just passed over to the `drawChart()` function as a parameter. – Rohit416 Nov 11 '15 at 06:45
I'm still not getting an initial gauge to show up. No errors are showing up either. I'm reading through the document you linked on callback functions to try and get a better understanding of these things as well. – last10seconds Nov 12 '15 at 13:21
Okay try this, load `google.load('visualization', '1', {packages:['gauge']})` in a separate ` – Rohit416 Nov 14 '15 at 17:50
See the edit of my problem. I'm wondering if it is the way the current ajax call is set up that is not letting anything render. – last10seconds Nov 20 '15 at 20:12
I do not think the problem is with your response from `ajax` call. Because as you told, no error being logged in console. So the issue is probably with the way things are handled. Have you tried the way i suggested?? – Rohit416 Nov 21 '15 at 05:55
Yes I tried your suggestion. In Chrome I am able to view the ajax request and the results of that request, which are as expected, however nothing is drawn and still no errors are present in the console. In Firefox I don't receive any errors in the console either, however it acts as if the request isn't even there and I am unable to see anywhere where the request was even requested. – last10seconds Nov 24 '15 at 13:58
I figured it out. I'll post my answer here momentarily – last10seconds Nov 24 '15 at 21:42

last10seconds · Accepted Answer · 2015-11-27T20:04:30.033

I figured out my problem. I'm not particularly sure what was going wrong with the answer @Rohit416was 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.

Google Gauge chart not displaying

2 Answers2