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
Post a Comment