highcharts - Convert bar bullet chart into column chart -


here example of highchart bullet chart http://jsfiddle.net/jlbriggs/ldhyt/1/ how can convert column bullet chart?

//------------------------------------------------------- highcharts.renderer.prototype.symbols.line = function(x, y, width, height) {     return ['m',x ,y + width / 2,'l',x+height,y + width / 2]; }; //------------------------------------------------------- highcharts.setoptions({     chart:{         type:'bar',         margin:[5,15,10,100],     },     credits:{enabled:false},     exporting:{enabled:false},     legend:{enabled:false},     title:{text:''},     xaxis:{         ticklength:0,         linecolor:'#999',         linewidth:1,         labels:{style:{fontweight:'bold'}}             },     yaxis:{         min:0,         minpadding:0,         maxpadding:0,         tickcolor:'#ccc',         tickwidth:1,         ticklength:3,         gridlinewidth:0,         endontick:true,         title:{text: ''},         labels:{             y:10,             style:{                 fontsize:'8px'             },             formatter:function(){                 if (this.islast){                     return this.value + ' %';                 }                 else{                     return this.value;                 }             }         }     },     tooltip:{         enabled:true,         backgroundcolor:'rgba(255, 255, 255, .85)',         borderwidth:0,         shadow:true,         style:{fontsize:'10px',padding:2},         formatter:function() {            return this.series.name + ": <strong>" + highcharts.numberformat(this.y,2) + "</strong>";         }     },     plotoptions:{         bar:{             color:'#000',             shadow:false,             borderwidth:0,         },         scatter:{             marker:{                 symbol:'line',                 linewidth:3,                 radius:8,                 linecolor:'#000'             }         }     } });  //------------------------------------------------------- var chart1 = new highcharts.chart({     chart:{renderto:'container1'},     xaxis:{categories:['title 1']},     yaxis:{         max:100,         labels:{y:10,style:{fontsize:'8px'}},             plotbands:[{from:0,to:70,color: 'rgba(103,103,103,.35)'},                    {from:70,to:85,color: 'rgba(153,153,153,.35)'},                    {from:85,to:100,color: 'rgba(204,204,204,.35)'}]     },     series:[{name:'measure',pointwidth:10,data:[80]},             {name:'target',type: 'scatter',data:[90],}] });  //------------------------------------------------------- var chart2 = new highcharts.chart({     chart:{renderto:'container2'},     xaxis:{categories:['title 2']},     yaxis:{         max:100,         labels:{y:10,style:{fontsize:'8px'}},            plotbands:[{from:0,to:75,color: 'rgba(103,103,103,.35)'},                    {from:75,to:90,color: 'rgba(153,153,153,.35)'},                    {from:90,to:100,color: 'rgba(204,204,204,.35)'}]     },     series:[{name:'measure',pointwidth:10,data:[92]},             {name:'target',type: 'scatter',data:[95],}] });  //------------------------------------------------------- var chart3 = new highcharts.chart({     chart:{renderto:'container3'},     xaxis:{categories:['title 3']},     yaxis:{         max:100,         labels:{y:10,style:{fontsize:'8px'}},            plotbands:[{from:0,to:50,color: 'rgba(103,103,103,.35)'},                    {from:50,to:75,color: 'rgba(153,153,153,.35)'},                    {from:75,to:100,color: 'rgba(204,204,204,.35)'}]     },     series:[{name:'measure',pointwidth:10,data:[64]},             {name:'target',type: 'scatter',data:[75],}] });  //------------------------------------------------------- var chart4 = new highcharts.chart({     chart:{renderto:'container4'},     xaxis:{categories:['title 4']},     yaxis:{         max:1000,         labels:{y:10,style:{fontsize:'8px'},formatter:function(){return this.value;}},            plotbands:[{from:0,to:600,color: 'rgba(103,103,103,.35)'},                    {from:600,to:800,color: 'rgba(153,153,153,.35)'},                    {from:800,to:1000,color: 'rgba(204,204,204,.35)'}]     },     series:[{name:'measure',pointwidth:10,data:[970]},             {name:'target',type: 'scatter',data:[850],}] });  //------------------------------------------------------- var chart5 = new highcharts.chart({     chart:{renderto:'container5'},     xaxis:{categories:['title 5']},     yaxis:{         max:500,tickinterval:100,         labels:{y:10,style:{fontsize:'8px'},formatter:function(){return this.value;}},            plotbands:[{from:0,to:300,color: 'rgba(103,103,103,.35)'},                    {from:300,to:400,color: 'rgba(153,153,153,.35)'},                    {from:400,to:500,color: 'rgba(204,204,204,.35)'}]     },     series:[{name:'measure',pointwidth:10,data:[475]},             {name:'target',type: 'scatter',data:[450],}] }); //------------------------------------------------------- 

this you're looking for? fiddle

//-------------------------------------------------------  highcharts.renderer.prototype.symbols.line = function(x, y, width, height) {    return ['m', x, y + width / 2, 'l', x + height, y + width / 2];  };  //-------------------------------------------------------  highcharts.setoptions({    chart: {      type: 'column',      inverted: false,    },    credits: {      enabled: false    },    exporting: {      enabled: false    },    legend: {      enabled: false    },    title: {      text: ''    },    xaxis: {      ticklength: 0,      linecolor: '#999',      linewidth: 1,      labels: {        style: {          fontweight: 'bold'        }      }    },    yaxis: {      min: 0,      minpadding: 0,      maxpadding: 0,      tickcolor: '#ccc',      tickwidth: 1,      ticklength: 3,      gridlinewidth: 0,      endontick: true,      title: {        text: ''      },      labels: {        y: 10,        style: {          fontsize: '8px'        },        formatter: function() {          if (this.islast) {            return this.value + ' %';          } else {            return this.value;          }        }      }    },    tooltip: {      enabled: true,      backgroundcolor: 'rgba(255, 255, 255, .85)',      borderwidth: 0,      shadow: true,      style: {        fontsize: '10px',        padding: 2      },      formatter: function() {        return this.series.name + ": <strong>" + highcharts.numberformat(this.y, 2) + "</strong>";      }    },    plotoptions: {      column: {        color: '#000',        shadow: false,        borderwidth: 0,      },      scatter: {        marker: {          symbol: 'line',          linewidth: 3,          radius: 8,          linecolor: '#000'        }      }    }  });    //-------------------------------------------------------  var chart1 = new highcharts.chart({    chart: {      renderto: 'container1'    },    xaxis: {      categories: ['title 1']    },    yaxis: {      max: 100,      labels: {        y: 10,        style: {          fontsize: '8px'        }      },      plotbands: [{        from: 0,        to: 70,        color: 'rgba(103,103,103,.35)'      }, {        from: 70,        to: 85,        color: 'rgba(153,153,153,.35)'      }, {        from: 85,        to: 100,        color: 'rgba(204,204,204,.35)'      }]    },    series: [{      name: 'measure',      pointwidth: 10,      data: [80]    }, {      name: 'target',      type: 'scatter',      data: [90],    }]  });    //-------------------------------------------------------  var chart2 = new highcharts.chart({    chart: {      renderto: 'container2'    },    xaxis: {      categories: ['title 2']    },    yaxis: {      max: 100,      labels: {        y: 10,        style: {          fontsize: '8px'        }      },      plotbands: [{        from: 0,        to: 75,        color: 'rgba(103,103,103,.35)'      }, {        from: 75,        to: 90,        color: 'rgba(153,153,153,.35)'      }, {        from: 90,        to: 100,        color: 'rgba(204,204,204,.35)'      }]    },    series: [{      name: 'measure',      pointwidth: 10,      data: [92]    }, {      name: 'target',      type: 'scatter',      data: [95],    }]  });    //-------------------------------------------------------  var chart3 = new highcharts.chart({    chart: {      renderto: 'container3'    },    xaxis: {      categories: ['title 3']    },    yaxis: {      max: 100,      labels: {        y: 10,        style: {          fontsize: '8px'        }      },      plotbands: [{        from: 0,        to: 50,        color: 'rgba(103,103,103,.35)'      }, {        from: 50,        to: 75,        color: 'rgba(153,153,153,.35)'      }, {        from: 75,        to: 100,        color: 'rgba(204,204,204,.35)'      }]    },    series: [{      name: 'measure',      pointwidth: 10,      data: [64]    }, {      name: 'target',      type: 'scatter',      data: [75],    }]  });    //-------------------------------------------------------  var chart4 = new highcharts.chart({    chart: {      renderto: 'container4'    },    xaxis: {      categories: ['title 4']    },    yaxis: {      max: 1000,      labels: {        y: 10,        style: {          fontsize: '8px'        },        formatter: function() {          return this.value;        }      },      plotbands: [{        from: 0,        to: 600,        color: 'rgba(103,103,103,.35)'      }, {        from: 600,        to: 800,        color: 'rgba(153,153,153,.35)'      }, {        from: 800,        to: 1000,        color: 'rgba(204,204,204,.35)'      }]    },    series: [{      name: 'measure',      pointwidth: 10,      data: [970]    }, {      name: 'target',      type: 'scatter',      data: [850],    }]  });    //-------------------------------------------------------  var chart5 = new highcharts.chart({    chart: {      renderto: 'container5'    },    xaxis: {      categories: ['title 5']    },    yaxis: {      max: 500,      tickinterval: 100,      labels: {        y: 10,        style: {          fontsize: '8px'        },        formatter: function() {          return this.value;        }      },      plotbands: [{        from: 0,        to: 300,        color: 'rgba(103,103,103,.35)'      }, {        from: 300,        to: 400,        color: 'rgba(153,153,153,.35)'      }, {        from: 400,        to: 500,        color: 'rgba(204,204,204,.35)'      }]    },    series: [{      name: 'measure',      pointwidth: 10,      data: [475]    }, {      name: 'target',      type: 'scatter',      data: [450],    }]  });  //-------------------------------------------------------
body {    font-family: helvetica, sans-serif;    font-size: .7em;  }  p {    margin: .5em 1em;  }  #container1,  #container2,  #container3,  #container4,  #container5 {    display: inline-block;  }
<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="container1" style="height:auto;width:100px;"></div>  <div id="container2" style="height:auto;width:100px;"></div>  <div id="container3" style="height:auto;width:100px;"></div>  <div id="container4" style="height:auto;width:100px;"></div>  <div id="container5" style="height:auto;width:100px;"></div>


Comments

Popular posts from this blog

qt - Using float or double for own QML classes -

Create Outlook appointment via C# .Net -

ios - Swift Array Resetting Itself -