Highcharts with external CSV parser
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="https://rawgit.com/mholt/PapaParse/master/papaparse.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>
<div style="max-width: 800px; margin: 0 auto">
<pre id="data">Awards,2014,2015
K01,49,49
K05,15,14
K07,59,66
K08,100,95
K12,15,17
K18,0,0
K22,27,41
K23,31,27
K24,17,17
K25,15,11
K99,71,64
</pre>
</div>
CSS
#data {
display: none;
}
JavaScript
$(function () {
Highcharts.theme = {
colors: ['#CDAED1', '#82368C', '#94B8D2', '#2a71a5', '#ED561B', '#DDDF00', '#24CBE5', '#64E572',
'#FF9655'],
chart: {
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(240, 240, 255)']
]
},
},
title: {
style: {
color: '#000',
font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
}
},
subtitle: {
style: {
color: '#666666',
font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
}
},
legend: {
itemStyle: {
font: '9pt Trebuchet MS, Verdana, sans-serif',
color: 'black'
},
itemHoverStyle:{
color: 'gray'
}
}
};
// Apply the theme
Highcharts.setOptions(Highcharts.theme);
/**
* Use external CSV parser
* http://papaparse.com/
*/
var csv = Papa.parse(document.getElementById('data').innerHTML);
$('#container').highcharts({
data: {
rows: csv.data,
seriesMapping: [{
// x: 0, // X values are pulled from column 0 by default
// y: 1, // Y values are pulled from column 1 by default
//label: 1 // Labels are pulled from column 2 and picked up in the dataLabels.format below
}]
},
chart: {
type: 'column'
},
title: {
text: 'Chart of Values'
},
subtitle: {
text: 'Subtitle text'
},
xAxis: {
title: {
text: "X Values"
}
},
yAxis: {
title: {
text: 'Number of Things'
},
labels: {
format: '{value}'
}
},
legend: {
enabled: true
},
plotOptions: {
...