不能将JSON数据加载到Google Gauge中

Can't load JSON data into Google Gauge

本文关键字：Google Gauge 加载 JSON 数据 不能      更新时间：2023-09-26

尝试从内部HTML页面输入JSON数据时遇到麻烦。由于我不需要可视化表，我正在努力弄清楚数据是否被正确地存储在其中。

这是我的ajax;

<script type="text/javascript">
        google.charts.load('current', {'packages':['gauge']});
        google.charts.setOnLoadCallback(drawChart);
        $(document).ready(function(){
            $('tempData').DataTable({
                ajax: {
                    url: 'https://10.54.101.43/getData.json',
                    dataSrc: 'sensor',
                },
                columns: [
                    {data: 'label'},
                    {data: 'tempf'},
                    {data: 'tempc'}
                ]
            });
        });

这是图表:

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

            var options = {
                width: 400, height: 120,
                redFrom: 69, redTo: 100,
                yellowFrom: 31, yellowTo: 69,
                greenFrom: 0, greenTo: 31,
                minorTicks: 5
            };
            var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
            chart.draw(data, options);
            setInterval(function() {
                data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
                chart.draw(data, options);
            }, 13000);
        }
</script>

我要做的是从该URL获取数据，仅在数组中存储相关信息，然后用所需的数据填充测量。

EDIT这是未格式化的JSON。

{"name":"CAB-L1","date":"09/12/16 15:54:36","uptime":"21d 04:18:08","scale":1,"macaddr":"00:80:A3:A4:9B:2F","serial":"RA3E-A49B2F","devtype":85,"refresh":"60","disp":0,"interval":"300","gtmd_interval":"3600","version":"v2.0.1","port":80,"ip":"10.54.101.43","gtmd_disabled":"0","time_config":{"timezone": "0","format": "0", "display": "0", "daylight_saving_en": "0"},"sensor":[{"label":"Internal Sensor","tempf":"81.82","tempc":"27.68","highf":"94.31","highc":"34.62","lowf":"79.91","lowc":"26.62","alarm":4,"type":16,"enabled":1},{"label":"Ext Sensor 1","tempf":"32.00","tempc":"0.00","highf":"32.00","highc":"0.00","lowf":"32.00","lowc":"0.00","alarm":0,"type":0,"enabled":0}],"switch_sen":[{"label":"Switch Sen 1","enabled":1,"alarm":1,"status":0}]}

建议这样设置，如果您不需要ajax数据表

google.charts.load('current', {
  callback: function () {
    $.ajax({
      url: "https://10.54.101.43/getData.json",
      dataType:"json"
    }).done(function (jsonData) {
      // print json to console
      console.log(JSON.stringify(jsonData));
      // get json here 
      // use to build data table (if formatted for google)
      var data = new google.visualization.DataTable(jsonData);
      var options = {
        width: 400, height: 120,
        redFrom: 69, redTo: 100,
        yellowFrom: 31, yellowTo: 69,
        greenFrom: 0, greenTo: 31,
        minorTicks: 5
      };
      var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
      chart.draw(data, options);
      setInterval(function() {
        data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
        chart.draw(data, options);
      }, 13000);
    }).fail(function (jqXHR, textStatus) {
      console.log('error', textStatus);
    });
  },
  packages:['corechart']
});

如果你的json格式如下，你可以直接创建图表数据
(在示例中DataTable构造函数方法下找到)

var dt = new google.visualization.DataTable({
    cols: [{id: 'task', label: 'Task', type: 'string'},
           {id: 'hours', label: 'Hours per Day', type: 'number'}],
    rows: [{c:[{v: 'Work'}, {v: 11}]},
           {c:[{v: 'Eat'}, {v: 2}]},
           {c:[{v: 'Commute'}, {v: 2}]},
           {c:[{v: 'Watch TV'}, {v:2}]},
           {c:[{v: 'Sleep'}, {v:7, f:'7.000'}]}]
});

编辑

由于传感器数据没有为google格式化，
数据必须从json

中提取。

给出以下json…

{
  "name":"CAB-L1",
  "date":"09/12/16 07:56:59",
  "uptime":"20d 20:21:56",
  "scale":1,
  "macaddr":"00:80:A3:A4:9B:2F",
  "serial":"RA3E-A49B2F",
  "devtype":85,
  "refresh":"60",
  "disp":0,
  "interval":"300",
  "gtmd_interval":"3600",
  "version":"v2.0.1",
  "port":80,
  "ip":"10.54.101.43",
  "gtmd_disabled":"0",
  "time_config":{
    "timezone": "0",
    "format": "0",
    "display": "0",
    "daylight_saving_en": "0"
  },
  "sensor":[
    {
      "label":"Internal Sensor",
      "tempf":"80.92",
      "tempc":"27.18",
      "highf":"94.31",
      "highc":"34.62",
      "lowf":"79.91",
      "lowc":"26.62",
      "alarm":4,
      "type":16,
      "enabled":1
    },
    {
      "label":"Ext Sensor 1",
      "tempf":"32.00",
      "tempc":"0.00",
      "highf":"32.00",
      "highc":"0.00",
      "lowf":"32.00",
      "lowc":"0.00",
      "alarm":0,
      "type":0,
      "enabled":0
    }
  ],
  "switch_sen":[
    {
      "label":"Switch Sen 1",
      "enabled":1,
      "alarm":1,
      "status":0
    }
  ]
}
下面的例子将使用标记为"sensor"的数组来构建图表 
google.charts.load('current', {
  callback: function () {
    $.ajax({
      url: "https://10.54.101.43/getData.json",
      dataType:"json"
    }).done(function (jsonData) {
      // create data table
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Sensor');
      data.addColumn('number', 'Reading');
      // get sensor data
      jsonData.sensor.forEach(function (sensor) {
        data.addRow([
          // use sensor label
          sensor.label,
          // convert 'tempf' value to a number
          parseFloat(sensor.tempf)
        ]);
      });
      var options = {
        width: 600, height: 180,
        redFrom: 69, redTo: 100,
        yellowFrom: 31, yellowTo: 69,
        greenFrom: 0, greenTo: 31,
        minorTicks: 5
      };
      var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
      chart.draw(data, options);
    }).fail(function (jqXHR, textStatus) {
      console.log(textStatus);
    });
  },
  packages:['gauge']
});
以

为例，下面是一个工作的片段，使用硬编码json 

google.charts.load('current', {
  callback: function () {
    var jsonData = {
      "name":"CAB-L1",
      "date":"09/12/16 07:56:59",
      "uptime":"20d 20:21:56",
      "scale":1,
      "macaddr":"00:80:A3:A4:9B:2F",
      "serial":"RA3E-A49B2F",
      "devtype":85,
      "refresh":"60",
      "disp":0,
      "interval":"300",
      "gtmd_interval":"3600",
      "version":"v2.0.1",
      "port":80,
      "ip":"10.54.101.43",
      "gtmd_disabled":"0",
      "time_config":{
        "timezone": "0",
        "format": "0",
        "display": "0",
        "daylight_saving_en": "0"
      },
      "sensor":[
        {
          "label":"Internal Sensor",
          "tempf":"80.92",
          "tempc":"27.18",
          "highf":"94.31",
          "highc":"34.62",
          "lowf":"79.91",
          "lowc":"26.62",
          "alarm":4,
          "type":16,
          "enabled":1
        },
        {
          "label":"Ext Sensor 1",
          "tempf":"32.00",
          "tempc":"0.00",
          "highf":"32.00",
          "highc":"0.00",
          "lowf":"32.00",
          "lowc":"0.00",
          "alarm":0,
          "type":0,
          "enabled":0
        }
      ],
      "switch_sen":[
        {
          "label":"Switch Sen 1",
          "enabled":1,
          "alarm":1,
          "status":0
        }
      ]
    };
    // create data table
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Sensor');
    data.addColumn('number', 'Reading');
    // get sensor data
    jsonData.sensor.forEach(function (sensor) {
      data.addRow([
        // use sensor label
        sensor.label,
        // convert 'tempf' value to a number
        parseFloat(sensor.tempf)
      ]);
    });
    var options = {
      width: 600, height: 180,
      redFrom: 69, redTo: 100,
      yellowFrom: 31, yellowTo: 69,
      greenFrom: 0, greenTo: 31,
      minorTicks: 5
    };
    var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
    chart.draw(data, options);
  },
  packages:['gauge']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

相关文章：