Highcharts - Link Two BAR Charts in ONE
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="GraphContainer"></div>
JavaScript
$(document).ready(function(e) {
var perShapeGradient = {
x1: 0,
y1: 0,
x2: 0,
y2: 1
};
chart = new Highcharts.Chart({
chart: {
renderTo: 'GraphContainer',
height: 275,
marginLeft: 120,
marginTop: 30
},
colors:
[
{
linearGradient: perShapeGradient,
stops:
[
[0, 'rgba(186, 186, 186, 1)'],
[1, 'rgba(232, 232, 232, 0.8)']
]
}
],
title: {
text: null
},
plotOptions: {
line: {
lineWidth: 1,
marker: {
radius: 6,
fillColor: '#fff',
lineColor: '#e10019',
lineWidth: 1.5,
states:
{
hover:
{
radius: 8,
fillColor: '#e10019',
lineColor: '#fff',
lineWidth: 2
}
}
}
}
},
xAxis: {
categories: ['13 May', '20 May'],
title: 'Week Commencing'
},
yAxis: [{
labels: {
endOnTick: true,
formatter: function() {
return this.value + '%';
},
style: {
color: '#e10019',
fontSize: 10
}
},
title: {
text: '% rated as 4 or 5',
rotation: 270,
offset: 75,
style: {
color: '#f49fa8',
fontSize: 11,
fontWeight: 'normal'
}
},
max: 100,
opposite: true
}, {
gridLineWidth: 0,
title: {
text: 'Number of responses',
style: {
color: '#888',
fontSize: 11,
fontWeight: 'normal'
}
},
labels: {
formatter: function()
{
x = this.value.toString();
var pattern = /(-?\d+)(\d{3})/;
while (pattern.test(x))
x = x.replace(pattern, "$1,$2");
return x;
},
style: {
color: '#888',
fontSize: 10
}
}
}],
tooltip: {
formatter: function() {
var unit = {
'Applicable': '',
'Sentiment': '%'
}[this.series.name];
return 'Week Commencing ' +...