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. To get started just copy and paste the following code in an html file on your web server along with the data file you can find here.
<!DOCTYPE HTML>
<html lang="en">
<head>
<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>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
<div class="test"></div>
</body>
</html>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 request1.
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.
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).
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. Click on the image to see the demo.
This is just a very simple example of how to use the publicly available energy data. You can try using multiple meters by loading more files with multiple getJSON calls and combining the resulting data arrays inside a parent array. You will have to add columns to the cols array and add the extra objects to the c arrays for as many different meters you load. You can use the key inside the forEach loop to read the corresponding value in the other data arrays or you can use a nested forEach loop that iterates over all available data arrays to compose the c arrays.
For a more complex example have a look at the Joule Visualisation Tool.
1 : 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.