Highcharts Demo

author(s): Torstein Hønsi

by malonso

HTML

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

<div id="container1" style="height: 400px"></div>
<div id="container2" style="height: 400px; display: none;"></div>
<button id="buttonRun1">Show and run 1</button>
<button id="buttonRun2">Show and run 2</button>

JavaScript

$(function () {
    var maxTempSeriesObj={
        data:[84.2,82.8,67.3,67.3,75.7,75.1,75.1],
        name:"Max Temp",
};
    var minTempSeriesObj={
        data:[53.6,59.6,57.4,54.5,52.8,52.3,52.3],
        name:"Min Temp",
};
    var newData=[2028,4623,3533,2736,2913,2203,1899,2228,1666,2288,1982,2909,1809,2558,2093,2904,2963,2104,2727,2574,1405,3288];
    var series1={data:newData};
    var chart1;
    var chart2;
    var options1={
        chart: {
            alignTicks: true,
            defaultSeriesType: 'column',
            renderTo: 'container1'
        },
        legend: {
            enabled: false
        },
        series: [{ data:series1.data }]
    };
    var options2={
        chart: {
            alignTicks: true,
            renderTo: 'container2'
        },
        series: []
    };
    $('#buttonRun1').click(function() {
        
        if(typeof chart1 == 'undefined'){
            toggleVis('container1','container2');
            chart1 = new Highcharts.Chart(options1);
        }else{
            var chartSeriesCount=chart1.series.length;
            for(var i=0;i<chartSeriesCount;i++){
                chart.series[0].remove(false); 
            }
            chart1.addSeries(series1,false);
            toggleVis('container1','container2');
            chart1.redraw();
        }
    });
        
    $('#buttonRun2').click(function() {
        if(typeof chart2 == 'undefined'){
            options2.series.push(maxTempSeriesObj);
            options2.series.push(minTempSeriesObj);
            chart2 = new Highcharts.Chart(options2);
            toggleVis('container2','container1');
        }else{
            var chartSeriesCount=chart2.series.length;
            for(var i=0;i<chartSeriesCount;i++){
                chart2.series[0].remove(false); 
            }
            var useWorks=false;
            if(useWorks){
                /* Begin this works */
                chart2.addSeries(maxTempSeriesObj,false);
               ...