Plotting with the Highcharts.js API
[code language=”html”]
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 1200px; margin: 0 auto"></div>
$(function () {
$(‘#container’).highcharts({
chart: {
type: ‘bar’
},
title: {
text: ”
},
subtitle: {
text: ‘Source: Reuters Institute Digital News Report 2014’
},
xAxis: {
categories: [‘USA’, ‘UK’, ‘Germany’, ‘France’, ‘Denmark’, ‘Finland’, ‘Spain’, ‘Italy’, ‘Brazil’, ‘Japan’],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: ‘Percent of surveyed sample’,
align: ‘high’
},
labels: {
overflow: ‘justify’
}
},
tooltip: {
valueSuffix: ‘%’
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: ‘vertical’,
align: ‘right’,
verticalAlign: ‘top’,
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor || ‘#FFFFFF’),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: ‘Lists/Stories’,
data: [72, 68, 69, 71, 58, 80, 73, 84, 81, 85]
}, {
name: ‘Video/Audio’,
data: [34, 18, 21, 18, 22, 23, 33, 31, 32, 11]
}, {
name: ‘Live pages’,
data: [9, 8, 6, 8, 7, 7, 12, 15, 18, 12]
}, {
name: ‘Pictures/Graphics’,
data: [24, 15, 25, 19, 8, 23, 23, 20, 32, 25]
}]
});
});
[/code]
Full output here. Preview:
