This example shows how to take raw JSON data and plot it using the Google Charts API. See Google’s chart gallery for examples of what you can plot based on your JSON data.

Line Charts

Example

A sample chart can be seen below based on temperature data logged from MQTT publications to the /test/temp topic. Data was published to this topic via the following command (using node and the mqtt package installed via sudo npm install -g mqtt):

$ mqtt pub -h d.microbuilder.io -t test/temp -m '17.8'

Note: The MQTT broker at d.microbuilder.io is shown as an example and is not publicly accessible, although the JSON records are publicly available.

Source Code

The Javascript code required to read JSON data from a specific URL is shown below. Please note that this code will attempt to convert the .payloadString field in the JSON record to a float value, so any string based payloads will fail to parse.

<div id="chart" style="width: 100%"></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://www.google.com/jsapi"></script>

<script>

// 3. This function fires when Google Charts has been fully loaded
function drawChart() {

  // 4. Retrieve the raw JSON data
  var jsonData = $.ajax({
    url: 'http://d.microbuilder.io:8080/test/temp',
    dataType: 'json',
  }).done(function (results) {

    // 5. Create a new DataTable (Charts expects data in this format)
    var data = new google.visualization.DataTable();

    // 6. Add two columns to the DataTable
    data.addColumn('datetime', 'Time');
    data.addColumn('number',   'Temp');

    // 7. Cycle through the records, adding one row per record
    results["packets"].forEach(function(packet) {
      data.addRow([
          (new Date(packet.timestamp)),
          parseFloat(packet.payloadString),
        ]);
    });

    // 8. Create a new line chart
    var chart = new google.visualization.LineChart($('#chart').get(0));

    // 9. Render the chart, passing in our DataTable and any config data
    chart.draw(data, {
      title:  'Ambient Temperature (/test/temp)',
      height: 150
    });

  });

}

// 1. Start loading Google Charts
google.load('visualization', '1', {
  packages: ['corechart']
});

// 2. Set a callback function to fire when loading is complete
google.setOnLoadCallback(drawChart);

</script>