javascript - Flot Bar Chart multiple series issue -


i've been using flot charts short period of time , need display bar chart 1 or 2 series depending on selection:

if (lc2 != 'none') {       values = [           { label: lc1, data: arrc1, color: cc1 },           { label: lc2, data: arrc2, color: cc2 }                ];       bwidth = 0.15;  }  else {       values = [{ data: arrc1, color: cc1 }];       bwidth = 0.3; } 

and function draws chart is:

function barcharth(id, data, ticksl) {  $.plot(id, data, {     series:{         bars: {             show: true,             barwidth: bwidth,             order: 1,             horizontal: true             }     },     grid: {         hoverable: true         , align: "center"         //,horizontal: true     },     legend: {         show: true     }     , yaxis: { ticks: ticksl } }); } 

but when needs display both series (lc2 != 'none') appears second 1 (the bars become stacked).

the thing if remove 'order:1' function , add order each data like:

values.push({ label: lc1, bars: { order:1 }, data: arrc1, color: cc1 }); values.push({ label: lc2, bars: { order:2 }, data: arrc2, color: cc2 }); 

or

values = [     { label: lc1, bars: { order:1 }, data: arrc1, color: cc1 },     { label: lc2, bars: { order:2 }, data: arrc2, color: cc2 }]; 

it displays both of series lot of space between bars , when there many overlap (the lc2 bar first y label overlaps lc1 bar second y label in attached image).

i need both bars of same y label closer make difference between them, don't know doing wrong.

edit: added: fiddle

you have use plugin orderbars ... check fiddle used orderbars plugin ... can increase value of bwidth decrease space between bars.

also here did:

var arrc1 = [[7,5], [3,4],[4,3],[6,2],[4,1]]; var arrc2 = [[2,5], [1,4],[0,3],[5,2],[4,1]];  var ticksl = [[5, "five"], [4, "four"], [3, "three"], [2,"two"], [1,"one"]];  var data = [{bars:{order:1},data: arrc1,color: 'red'},          {bars:{order:2},data: arrc2,color: 'green'}];  var bwidth=0.43;  $.plot($('#chart'), data, {     series: {         bars: {             show:true,             linewidth: 1,             barwidth: bwidth,             order: 1,             horizontal: true         }     },     grid: {         align: "center"     },     legend: {         show: true     },     yaxis:{         ticks: ticksl,         autoscalemargin: 0.8     } }); 

Comments

Popular posts from this blog

html - Outlook 2010 Anchor (url/address/link) -

javascript - Why does running this loop 9 times take 100x longer than running it 8 times? -

Getting gateway time-out Rails app with Nginx + Puma running on Digital Ocean -