This is part of a series that includes Java applet and Processing.js examples.
ISSUE #1:
If your browser prompts you to abort the script because it is taking too long, make sure you click 'No'. The 8760 hourly data points required for a whole year can take a while to initially process, which is why this message occurs in some browsers.
ISSUE #1:
For some reason, this type of chart does not resize itself particularly well to fit within it's parent container. If you change the width of your browser significantly, you will need to refresh the page to get a better fit.
Google Annotation Chart
This is a Google Chart that demonstrates an annual data graph. Click and drag the date slider at the bottom with the left mouse button to control the amount of the year shown and the start-date.
Keyboard Controls
The Google graph does not appear to respond to any keyboard controls.
Mouse Controls
Click & Drag:
To interact with the graph, click and drag either the start/stop day nodes or the scrolling block bar at the very bottom. The graph will update when you release the mouse button. If you click and drag within the graph itself, you can scroll backwards and forwards through the year.Mouse Wheel:
You can use the mouse wheel to interactively adjust the start date, thereby zooming in/out on the data.
Including the Graph
Including such a graph is pretty simple. Google provide an extensive gallery of graph types together with example code for generating them. The above is an ‘Annotation Chart’, so it’s code is shown below.
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load('current', {'packages':['annotationchart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Date');
data.addColumn('number', 'Temperatures');
data.addRows([
[new Date(2001, 0, 1, 0), 0.0],
[new Date(2001, 0, 1, 1), 4.8],
[new Date(2001, 0, 1, 2), 4.6],
[new Date(2001, 0, 1, 3), 2.6],
[new Date(2001, 0, 1, 4), 3.6],
// ...
// Rest of year data here...
// ...
[new Date(2001, 11, 31, 20), 9.4],
[new Date(2001, 11, 31, 21), 7.0],
[new Date(2001, 11, 31, 22), 8.5],
[new Date(2001, 11, 31, 23), 2.2]
]);
var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
chart.draw(data, { displayAnnotations: true });
}
</script>Data Collection
The hourly temperature data for this graph was extracted from Autodesk Ecotect. A script was used to extract and format the temperature data suitable for use as a Google DataTable. You will need to make sure that you have loaded a model with a selected Weather data file in Ecotect or simply select one using Model > Model Settings… > Date/Time/Location before running this script.
-- Make sure weather data is loaded.
cmd("weather.load")
-- Start the data table.
print("data.addRows([");
-- ----------------------------------
function formatDataLine(julianday, month, day, hour, value)
line = format(" [new Date(2001, %2d, %2d, %2d), %5.1f]", month, day, hour, value);
if (julianday < 365) or (hour < 23) then line = line .. ","; end
print(line)
end
-- ----------------------------------
for d = 1,365 do
-- Set date to get day/month.
set("model.dayoftheyear", d, 12.0)
month = get("model.month")
day = get("model.date")
for h = 0,23 do
formatDataLine(d, month, day, h, get("weather.temperature", d, h))
end
end
-- End the data table.
print(" ]);");Click here to comment on this page.