Google 仪表盘未显示

Question

我想为我正在开发的远程监控程序创建并在网页上显示 google 仪表图。我正在使用 eWON Flexy 201 来执行此操作。我只是无法让仪表显示在网页上。

基本上我要做的是在服务器上使用一种 VBScript 形式来获取油温，然后 return 将该值发送到仪表以显示温度。我已经能够以各种方式正确地 return 该页面的值，但是我无法像我想要的那样每秒显示和更新仪表。

在当前脚本中，我在控制台中没有收到任何错误，但是没有任何渲染。我只得到一个空白 space 应该出现仪表的地方。

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

这里是 gauge.shtm 文件

<%#TagSSI,Oil_Temp%>

Answer 1

在您的情况下，我建议您进行以下重新排列，看看它是否适合您。 google.setOnLoadCallback() 设置了一个回调函数，以便在 Google 可视化 API 加载后执行。但是你可以在这里省略它，因为你的结果取决于 ajax 调用的 success。

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

如果您注意到稍作修改，我正在调用 refreshData() 并且 drawChart() 将在成功时作为回调函数执行，例如done(function(result) { })。 ajax 成功的结果传递给用作回调的 drawChart() 函数。如果它不起作用，请告诉我结果。

More to read on callback functions.

Answer 2

我想通了我的问题。我不是特别确定 @Rohit416 给我的答案出了什么问题，但是在网络上进行更多搜索后，我找到了一个解决方案并根据我的需要对其进行了修改。

这是最终对我有用的解决方案

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

我的oil.shtm文件如下

这成功地每秒更新了我的仪表，我同时用多个仪表测试了这个方法，它也能正常工作。

Google 仪表盘未显示

Google Gauge chart not displaying

javascript

ajax

vbscript

google-gauges

ewon