New to highcharts, but a simple question:
I need to mix several (say 6 or 8) small Highcharts gauges and charts on a single browser window. Is the only reliable way of doing this to create a separate div for each one and to target a separate Highcharts instance at each div?
And as a supplementary: Even if there is an alternative approach, is this multi-div approach as good as any, or are there pros and cons?
Here is how I do multiple Highcharts on the same page.
http://jsfiddle.net/no1uknow/Jb2cb/2/
Keep in mind that you'll want to use jQuery 1.9.1 and Highcharts JS 3.0.x+, if you want to support most all browsers including IE8. This jsfiddle demo will work cross browser.
There are many examples using "var chart" singular for every chart, but I like making a var container_chartname for each div container. This technique gives me a lot more control to be interactive with each chart on the fly. Like resize, update data, etc.
If you plan on using forms to build charts dynamically then you can also use "just" the javascript code in the above jsfiddle example as the json callback. This will load all the divs each time you hit submit on a form dynamically.
Stackoverflow requires me to post code here, but see jsfiddle for the full piece of code...
And of course this is just my technique, there are many others...
var container_chartCorrectiveAction = new Highcharts.Chart({
chart: {
renderTo: 'container_chartCorrectiveAction',
type: 'bar',
height: 195
},
title: {
text: 'Corrective Action'
},
subtitle: {
text: 'Sub-ATA () / ATA (20)'
},
xAxis: {
categories: ['No Defects Found-Fastener-Loose / Displaced'],
title: {
text: 'Action'
},
labels: {
style: {
width: '12000px'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Count',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
formatter: function() {
return ''+ this.series.name +': '+ this.y +' Count';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
},
series: {
pointWidth:10,
groupPadding: .05,
shadow: true
}
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
floating: false,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true,
labelFormatter: function() {
return '<div class="' + this.name + '-arrow"></div><span style="font-family: \'Advent Pro\', sans-serif; font-size:12px">' + this.name +'</span><br/><span style="font-size:10px; color:#ababaa"> Total: ' + this.options.total + '</span>';
}
},
credits: {
enabled: false
},
exporting: {
enabled: true
},
series: [{
name: 'Heavy',
total: '0',
data: [null]
},{
name: 'Intermediate',
total: '0',
data: [null]
},{
name: 'Line',
total: '0',
data: [null]
},{
name: 'Lite',
total: '1',
data: [1]
}]
});
var container_chartAtaFleetAvg = new Highcharts.Chart({
chart: {
renderTo: 'container_chartAtaFleetAvg',
type: 'bar',
height: 185
},
title: {
text: 'Fleet Average'
},
subtitle: {
text: 'ATA (20)'
},
xAxis: {
categories: ['Fleet Average'],
title: {
text: ''
},
labels: {
style: {
width: '12000px'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Average',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
formatter: function() {
return ''+ this.series.name +': '+ this.y +' Average';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
},
series: {
pointWidth:10,
groupPadding: .05,
shadow: true
}
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
floating: false,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true,
labelFormatter: function() {
return '<div class="' + this.name + '-arrow"></div><span style="font-family: \'Advent Pro\', sans-serif; font-size:12px">' + this.name +'</span><br/><span style="font-size:10px; color:#ababaa"> Total: ' + this.options.total + '</span>';
}
},
credits: {
enabled: false
},
exporting: {
enabled: true
},
series: [{
name: 'Intermediate',
total: '0.35',
data: [0.35]
},{
name: 'Lite',
total: '0.3',
data: [0.30]
},{
name: 'Heavy',
total: '0.1',
data: [0.10]
}]
});
You can also use many series in one div. http://jsfiddle.net/sbochan/wzprF/
It seems that the only way to do this is to have a container by chart.
In my own opinion, I don't think a multi-div approach is a bad idea. Just be careful about the id you will give to the div.
But you can create a clean code, on the javascript side. When you create many charts (6 or 8 is a lot...), you have to avoid code duplication... (At least to limit duplication)
There is a good way to do this with jQuery.extend() and Highcharts.setOptions : Manage multiple highchart charts in a single webpage
Make sure your div containers are formatted as this
<div ... ></div>
and not
<div ... />
as it may not render properly.
