score:7

Accepted answer

If you want to have multiple charts with different data, but the same setup, try something like this:

var charts = [];
var cities = []; //replace with your array of cities, assuming that they aren't part of the changing data

$(document).ready(function() {
    var getChartConfig = function(renderId, title, data) {
        var config = {};
        config.chart = {
             renderTo: renderId,
             defaultSeriesType: 'column',
             margin: [50, 50, 100, 80]
        };
        config.title = title;
        config.xAxis = {
            categories: cities,
            labels: {
                rotation: -45,
                align: 'right',
                style: {
                    font: 'normal 13px Verdana, sans-serif'
                }
            }
        };
        config.yAxis = {
            min: 0,
            title: {
                text: 'Population (millions)'
            }
        };
        config.legend = { enabled: false };
        config.tooltip = tooltip: {
            formatter: function() {
                return '<b>'+ this.x +'</b><br/>' +
                    'Population in 2008: '+ Highcharts.numberFormat(this.y, 1) +
                    ' millions';
            }
        };
        config.series = data;

        return config;
    };

    //now, creating a new chart is easy!
    charts.push(new Highcharts.Chart(
        getChartConfig("container", "title", data)
    ))
});

Related Query

More Query from same tag