muliple bullets per chart

by Orkun Ozen

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;width:300px;margin:1em;"></div> 
<p><a target="_top" href="http://jsfiddle.net/jlbriggs/QM6kF/">Simplified 'gauges' version</a></p>
<p><a target="_top" href="http://jsfiddle.net/jlbriggs/LdHYt/">individual bullet charts version</a></p>

<p>multiple bullet charts in chart, using stacked bars as qualitative bands.</p>
<p>Only works in one chart like this if each measure shares common quantitative scale.</p>
<p>For mutliple bullet charts with varied quantitative scales, use <a target="_top" href="http://jsfiddle.net/jlbriggs/LdHYt/">individual bullet charts</a> instead.</p>

CSS

body {
    font-family:helvetica, sans-serif;
    font-size:.7em;
}
p {
    margin:.5em 1em;
}

JavaScript

//-------------------------------------------------------
Highcharts.Renderer.prototype.symbols.line = function(x, y, width, height) {
    return ['M',x ,y + width / 2,'L',x+height,y + width / 2];
};
//-------------------------------------------------------
var chart = new Highcharts.Chart({
    chart:{
        renderTo:'container',
        type:'bar',
        borderWidth:1,
        borderColor:'#eee',
        margin:[0,0,20,100]
    },
    credits:{enabled:false},
    exporting:{enabled:false},
    title:{text:''},
    legend:{enabled:false},
    xAxis:{
        tickLength:100,
        tickColor:'#eee',
        gridLineWidth:1,
        gridLineColor:'#eee',
        labels: {
            style: {
                fontWeight:'bold'
            }
        },
        lineColor:'#eee',
        lineWidth:1,
        categories:['Measure 1','Measure 2','Measure 3','Measure 4','Measure 5']
    },
    yAxis:{
        tickInterval:2,
        allowDecimals:false,
        tickColor:'#ccc',
        tickWidth:1,
        tickLength:3,
        lineColor:'#eee',
        lineWidth:1,
        gridLineWidth:1,
        gridLineColor:'rgba(255,255,255,.15)',
        endOnTick:true,
        title:{text: ''},
        //gridZIndex:4,
        min:-5,
        max:117.5,
        endOnTick:false,
        startOnTick:false,
        plotLines: [{
            value:10.5,
            width:1,
            color:'#eee'
        }],
        labels: {
            style: {
                fontSize:'9px'
            }
        }
     },
    plotOptions:{
        bar:{
            grouping: false,
            shadow:false,
            borderWidth:0,
            pointPadding:.25,
            groupPadding:0
        },
        scatter:{
            marker:{
                symbol:'line',
                lineWidth:3,
                radius:9,
                lineColor:'#333'
            }
        }
    },
     series:[
         {
        name:'Measure',
        color:'rgba(56,56,56,1)',
        pointRange:.5,
...