chart swap

by jlbriggs

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="height:400px"></div>

<ul>
    <li id='data1'>Data 1</li>
    <li id='data2'>Data 2</li>
    <li id='data3'>Data 3</li>
    <li id='data4'>Data 4</li>
    <li id='data5'>Data 5</li>
</ul>

CSS

body {
    font-family:Helvetica, Calibri, sans-serif;
}
ul {
    margin:.5em;
}

li {
    cursor:pointer;
}

JavaScript

var chart;
var dataID;

var dataObj = {};

dataObj.data1 = [5,8,9,6,7,4,5,6,3,2];
dataObj.data2 = [2,5,9,6,3,5,4,1,7,5]; 
dataObj.data3 = [4,5,8,9,6,3,5,7,4,2];
dataObj.data4 = [3,6,9,8,5,2,1,4,7,8];
dataObj.data5 = [1,2,4,5,7,8,9,3,6,4];

//set the chart options
Highcharts.setOptions ({
    global: { 
        useUTC: false 
    }, 
    title:{text:''},
    legend:{enabled:false},
    tooltip:{},
    plotOptions:{
        series:{
            lineWidth:2,
            shadow:false,
            marker:{
                enabled:false,
                symbol:'circle',
                radius:.5,
                states:{
                    hover:{
                        radius:3,
                        lineWidth:1,
                        lineColor:'#fff'
                    }
                }                    
            }
        }
    },
    xAxis:{
        allowDecimals:false,
        title:{
            text:'Time'
        }
    },
    yAxis:{
        min:0,
        endOnTick:false,
        title:{text:''},
        gridLineColor:'#eee'
   },
});

//call a default chart
chart = new Highcharts.Chart({
    chart: {
        renderTo:'container'
    },
    series:[{
        data:dataObj['data1']
    }]            

});

//call chart on click
$('li').click(function(){
    dataID = this.id;
    chart.destroy();
    chart = new Highcharts.Chart({
        chart: {
            renderTo:'container',
        },
        series:[{
            data:dataObj[dataID]
    
        }]            
    
    });
});