Multiline - Highlight Series

Uses check boxes and custom functions to display checked legend items in color, and the others in grey.

by J. Albert Bowden

HTML

<script src="http://highcharts.com/js/testing.js"></script>
<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;width:700px;position:relative;"></div>
<div style="position:absolute;top:200px;left:565px;width:145px;">
    <ul>
        <li><button id="showAll" style="width:120px;">show all</button></li>
        <li><button id="hideAll"style="width:120px;">hide all</button></li>
        <li><button id="checkAll"style="width:120px;">check all</button></li>
        <li><button id="uncheckAll"style="width:120px;">un-check all</button></li>
        <li><button id="resetChart"style="width:120px;">reset chart</button></li>
    </ul>
</div>

JavaScript

var chart;

//---------------------------------------------------------------------------
//allow highlighting of individual series while muting the others
function showSeries(e) {
    this.graph.attr("stroke", (e.checked ? this.color : '#ccc'));
    if(e.checked ==  true){
        this.group.toFront();
        if(this.visible == false){
            this.show();
        }
    }
}
function highlightSer(chart){
    var series = chart.series, i;
    for(i=0; i<series.length; i++) {
        if( series[i].checkbox.checked ) {
             showSeries.call(series[i], {checked: true});
        }
    }
}
//---------------------------------------------------------------------------


//---------------------------------------------------------------------------
//custom colors
Highcharts.setOptions({
    colors: ['#f15a60','#d77fb4','#7ac36a','#faa75b','#9e67ab','#5a9bd4','#b8d2ec','#185aa9']
});
//---------------------------------------------------------------------------


//---------------------------------------------------------------------------
//the chart options
var optionsChart1 = {
    chart: {
        renderTo:'container',
        defaultSeriesType:'line',
        borderWidth:1,
        borderColor:'#ccc',
        marginLeft:100,
        marginRight:165,
        backgroundColor:'#eee',
        plotBackgroundColor:'#fff',
        showAxes:true
    },
    title:{
        text:'Utilization'
    },
    credits:{enabled:false},
    exporting:{enabled:false},
    legend:{
        layout:'vertical',
        align:'right',
        verticalAlign:'top',
        backgroundColor:'#fff',
        borderColor:'#ccc',
        borderWidth:.5,
        y:30,
        x:0,
        itemWidth:135,
        itemStyle:{
            fontWeight:'bold'
        },
        itemHiddenStyle:{
            fontWeight:'bold'
        }
    },
    tooltip:{
        formatter:function(){
            return '<b>Run:</b> ' + this.x +
                    '<br/><b>Set:</b> ' + this.series.name +  
      ...