xxxxxxxxxx
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<title>Highcharts Extract Example</title>
<!-- Code example for class extracted from https://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'>These two charts show the child mortality in South America and its relation with the increase of the GDP in the region. Click on the country names to exclude countries in the analysis, so you can compare those that you prefer.</p>
<p class='chart-notes'><b>Source:</b> Global Health Observatory (GHO), World Health Organization. World Bank.</p>
<b>Data source:</b> <a href='https://www.who.int/gho/mortality_burden_disease/life_tables/situation_trends/en/'>GHO</a>. <a href="https://data.worldbank.org/">World Bank.</a></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() {
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: 'Child mortality in South America, under 5 years old'
},
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: 'Argentina',
color: 'rgba(0, 153, 255, 1)',
data: [6245, 6253, 5780, 5459, 5405, 5193, 5238, 5321, 5169, 5131, 4966, 4780]
},
{
name: 'Bolivia',
color: 'rgba(0, 153, 255, 1)',
data: [11716, 11249, 10704, 10074, 9433, 8735, 8137, 7615, 7193, 6930, 6758, 6641]
},
{
name: 'Brazil',
color: 'rgba(0, 153, 255, 1)',
data: [54832,49618,46313,41297,38213,33548,29617,26744,23996,22632,21916,21428]
},
{
name: 'Chile',
color: 'rgba(0, 153, 255, 1)',
data: [1315,1302,1266,1252,1163,1175,1129,1151,1118,1100,1066,1038]
},
{
name: 'Colombia',
color: 'rgba(0, 153, 255, 1)',
data: [10425,10619,10981,10245,10238,10156,9576,9189,8943,8606,8255,7943]
},
{
name: 'Ecuador',
color: 'rgba(0, 153, 255, 1)',
data: [5547,5312,5168,5042,4912,4754,4456,4322,4125,3983,3860,3787]
},
{
name: 'Paraguay',
color: 'rgba(0, 153, 255, 1)',
data: [2737,2603,2546,2518,2454,2367,2270,2217,2163,2125,2104,2073]
},
{
name: 'Peru',
color: 'rgba(0, 153, 255, 1)',
data: [11315,10543,9716,8983,8399,7788,7230,6735,6313,5868,5612,5286]
},
{
name: 'Uruguay',
color: 'rgba(0, 153, 255, 1)',
data: [456,445,399,394,376,362,361,368,354,344,332,316]
},
{
name: 'Venezuela',
color: 'rgba(0, 153, 255, 1)',
data: [6252,6319,6292,5979,5819,5736,5640,5513,5412,5312,5170,5033]
}
]
}); //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 child mortality in South America (2013)'
},
subtitle: {
text: ' '
},
xAxis: {
title: {
enabled: true,
text: 'Under 5 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: 'https://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>
https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js
https://code.highcharts.com/highcharts.js