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/3.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 3.0
</div>
<div id="container1"></div>
<div id="container2"></div>

CSS

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

JavaScript

function getChartById(id){
    return $('#'+id).highcharts();
}

$(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 = {
        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]
        }]
    };
    $('#' + containerId).highcharts(chartingOptions);
}