Skip to content

Instantly share code, notes, and snippets.

@lmelgar

lmelgar/data.json

Created September 7, 2015 13:19
Show Gist options
  • Save lmelgar/776dad567bb3f5d1b6d1 to your computer and use it in GitHub Desktop.
Save lmelgar/776dad567bb3f5d1b6d1 to your computer and use it in GitHub Desktop.
Download ZIP
Test with json
Raw
data.json
[
{"name":"Argentina","value":[6245,6253,5780,5459,5405,5193,5238,5321,5169,5131,4966,4780]},
{"name":"Bolivia","value":[11716,11249,10704,10074,9433,8735,8137,7615,7193,6930,6758,6641]},
{"key":"Brazil","value":[54832,49618,46313,41297,38213,33548,29617,26744,23996,22632,21916,21428]},
{"key":"Chile","value":[1315,1302,1266,1252,1163,1175,1129,1151,1118,1100,1066,1038]},
{"key":"Colombia","value":[10425,10619,10981,10245,10238,10156,9576,9189,8943,8606,8255,7943]},
{"key":"Ecuador","value":[5547,5312,5168,5042,4912,4754,4456,4322,4125,3983,3860,3787]},
{"key":"Paraguay","value":[2737,2603,2546,2518,2454,2367,2270,2217,2163,2125,2104,2073]}
{"key":"Peru","value":[11315,10543,9716,8983,8399,7788,7230,6735,6313,5868,5612,5286]},
{"key":"Uruguay","value":[456,445,399,394,376,362,361,368,354,344,332,316]},
{"key":"Venezuela","value":[6252,6319,6292,5979,5819,5736,5640,5513,5412,5312,5170,5033]}
]
Raw
index.html
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<title>Highcharts Extract Example</title>
<!-- Code example for class extracted from http://datatools.urban.org/Features/wealth-inequality-charts/ with code from Tim Meko and Ben Chartoff -->
<style>
body {
font: 16px/24px Verdana, Helvetica, Helvetica Neue, Arial;
width: 90%;
}
.aside-content {
background: #f9f9f9;
margin: 20px;
width: 600px;
}
.btn {
display: inline;
font-size: 14px;
padding: 14px;
cursor: pointer;
border: none;
color: white;
background-color: #1696d2;
display: block;
line-height: 12px;
text-transform: uppercase;
text-align: center;
float: left;
margin-right: 1px;
}
.chart {
margin: 0 auto;
margin-top: 0px;
position: relative;
width: 600px;
height: 70%;
}
.btn:hover {
background-color: #000;
}
.clearfix:before,
.clearfix:after {
content: ' ';
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.hide {
display: none;
}
.show {
display: block;
}
</style>
</head>
<body>
<div class='aside-content'>
<div id='total-mortality' class='chart show'></div>
<div id='gdp-rate' class='chart hide'></div>
<div class='btn-group clearfix'>
<button id='racegap' class='btn autocompare'>Show GDP and Rate Mortality</button>
</div>
<p class='chart-notes'><b>Source:</b> Global Health Observatory (GHO), World Health Organization. World Bank.</p>
<b>Data source:</b> <a href='http://www.who.int/gho/mortality_burden_disease/life_tables/situation_trends/en/'>GHO</a>. <a href="http://data.worldbank.org/">World Bank</a></p>
<p class='chart-notes'><b>Notes:</b> Click on the country names to exclude countries in the analysis, so you can compare those that you prefer.</p>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script type='text/javascript'>
// style theme
colors: ['#0096d2', '#00578b', '#fcb918', '#f47d20', '#6d6d6d', '#c6c6c6', 'rgba(0, 153, 255, 1)',
'#55BF3B', '#DF5353', '#7798BF', '#aaeeee'],
Highcharts.theme = {
chart: {
backgroundColor: null,
style: {
fontFamily: 'Verdana, sans-serif'
},
marginTop: 0,
marginBottom: 40
},
title: {
style: {
fontSize: '18px',
fontWeight: 'bold',
color: '#5a5a5a'
},
align: 'left'
},
subtitle: {
align: 'left'
},
tooltip: {
backgroundColor: 'rgba(229, 231, 234,0.9)',
borderWidth: 0,
borderColor: null,
shape: 'square',
followTouchMove: false,
followPointer: false,
style: {
color: '#000000',
fontWeight: 'normal'
}
},
legend: {
itemMarginBottom: 5,
itemStyle: {
fontSize: '13px',
color: '#5a5a5a',
fontWeight: 'normal'
},
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
xAxis: {
gridLineWidth: 1,
gridLineDashStyle: 'Dash',
gridLineColor: 'rgba(219,219,216,0.5)',
labels: {
style: {
fontSize: '12px'
}
},
tickmarkPlacement: 'on',
tickInterval: 10
},
yAxis: {
gridLineWidth: 1.2,
gridLineDashStyle: 'Dash',
minorTickInterval: 'none',
gridLineColor: 'rgba(219,219,216,0.5)',
title: {
},
labels: {
style: {
fontSize: '12px'
}
}
},
}
// Apply the theme
Highcharts.setOptions(Highcharts.theme);
$(function () {
var processed_json = new Array();
$.getJSON('data.json', function(data) {
// Populate series
for (i = 0; i < data.length; i++){
processed_json.push([data[i].name, data[i].value]);
}
$(function() {
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});
// 2 charts created
//chart5-mean
$('#total-mortality').highcharts({
chart: {
type: 'line',
marginTop: 120,
marginBottom: 40
},
plotOptions: {
series: {
marker: {
enabled: true,
radius: 3.2,
lineWidth: 0.3,
symbol: 'circle',
fillColor: '#ffffff',
lineColor: null
},
dataLabels: {
enabled: false,
align: 'right',
x: 0,
y: -5,
formatter: function () {
if ((this.point.x == this.series.data.length - 1) || (this.point.x == 0)) {
return Highcharts.numberFormat(this.x, 0, '.', ',');
Highcharts.numberFormat(this.y, 0, '.', ',')
} else {
return null;
}
}
}
}
},
title: {
text: 'Children mortality in South America since 2002'
},
subtitle: {
text: '',
x: 0,
y: 35
},
xAxis: {
gridLineWidth: '',
lineWidth: 0.5,
tickInterval: 2,
categories: ['2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013'],
plotLines: [{
value: 0,
width: 0
}],
labels: {
step: 0,
x: 0,
y: 20
}
},
yAxis: {
title: {
text: ''
},
min: 0,
startOnTick: false,
labels: {
format: '{value:,.0f}'
}
},
tooltip: {
shared: false,
formatter: function () {
return this.series.name + '<br>' +
'</b><b>' + Highcharts.numberFormat(this.point.y, 0, ',') + ' children died </b> in ' + this.x;
}
/*formatter: function () {
return '<span style="color:' + this.series.color + '"><b>' + this.series.name + '</b><br/>' + this.y + ' children died in ' + this.x ' k</span>';
}*/
},
credits: {
enabled: false,
text: '',
href: ''
},
legend: {
enabled: true,
floating: 'true',
align: 'center',
verticalAlign: 'left',
layout: 'horizontal',
borderWidth: 0,
itemDistance: 9,
y: 40
},
series: [{
name: 'Infant mortality',
data: processed_json
}); //end chart racial weawlth gap
// this one is hidden by default:
//chart5-median
$(function () {
$('#gdp-rate').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy',
marginTop: 120,
marginBottom: 60
},
title: {
text: 'GDP and children mortality in South America (2013)'
},
subtitle: {
text: ' '
},
xAxis: {
title: {
enabled: true,
text: 'Mortality rate, per 1,000 live births'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
labels: {
format: '{value:,.0f}'
},
title: {
text: 'GDP per capita'
}
},
legend: {
enabled: true,
floating: 'true',
align: 'center',
verticalAlign: 'left',
layout: 'horizontal',
borderWidth: 0,
itemDistance: 9,
y: 40
},
credits: {
enabled: false,
text: '',
href: 'http://www.neighborhoodinfodc.org'
},
plotOptions: {
scatter: {
marker: {
enabled: true,
radius: 6,
lineWidth: 2,
symbol: 'circle',
lineColor: null,
states: {
hover: {
enabled: true,
lineColor: 'rgba(100,100,100, 0.5)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<span style="color:{series.color}">{series.name}</span><br>',
pointFormat: '{point.x} death children per 1,000 live births <br> GDP per capita: ${point.y}'
}
}
},
series: [{
name: 'Argentina',
color: 'rgba(0, 153, 255, 1)',
data: [[13.3, 15009]]
}, {
name: 'Bolivia',
color: 'rgba(0, 153, 255, 1)',
data: [[39.1, 2868]]
},
{
name: 'Brazil',
color: 'rgba(0, 153, 255, 1)',
data: [[13.7, 11939]]
},
{
name: 'Chile',
color: 'rgba(0, 153, 255, 1)',
data: [[8.2, 15703]]
},
{
name: 'Colombia',
color: 'rgba(0, 153, 255, 1)',
data: [[16.9, 7865]]
},
{
name: 'Ecuador',
color: 'rgba(0, 153, 255, 1)',
data: [[22.5, 6003]]
},
{
name: 'Paraguay',
color: 'rgba(0, 153, 255, 1)',
data: [[21.9, 4248]]
},
{
name: 'Peru',
color: 'rgba(0, 153, 255, 1)',
data: [[16.7, 6662]]
},
{
name: 'Uruguay',
color: 'rgba(0, 153, 255, 1)',
data: [[11.1, 16884]]
},
{
name: 'Venezuela',
color: 'rgba(0, 153, 255, 1)',
data: [[14.9, 12213]]
}
]
});
});
//end chart racial weawlth gap
// Handle the toggle button with class setting:
document.getElementById('gdp-rate').className = 'chart hide';
$('#racegap').click(function () {
var racegap = document.getElementById('total-mortality');
if (racegap.className === 'chart show') {
document.getElementById('total-mortality').className = 'chart hide';
document.getElementById('gdp-rate').className = 'chart show';
document.getElementById('racegap').innerHTML = 'Show yearly total mortality'
} else {
document.getElementById('racegap').innerHTML = 'Show GDP and Rate Mortality'
document.getElementById('gdp-rate').className = 'chart hide';
document.getElementById('total-mortality').className = 'chart show';
}
});
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment