Highcharts - multiple charts

Question

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?

Answer 1

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]
                }]
                });