Highcharts Demo

author(s): Torstein Hønsi

by Fusher

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 200px"></div>
<div id="container2" style="height: 200px"></div>
<button id="button">Remove old and add new series</button>

JavaScript

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            inverted: 'true',
            type: 'column'
        },
        
        xAxis: {
            categories: ['a','b','c']
        },
        plotOptions: {
            column: {
                cursor: 'pointer',
                events: {
                    click: function(){
                        alert('clicked');
                    }
                }
            }            
        },
        series: [{
            data: [29.9, 71.5, 106.4]        
        }]
    }); 
    var chart2 = new Highcharts.Chart({
        chart: {
            renderTo: 'container2',
            inverted: 'true',
            type: 'column'
        },
        
        xAxis: {
            categories: ['a','b','c']
        },
        plotOptions: {
            series: {
                cursor: 'pointer',
                events: {
                    click: function(){
                        alert('clicked');
                    }
                }
            }            
        },
        series: [{
            data: [29.9, 71.5, 106.4]        
        }]
    });
    
    
    // the button action
    $('#button').click(function() {
        chart.series[0].remove(false);
        chart.addSeries({data:[1,2,3]});
        chart2.series[0].remove(false);
        chart2.addSeries({data:[1,2,3]});
    });
});