Skip to content

Instantly share code, notes, and snippets.

@rebih

rebih/index.html

Last active April 20, 2017 20:02
Show Gist options
  • Save rebih/561f0e7e23f284f1eb8f098ee0110b45 to your computer and use it in GitHub Desktop.
Save rebih/561f0e7e23f284f1eb8f098ee0110b45 to your computer and use it in GitHub Desktop.
Download ZIP
Exercise06_Highchart
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts - Life Expectancy at Birth 2000</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/modules/data.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- format -->
<script>
'use strict';
/* global document */
// Load the fonts
Highcharts.createElement('link', {
href: 'https://fonts.googleapis.com/css?family=Unica+One',
rel: 'stylesheet',
type: 'text/css'
}, null, document.getElementsByTagName('head')[0]);
Highcharts.theme = {
colors: ['#33A38A'],
chart: {
backgroundColor: '#FFFFFF',
style: {
fontFamily: '\'Arial\', sans-serif',
textTransform: 'uppercase'
},
plotBorderColor: '#606063'
},
title: {
style: {
color: '#2F4F4F',
textTransform: 'uppercase',
fontSize: '20px'
}
},
subtitle: {
style: {
color: '#2F4F4F',
textTransform: 'uppercase'
}
},
xAxis: {
gridLineColor: '#707073',
labels: {
style: {
color: '#2F4F4F'
}
},
lineColor: '#E0E0E3',
minorGridLineColor: '#505053',
tickColor: '#707073',
title: {
style: {
color: '#A0A0A3'
}
}
},
yAxis: {
gridLineColor: '#E0E0E3',
labels: {
style: {
color: '#2F4F4F'
}
},
lineColor: '#707073',
minorGridLineColor: '#505053',
tickColor: '#707073',
tickWidth: 1,
title: {
style: {
color: '#A0A0A3'
}
}
},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.85)',
style: {
color: '#F0F0F0'
}
},
plotOptions: {
series: {
dataLabels: {
color: '#B0B0B3'
},
marker: {
lineColor: '#333'
}
},
boxplot: {
fillColor: '#505053'
},
candlestick: {
lineColor: 'white'
},
errorbar: {
color: 'white'
}
},
legend: {
itemStyle: {
color: '#E0E0E3'
},
itemHoverStyle: {
color: '#FFF'
},
itemHiddenStyle: {
color: '#606063'
}
},
credits: {
style: {
color: '#666'
}
},
labels: {
style: {
color: '#707073'
}
},
drilldown: {
activeAxisLabelStyle: {
color: '#F0F0F3'
},
activeDataLabelStyle: {
color: '#F0F0F3'
}
},
navigation: {
buttonOptions: {
symbolStroke: '#DDDDDD',
theme: {
fill: '#505053'
}
}
},
// scroll charts
rangeSelector: {
buttonTheme: {
fill: '#505053',
stroke: '#000000',
style: {
color: '#CCC'
},
states: {
hover: {
fill: '#707073',
stroke: '#000000',
style: {
color: 'white'
}
},
select: {
fill: '#000003',
stroke: '#000000',
style: {
color: 'white'
}
}
}
},
inputBoxBorderColor: '#505053',
inputStyle: {
backgroundColor: '#333',
color: 'silver'
},
labelStyle: {
color: 'silver'
}
},
navigator: {
handles: {
backgroundColor: '#666',
borderColor: '#AAA'
},
outlineColor: '#CCC',
maskFill: 'rgba(255,255,255,0.1)',
series: {
color: '#7798BF',
lineColor: '#A6C7ED'
},
xAxis: {
gridLineColor: '#505053'
}
},
scrollbar: {
barBackgroundColor: '#808083',
barBorderColor: '#808083',
buttonArrowColor: '#CCC',
buttonBackgroundColor: '#606063',
buttonBorderColor: '#606063',
rifleColor: '#FFF',
trackBackgroundColor: '#404043',
trackBorderColor: '#404043'
},
// special colors for some of the
legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
background2: '#505053',
dataLabelsColor: '#B0B0B3',
textColor: '#C0C0C0',
contrastTextColor: '#F0F0F3',
maskColor: 'rgba(255,255,255,0.3)'
};
// Apply the theme
Highcharts.setOptions(Highcharts.theme);
</script>
<!-- initialize chart -->
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'bar',
},
title: {
text: 'Female Life Expectation at Birth 2000'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Years'
}
},
series: []
};
<!-- Load data from CSV -->
$.get('who-life-expectancy-by-country-2000.csv', function(data) {
// Split the lines
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
// header line containes categories
if (lineNo == 0) {
$.each(items, function(itemNo, item) {
if (itemNo > 0) options.xAxis.categories.push(item);
});
}
// the rest of the lines contain data with their name in the first position
else {
var series = {
data: []
};
$.each(items, function(itemNo, item) {
if (itemNo == 0) {
series.name = item;
} else {
series.data.push(parseFloat(item));
}
});
options.series.push(series);
}
});
var chart = new Highcharts.Chart(options);
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 310px; max-width: 800px; height: 3500px; margin:0 auto;"></div>
</body>
</html>
Raw
who-life-expectancy-by-country-2000.csv
Country Afghanistan Albania Algeria Angola Antigua and Barbuda Argentina Armenia Australia Austria Azerbaijan Bahamas Bahrain Bangladesh Barbados Belarus Belgium Belize Benin Bhutan Bolivia (Plurinational State of) Bosnia and Herzegovina Botswana Brazil Brunei Darussalam Bulgaria Burkina Faso Burundi C�te d'Ivoire Cabo Verde Cambodia Cameroon Canada Central African Republic Chad Chile China Colombia Comoros Congo Costa Rica Croatia Cuba Cyprus Czech Republic Democratic People's Republic of Korea Democratic Republic of the Congo Denmark Djibouti Dominican Republic Ecuador Egypt El Salvador Equatorial Guinea Eritrea Estonia Ethiopia Fiji Finland France Gabon Gambia Georgia Germany Ghana Greece Grenada Guatemala Guinea Guinea-Bissau Guyana Haiti Honduras Hungary Iceland India Indonesia Iran (Islamic Republic of) Iraq Ireland Israel Italy Jamaica Japan Jordan Kazakhstan Kenya Kiribati Kuwait Kyrgyzstan Lao People's Democratic Republic Latvia Lebanon Lesotho Liberia Libya Lithuania Luxembourg Madagascar Malawi Malaysia Maldives Mali Malta Mauritania Mauritius Mexico Micronesia (Federated States of) Mongolia Montenegro Morocco Mozambique Myanmar Namibia Nepal Netherlands New Zealand Nicaragua Niger Nigeria Norway Oman Pakistan Panama Papua New Guinea Paraguay Peru Philippines Poland Portugal Qatar Republic of Korea Republic of Moldova Romania Russian Federation Rwanda Saint Lucia Saint Vincent and the Grenadines Samoa Sao Tome and Principe Saudi Arabia Senegal Serbia Seychelles Sierra Leone Singapore Slovakia Slovenia Solomon Islands Somalia South Africa South Sudan Spain Sri Lanka Sudan Suriname Swaziland Sweden Switzerland Syrian Arab Republic Tajikistan Thailand The former Yugoslav republic of Macedonia Timor-Leste Togo Tonga Trinidad and Tobago Tunisia Turkey Turkmenistan Uganda Ukraine United Arab Emirates United Kingdom of Great Britain and Northern Ireland United Republic of Tanzania United States of America Uruguay Uzbekistan Vanuatu Venezuela (Bolivarian Republic of) Viet Nam Yemen Zambia Zimbabwe
Female_life_expectancy_at_birth 56.1 76.4 73.2 46.8 75.8 77.8 75.1 82.2 81 69.8 75.7 75.5 65.6 75.5 73.5 80.8 71.3 56.6 60.3 64.6 77.2 47.7 74.3 76 74.7 51.3 53 49 71.4 59.9 52.6 81.7 47.1 49.1 80.4 73.5 75.3 61.1 54 80 78.2 78.9 80.2 78.1 69.3 52.7 79.2 59.2 74.7 76 71.4 73.6 54.3 52.7 76.1 53.1 70.3 80.9 82.7 60.7 57.1 75.5 80.9 58.6 81.1 72.8 71 53.2 53 68.4 60.8 73.3 76 81.7 63.4 68 71.2 72.3 79 80.8 82.4 75.5 84.5 73.3 69.9 53 66.4 74.4 70.7 59.7 75.7 74.3 50.3 52.6 72.7 77.2 80.9 59.1 43.6 74.9 70.4 50 79.5 61.6 74.3 77.2 68.1 65.7 75.6 70.2 50.5 64.1 58.5 63.5 80.6 81.2 73.3 50 48.1 81.3 74.9 63.6 78.4 61.3 73 73.9 69.9 77.9 80.1 77.8 79.5 71 74.3 72 53.8 73.5 73.1 73.7 64.4 74.4 59 75.6 76.4 39.5 80.9 77.1 79.7 67.2 51.8 60.1 50.2 82.5 75.1 60.4 70.8 49.8 81.9 82.5 74.9 67.6 74.6 74.9 60.1 55.9 73.7 72.8 75.6 73.8 67.9 48 73.2 75.7 80.1 50 79.5 78.9 70.4 70.7 77.1 78.2 62.2 45.6 46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment