Geek Answers Handbook

Tray side by side

Is it possible to have a side histogram mixed with a stack using Flot?

Similar to the jqplot question here: jqplot Screenshot with side stack

I tried to use both, but only one, works side by side, and if I turn off side by side, the stacks work fine.

The image will look like: http://peltiertech.com/Utility/pix/clusterstackchart.png

An example of the code I wrote is: http://jsfiddle.net/WAGbt/ (Comment out the order: property X, and you will see that they switch)

$(document).ready(function () { DrawChart(); }); function GenerateSeries(added) { var data = []; var start = 100 + added; var end = 500 + added; for (i = 1; i <= 20; i++) { var d = Math.floor(Math.random() * (end - start + 1) + start); data.push([i, d]); start++; end++; } return data; } function DrawChart() { var dataa = GenerateSeries(100); var datab = GenerateSeries(100); var datac = GenerateSeries(100); var ds = new Array(); var data = [ { label: "data1", data: dataa, bars: { show: true, barWidth: 0.2, order: 1, lineWidth: 2 } }, { label: "data2", data: datab, bars: { show: true, barWidth: 0.2, order: 2, lineWidth: 2 } }, { label: "data3", data: datac, bars: { show: true, barWidth: 0.2, order: 3, lineWidth: 2 } } ]; var options = { series: { stack: true }, xaxis: { }, grid: { backgroundColor: { colors: ["#FFF", "#FFF"] } } }; var plot = $.plot($("#placeholder"), data, options); }
+6
source share
1 answer

Add bars to options ...

 var options = { series: { stack: true }, xaxis: { }, grid: { backgroundColor: { colors: ["#FFF", "#FFF"] } }, bars:{ // show the bars with a width of .4 show: true, barWidth: .4 } };

And massage the data into this format ...

 var data = [ // all series [ // first series (Q1) [0,100], // pens Q1 N America [0.4,120], // pencils Q1 N America [1,130], // pens Q1 Europe [1.4,140], // pencils Q1 Europe [2,150], // pens Q1 Asia [2.4,200], // pencils Q1 Asia ], [ // second series (Q2) [0,100], [0.4,200], [1,200], [1.4,200], [2,200], [2.4,200], ], [ // third series (Q3) [0,100], [0.4,200], [1,200], [1.4,200], [2,200], [2.4,200], ], [ // fourth series (Q4) [0,100], [0.4,200], [1,200], [1.4,200], [2,200], [2.4,200], ] ]

And it works as follows: http://jsfiddle.net/WAGbt/2/

I did another update with labels for the series and axes: http://jsfiddle.net/WAGbt/3/

+5
source

More articles:


All Articles