Skip to content

Instantly share code, notes, and snippets.

@northernjamie

northernjamie/SCOTSTAT_Google_Chart_Demo_Full_Code.html

Last active June 9, 2019 20:23
Show Gist options
  • Save northernjamie/52cd80a11799f23806c282e03f435e46 to your computer and use it in GitHub Desktop.
Save northernjamie/52cd80a11799f23806c282e03f435e46 to your computer and use it in GitHub Desktop.
Download ZIP
All code needed to generate a basic webpage and google chart using a SPARQL query from scot.stat.gov
Raw
SCOTSTAT_Google_Chart_Demo_Full_Code.html
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src='https://code.jquery.com/jquery-3.2.1.min.js'></script>
<script type="text/javascript">
//Set the url of the SPARQL endpoint
var url = 'http://statistics.gov.scot/sparql.json';
// SPARQL query
var query = 'PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#> SELECT ?periodlabel ?countbirths WHERE { ?birthobs <http://purl.org/linked-data/cube#dataSet> <http://statistics.gov.scot/data/births> ; <http://purl.org/linked-data/sdmx/2009/dimension#refArea> <http://statistics.gov.scot/id/statistical-geography/S92000003> ; <http://purl.org/linked-data/sdmx/2009/dimension#refPeriod> ?perioduri ; <http://statistics.gov.scot/def/dimension/gender> <http://statistics.gov.scot/def/concept/gender/all> ; <http://purl.org/linked-data/cube#measureType> <http://statistics.gov.scot/def/measure-properties/count> ; <http://statistics.gov.scot/def/measure-properties/count> ?countbirths .?perioduri rdfs:label ?periodlabel . }ORDER BY ?periodlabel';
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table with data from OpenDataCommunities,
// instantiates the line chart, passes in the data and
// draws it.
function drawChart() {
// Go and get the data from OpenDataCommunities
$.ajax({
method: 'POST',
dataType: 'json',
url: url,
data: {query: query},
success: function(data) {
var bindings = data.results.bindings
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Scotland');
// Cycle through the records, adding one row per record
bindings.forEach(function(tabledata) {
data.addRows([
[tabledata.periodlabel.value,parseFloat(tabledata.countbirths.value)]
]);
});
// Set chart options
var options = {'title':'Number of Births in Scotland',
'width':600,
'height':300,
'lineWidth': 2,
'legend':'bottom'};
// Alternative options
/*
var options = {'title':'Number of Rough Sleepers in England',
'width':500,
'height': 300,
'lineWidth': 10,
'colors':['#FF0000'],
'lineDashStyle':[8,4]};
*/
// Instantiate and draw our chart, passing in the options.
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
});
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment