To get the data in this time-series onto your site, simply select, copy and paste this code between the <body> and </body> tags on your web page:
<!-- START OF NOMIS CODE SNIPPET -->
<!--
From http://www.nomisweb.co.uk./report.aspx
Data from Nomis API (http://www.nomisweb.co.uk/api/v01/help) displayed using
the Google Visualization API (http://code.google.com/apis/chart)
-->
<!-- Begin Styles for data table -->
<style>
.googleTH {
font-family: monospace;
font-size: 8pt;
background: #ccccb1;
font-Weight: bold;
}
.googleTR {
font-family: monospace;
font-size: 8pt;
}
.googleTRHover {
font-family: monospace;
font-size: 8pt;
background: #a0c0a0;
}
.googleTROdd {
font-family: monospace;
font-size: 8pt;
background: #edede1;
}
.googleCell {
border: 1px solid #efefef;
padding: 1px;
}
</style>
<!-- End Styles for data table -->
<!-- Begin external JavaScript for jQuery and Google visualization API -->
<script type="text/javascript" src="https://www.nomisweb.co.uk/libs/jquery/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<!-- End external JavaScript -->
<!-- Main script to load Google Visualization classes and get data from Nomis -->
<script type="text/javascript">
// Begin loading Google Visualizations
google.charts.load('current', { packages: ['table', 'corechart'] });
// When Google Visualizations have loaded, call the getNomisData function
google.setOnLoadCallback(getNomisData);
/*
This function is called after the Google API has loaded.
Calls to the Nomis API are then made from within this function.
*/
function getNomisData()
{
/*
Begin Nomis API query for "Job Density" data. When response is returned, the success function is called to populate the charts.
If you are already using charts based on this code on your site, copy only this $.ajax(...); call
together with the "nomisChart500378" and "nomisTable500378" div tags.
*/
$.ajax({
url: 'http://www.nomisweb.co.uk/api/v01/dataset/NM_57_1.google.visualization.datatable.json',
data: 'geography=1820328121,2013265926,2092957698&item=1,3&measures=20100&select=measures,geography_sortorder,geography_name,date,date_name,obs_value&rows=(measures),(date),date_name&cols=(geography_sortorder),geography_name',
dataType: 'jsonp',
success: function(nomisdata)
{
// Create a data table with the JSON formatted data from Nomis.
var data = new google.visualization.DataTable(nomisdata);
// Change date column heading from "DATE_NAME" so it looks better on screen
data.setColumnLabel(0, 'Date');
// Put some Google Number Formatters onto the data columns
for(i=1; i < data.getNumberOfColumns(); i++) (new google.visualization.NumberFormat({ prefix: '', suffix: '', fractionDigits: 2 })).format(data, i); // Apply number format to column
/* Google Line Chart (see http://code.google.com/apis/chart/interactive/docs/gallery/linechart.html for documentation. If you don't require a line chart, remove the next two lines of code and the div with id="nomisChart500378") */
var chart = new google.visualization.LineChart(document.getElementById('nomisChart500378'));
chart.draw(data, {
width: 700,
height: 400,
title: 'Job Density',
colors: ['#1939CF','#BF537B','#83AF8C'],
hAxis: { title: '', textStyle: {fontSize: 12} },
vAxis: { title: 'density', textStyle: {fontSize: 12}, minValue: 0, maxValue: 0 },
legendTextStyle: {fontSize: 12}
});
/* Google Table (see http://code.google.com/apis/chart/interactive/docs/gallery/table.html for documentation. If you don't require the data table, remove the next two lines of code and the div with id="nomisTable500378") */
var table = new google.visualization.Table(document.getElementById('nomisTable500378'));
table.draw(data, { width: 650, allowHtml: true, cssClassNames: { tableCell: 'googleCell', hoverTableRow: 'googleTRHover', headerRow: 'googleTH', tableRow: 'googleTR', oddTableRow: 'googleTROdd' } });
}
});
/* End of Nomis API Query for "Job Density" data */
/* Add any further Nomis API calls here */
}
</script>
<!-- Container for Line Chart of "Job Density" -->
<div id="nomisChart500378"></div>
<!-- Container for Table of "Job Density" -->
<div id="nomisTable500378"></div>
<!-- Begin table notes, warnings and data source messages for "Job Density" -->
<p>The density figures represent the ratio of total jobs to population aged 16-64.</p>
<table></table>
<p>Source: Office for National Statistics (ONS jobs density)</p>
<!-- End table notes, warnings and data source messages for "Job Density" -->
<!-- END OF NOMIS CODE SNIPPET -->
