CODEWITHSUNDEEP
javascripthighcharts
Roshan
Roshan

Reputation: 19

Creating piecharts using Highcharts.js

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,

Upvotes: 0

Views: 690

Answers (3)

Carl
Carl

Reputation: 7564

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.

Upvotes: 0

AndrewR
AndrewR

Reputation: 6758

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.

Upvotes: 1

Explosion Pills
Explosion Pills

Reputation: 191789

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.

Upvotes: 0

Related Questions