on/off

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:250px;margin:1.5em 1em;"></div>

JavaScript

var data1 = [
    [0,0,1],
    [0,2,3],
    [0,4,5],
    [0,6,7],
    [0,8,9]
];
var data2 = [
    [0,1,2],
    [0,3,4],
    [0,5,6],
    [0,7,8],
    [0,9,10]
];

var options = {
    chart: {
        type:'columnrange',
        inverted:true,
        style: {
            fontFamily: 'Geneva, Tahoma, Verdana, sans-serif'
        }
    },
    title: {
        text: 'Chart Test Example',
        style: {
            fontSize:'1em',
            fontWeight:'bold'
        }    
    },
    legend: { },
    tooltip: {
        shared: true,
        crossHairs: true,
        useHTML: true
    },
    plotOptions: {
        columnrange: {
            grouping:false,
            groupPadding:0.05,
            pointPadding:0.1,
            pointRange:1
        },
        series: {
            shadow: false
        }
    },
    xAxis: {
        //categories: categories,
        lineColor:'#000',
        lineWidth:.5,
        tickWidth:.5,
        tickLength:3,
        tickColor:'#000',
        title: {  
            text: 'X Axis',
            style: {
                rotation:0,
                color:'#000',
                fontSize:'.8em'
            }
        }
    },
    yAxis: {
        min:0,
        lineColor:'#000',
        lineWidth:.5,
        tickWidth:.5,
        tickLength:3,
        tickColor:'#000',
        gridLineWidth:.5,
        gridLineColor:'#eee',
        title: {                
            text: 'Y Axis',
            rotation:0,
            style: {
                color:'#000',
                fontSize:'.8em'
            }
        }
    },
    series:[]
};
    
$('#container').highcharts(options);
var chart = $('#container').highcharts();

chart.addSeries({ name:'On', data:data1 });
chart.addSeries({ name:'Off', data:data2 });