score:0

if you need 3 charts you can copy-paste the initialization and just change the data and container name.

or you can make a function, that populate a chart by given data and container name. something like this:

function populatechart(renderto,data,title) {
 var chart = new highcharts.chart({
    chart: {
        renderto: renderto,
        type: 'column'
    },

    title: {
        text: title
    },

    xaxis: {
        categories: ['apples', 'oranges', 'pears', 'grapes', 'bananas']
    },

    yaxis: {
        allowdecimals: false,
        min: 0,
        title: {
            text: 'number of fruits'
        }
    },

    tooltip: {
        formatter: function () {
            return '<b>' + this.x + '</b><br/>' +
                this.series.name + ': ' + this.y + '<br/>' +
                'total: ' + this.point.stacktotal;
        }
    },
    series: [{
        name: 'john',
        data: data,
        stack: 'male'
    }]
});
}

and then just call it when needed:

 $(function(){
    populatechart('container1',[5, 3, 4, 7, 2],'title 1');
    populatechart('container2',[3, 4, 4, 2, 5],'title 2');
    populatechart('container3',[2, 5, 6, 2, 1],'title 3');
});

you can check my example

score:1

by setting a second container and add 3 new arrays: data2, browserdata2 and versionsdata2, don't forget to add the last two arrays (browserdata2 and versionsdata2) to the series option in the second container:

 series: [{
            name: 'browsers',
            data: browserdata2,
            size: '60%',
            datalabels: {
                formatter: function () {
                    return this.y > 5 ? this.point.name : null;
                },
                color: '#ffffff',
                distance: -30
            }
        }, {
            name: 'versions',
            data: versionsdata2,
            size: '80%',
            innersize: '60%',
            datalabels: {
                formatter: function () {
                    // display only if larger than 1
                    return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;
                }
            }
        }]

please check the following example (jsfiddle):

$(function () {

    var colors = highcharts.getoptions().colors,
        categories = ['msie', 'firefox', 'chrome', 'safari', 'opera'],
        data = [{
            y: 56.33,
            color: colors[0],
            drilldown: {
                name: 'msie versions',
                categories: ['msie 6.0', 'msie 7.0', 'msie 8.0', 'msie 9.0', 'msie 10.0', 'msie 11.0'],
                data: [1.06, 0.5, 17.2, 8.11, 5.33, 24.13],
                color: colors[0]
            }
        }, {
            y: 10.38,
            color: colors[1],
            drilldown: {
                name: 'firefox versions',
                categories: ['firefox v31', 'firefox v32', 'firefox v33', 'firefox v35', 'firefox v36', 'firefox v37', 'firefox v38'],
                data: [0.33, 0.15, 0.22, 1.27, 2.76, 2.32, 2.31, 1.02],
                color: colors[1]
            }
        }, {
            y: 24.03,
            color: colors[2],
            drilldown: {
                name: 'chrome versions',
                categories: ['chrome v30.0', 'chrome v31.0', 'chrome v32.0', 'chrome v33.0', 'chrome v34.0',
                    'chrome v35.0', 'chrome v36.0', 'chrome v37.0', 'chrome v38.0', 'chrome v39.0', 'chrome v40.0', 'chrome v41.0', 'chrome v42.0', 'chrome v43.0'
                    ],
                data: [0.14, 1.24, 0.55, 0.19, 0.14, 0.85, 2.53, 0.38, 0.6, 2.96, 5, 4.32, 3.68, 1.45],
                color: colors[2]
            }
        }, {
            y: 4.77,
            color: colors[3],
            drilldown: {
                name: 'safari versions',
                categories: ['safari v5.0', 'safari v5.1', 'safari v6.1', 'safari v6.2', 'safari v7.0', 'safari v7.1', 'safari v8.0'],
                data: [0.3, 0.42, 0.29, 0.17, 0.26, 0.77, 2.56],
                color: colors[3]
            }
        }, {
            y: 0.91,
            color: colors[4],
            drilldown: {
                name: 'opera versions',
                categories: ['opera v12.x', 'opera v27', 'opera v28', 'opera v29'],
                data: [0.34, 0.17, 0.24, 0.16],
                color: colors[4]
            }
        }, {
            y: 0.2,
            color: colors[5],
            drilldown: {
                name: 'proprietary or undetectable',
                categories: [],
                data: [],
                color: colors[5]
            }
        }],

                categories2 = ['a', 'b', 'c', 'd', 'e'],
        data2 = [{
            y: 56.33,
            color: colors[0],
            drilldown: {
                name: 'msie versions',
                categories: ['msie 6.0', 'msie 7.0', 'msie 8.0', 'msie 9.0', 'msie 10.0', 'msie 11.0'],
                data: [1.06, 0.5, 17.2, 8.11, 5.33, 24.13],
                color: colors[0]
            }
        }, {
            y: 10.38,
            color: colors[1],
            drilldown: {
                name: 'firefox versions',
                categories: ['f7', 'f6', 'f5', 'f4', 'f3', 'f2', 'f1'],
                data: [0.33, 0.15, 0.22, 1.27, 2.76, 2.32, 2.31, 1.02],
                color: colors[1]
            }
        }, {
            y: 24.03,
            color: colors[2],
            drilldown: {
                name: 'chrome versions',
                categories: ['cn', 'cm', 'cj', 'ct', 'cb',
                    'cc', 'cf', 'cy', 'ct', 'cr', 'cr', 'ce', 'cw', 'cq'
                    ],
                data: [0.14, 1.24, 0.55, 0.19, 0.14, 0.85, 2.53, 0.38, 0.6, 2.96, 5, 4.32, 3.68, 1.45],
                color: colors[2]
            }
        }, {
            y: 4.77,
            color: colors[3],
            drilldown: {
                name: 'safari versions',
                categories: ['s7', 's6', 's5', 's4', 's3', 's2', 's1'],
                data: [0.3, 0.42, 0.29, 0.17, 0.26, 0.77, 2.56],
                color: colors[3]
            }
        }, {
            y: 0.91,
            color: colors[4],
            drilldown: {
                name: 'opera versions',
                categories: ['o1', 'o2', 'o3', 'o4'],
                data: [0.34, 0.17, 0.24, 0.16],
                color: colors[4]
            }
        }, {
            y: 0.2,
            color: colors[5],
            drilldown: {
                name: 'proprietary or undetectable',
                categories: [],
                data: [],
                color: colors[5]
            }
        }],
        browserdata = [],
        versionsdata = [],
        browserdata2 = [],
        versionsdata2 = [],
        i,
        j,
        datalen = data.length,
        datalen2 = data2.length,
        drilldatalen,
        brightness;


    // build the data arrays
    for (i = 0; i < datalen; i += 1) {

        // add browser data
        browserdata.push({
            name: categories[i],
            y: data[i].y,
            color: data[i].color
        });

        // add version data
        drilldatalen = data[i].drilldown.data.length;
        for (j = 0; j < drilldatalen; j += 1) {
            brightness = 0.2 - (j / drilldatalen) / 5;
            versionsdata.push({
                name: data[i].drilldown.categories[j],
                y: data[i].drilldown.data[j],
                color: highcharts.color(data[i].color).brighten(brightness).get()
            });
        }
    }
        // build the data arrays
    for (i = 0; i < datalen2; i += 1) {

        // add browser data
        browserdata2.push({
            name: categories2[i],
            y: data2[i].y,
            color: data2[i].color
        });

        // add version data
        drilldatalen = data2[i].drilldown.data.length;
        for (j = 0; j < drilldatalen; j += 1) {
            brightness = 0.2 - (j / drilldatalen) / 5;
            versionsdata2.push({
                name: data2[i].drilldown.categories[j],
                y: data2[i].drilldown.data[j],
                color: highcharts.color(data2[i].color).brighten(brightness).get()
            });
        }
    }

    // create the chart
    $('#container2').highcharts({
        chart: {
            type: 'pie'
        },
        title: {
            text: 'browser market share, january, 2015 to may, 2015'
        },
        subtitle: {
            text: 'source: <a href="http://netmarketshare.com/">netmarketshare.com</a>'
        },
        yaxis: {
            title: {
                text: 'total percent market share'
            }
        },
        plotoptions: {
            pie: {
                shadow: false,
                center: ['50%', '50%']
            }
        },
        tooltip: {
            valuesuffix: '%'
        },
        series: [{
            name: 'browsers',
            data: browserdata,
            size: '60%',
            datalabels: {
                formatter: function () {
                    return this.y > 5 ? this.point.name : null;
                },
                color: '#ffffff',
                distance: -30
            }
        }, {
            name: 'versions',
            data: versionsdata,
            size: '80%',
            innersize: '60%',
            datalabels: {
                formatter: function () {
                    // display only if larger than 1
                    return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;
                }
            }
        }]
    });
        $('#container').highcharts({
        chart: {
            type: 'pie'
        },
        title: {
            text: 'second chart'
        },
        subtitle: {
            text: 'source: <a href="http://netmarketshare.com/">netmarketshare.com</a>'
        },
        yaxis: {
            title: {
                text: 'total percent market share'
            }
        },
        plotoptions: {
            pie: {
                shadow: false,
                center: ['50%', '50%']
            }
        },
        tooltip: {
            valuesuffix: '%'
        },
        series: [{
            name: 'browsers',
            data: browserdata2,
            size: '60%',
            datalabels: {
                formatter: function () {
                    return this.y > 5 ? this.point.name : null;
                },
                color: '#ffffff',
                distance: -30
            }
        }, {
            name: 'versions',
            data: versionsdata2,
            size: '80%',
            innersize: '60%',
            datalabels: {
                formatter: function () {
                    // display only if larger than 1
                    return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;
                }
            }
        }]
    });
});

Related Query

More Query from same tag