Accessing Charts from Container Id | Highchart @ A Humble Opinion

ahumbleopinion.com/highcharts-tips-accessing-chart-object-from-container-id/ Jugal Thakkar http://jugal.me/

by Jugal Thakkar

HTML

<script src="https://code.highcharts.com/2.0/highcharts.js"></script>
<div id="header">
Show Title of <select id="selection">
    <option value="container1">Container 1</option>
    <option value="container2">Container 2</option>
</select>
Using Highcharts 2.0
</div>
<div id="container1"></div>
<div id="container2"></div>

CSS

#container1,#container2 {
    height:200px;    
}
#header{
    text-align:center;
}

JavaScript

window.charts = {};
function getChartById(id) {
    return window.charts[id];
}

$(function () {
    createChart('container1', 'Title of Chart #1');
    createChart('container2', 'Title of Chart #2');    
    $('#selection').change(function () {
        alert(getChartById($(this).val()).options.title.text);
    });
});

function createChart(containerId, title) {
    var chartingOptions = {
        chart: {
            renderTo: containerId
        },
        title: {
            text: title
        },
        subtitle: {
            text: '<a href="http://ahumbleopinion.com/category/highcharts/">Highcharts @ A Humble Opinion</a>',
            useHTML: true
        },
        credits: {
            text: "Jugal Thakkar",
            href: "http://jugal.me/"
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr']
        },
        series: [{
            name: 'Mumbai',
            data: [24.2, 24.6, 26.7, 28.6]
        }]
    };
    new Highcharts.Chart(chartingOptions, function (chart) {
        window.charts[chart.options.chart.renderTo] = chart;
    });
}