CODEWITHSUNDEEP
javascriptjsonajaxgoogle-visualization
Brody
Brody

Reputation: 89

Can't load JSON data into Google Gauge

Having trouble trying to input JSON data from an internal HTML page. As I have no need to visualise the table, I'm struggling to work out if the data is being correctly stored inside it.

Here's my 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'}
                ]
            });

        });

and here's the drawing of the chart:

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>

What I'm trying to do is take the data from that URL, store only the relevant information within an array, and then populate the gauge with the required data.

EDIT Here's the unformatted 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}]}

Upvotes: 3

Views: 1076

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

recommend setup like this, if you don't need the ajax data table 

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

and if you're json is formatted as follows, you can create the chart data directly
(found in the example under the DataTable constructor method) 

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

EDIT

since the sensor data is not formatted for google,
the data must be extracted from the json

given the following 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
    }
  ]
}

the example below will use the array labeled "sensor" to build the chart 

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

for example purposes, following is a working snippet, using hard-coded 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>

Upvotes: 1

Related Questions