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