A little demo

This is a little demo that shows how to import data into a JavaScript script and format it in order to display it using Google charts. You can see the final result here.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(start);
	
  function start () {
    $.getJSON("S-m36-2013-09.json", process);
  }
	
  function process(result) {
    var cols = [
      {"type" : "date", "label" : "Time"},
      {"type" : "number", "label" : result.description}
    ];		
    var rows = [];
    var step = result.data.step;
    var start = result.data.start;
		
    result.data.readings.forEach(function (value, key) {
      rows.push({
        "c" : [
          {"v" : new Date(start + key * step)},
          {"v" : value}
        ]
      });
    });

    drawChart(cols, rows, result);	
  }
	
  function drawChart(cols, rows, meterData) {
    var data = new google.visualization.DataTable({
      "cols" : cols,
      "rows" : rows
    });
    var options = {
      title: meterData.description + " in " + meterData.coverage + ", Room: " + meterData.room
    };
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

    chart.draw(data, options);	
  }

</script>

Gather the data

The data is in JSON format which is easily understood by JavaScript (see json.org). jQuery has a shorthand method called getJSON which loads the data from the server using a GET HTTP request¹.

The first argument given to the function is the URL of the JSON data to be loaded while process is the callback in case of success which is passed the loaded data.

Process the data

The process function formats the data the way needed to work with Google Charts but different charting frameworks might need different formatting. In this case a table-like format is employed, where the cols array contains the column headers while the rows array contains the points on the chart defined by as many values as the number of columns. (see the Google Charts API for more information)

Plot the data

Once the data has been formatted and placed inside the relevant arrays it is passed to a drawChart function that uses the Google Charts API to draw a line chart inside #chart_div with the title built from the attributes of the meter.

This is just a very simple example of how to use the publicly available energy data. For a more complex example have a look at the Joule Visualisation Tool.

¹ : Due to the same-origin policy cross domain requests are forbidden inside a browser unless methods like JSONP or CORS are used. Another alternative is to use a proxy page on your server that retrieves the data and makes it available on your domain or as a last resort manually copy the data to your server.