Creating piecharts using Highcharts.js

Question

Am using highcharts.js for creating piecharts ,I have to create more than 5 piecharts by using highcharts.js but am stuck with one problem,

For every piechart am using one javascript in my page is there any possibility that by writing only one javascript i can give all piechart div ids like am using:

chart: {
            renderTo: 'container1',
            //borderRadius: 10,
            plotBackgroundColor: null,
            plotBorderWidth: 2,
            borderWidth: 0,
            plotShadow: false,

can i use like this:

chart: {
            renderTo: 'container1','container2','container3','container4'....
            //borderRadius: 10,
            plotBackgroundColor: null,
            plotBorderWidth: 2,
            borderWidth: 0,
            plotShadow: false,

Are you asking if you can apply the same options to each of several charts, with different data sources? As in, because rewriting those options over and over is tiresome, error prone, etc.? — Carl, Sep 05 '12 at 18:51
Possible duplicate: http://stackoverflow.com/questions/8253590/manage-multiple-highchart-charts-in-a-single-webpage/9607502#9607502 — Ricardo Alvaro Lohmann, Sep 06 '12 at 11:16

AndrewR · Answer 1 · 2012-09-05T18:57:06.677

No. I looked in the documentation, and it looks like HighCharts.js only supports renderTo to a single HTML element. http://api.highcharts.com/highcharts#chart.renderTo

I would assume that you have 5 pie charts that have different datasets, so it wouldn't make sense to load the same chart into multiple DIV elements anyway.

You could write a loop that loaded the different charts.

For example:

function loadCharts(chartData){
    for(i=0; i<chartData.length; i++){
        var container = chartData[i]['container'];
        var myData = chartData[i]['myData'];

        var chart = new Highcharts.Chart({
            chart: {
                renderTo: container,
                height: 400,
                plotBackgroundColor: null,
                plotBorderWidth: 2,
                borderWidth: 0,
                plotShadow: false
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },

            series: [{
                data: myData        
            }]
        });
    }
}

var highchartsdata = [{
    container: 'container1',
    myData: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    },
    {
    container: 'container2',
    myData: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    },
    {
    container: 'container3',
    myData: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    },
    {
    container: 'container4',
    myData: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    },
    {
    container: 'container5',
    myData: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }];

loadCharts(highchartsdata);

This is an example I didn't test, but should help you get on the right path if that's how you want to go.

am using piecharts how can i give series data as my tooltip for all containers in on script? — Roshan, Sep 05 '12 at 21:14

score 0 · Answer 2 · answered Sep 05 '12 at 18:48

What you have above is not valid JavaScript syntax.

Looking at the Highcharts API documentation, there doesn't seem to be any way to specify multiple elements to render like this simultaneously .. it has to be one element at a time. Your best bet is to do the rendering in a loop.

Carl · Answer 3 · 2012-09-05T19:35:54.020

It is unclear from the documentation, but it looks like Highcharts.setOptions will let you set default options for all subsequent charts, which can then be overridden* when calling new Highcharts.Chart({ ...options...}) to create the charts.

If you're using this library with jQuery, looks like you could use the following syntax

$('#container1, #container2, #containerN').each(function(){
  new Highcharts.Chart({ chart:{ renderTo:this } });
})

EDIT: ...which would be seem to fine with the same series data in all charts, since series is an option that can be provided the chart. However, it doesn't seem to respect providing series as an default option. So if your series data is on the elements as, well, data, then

$('#container1, #container2, #containerN').each(function(){
  var $c = $(this);
  new Highcharts.Chart({ chart:{ renderTo:this }, series:$c.data() });
})

...presuming the data is attached in a suitable way. Alternatively, generating/locating/loading that series object based on $c.data() contents within the .each seems pretty sensible. Of course, if you really are using the same series of data for several charts, then you can simply:

var s = ... // series value
$('#container1, #container2, #containerN').each(function(){
  new Highcharts.Chart({ chart:{ renderTo:this }, series:s });
});

I did some quick code mangling based of a demo their docs provided, which can be found here.

I'm not familiar with the Mootools or Prototype syntax to do the above, so I just used the jQuery. However, one of the three has to be around to Highcharts, and my recollection is that those other frameworks support sweeter-than-just-indexed-loop iteration syntax. Just-Googling-It, looks like both Mootools and Prototype would use `$$` instead of `$` to create the element array, though that's just based on a quick read of docs. — Carl, Sep 05 '12 at 19:44

Creating piecharts using Highcharts.js

3 Answers3