bonez bonez - 5 months ago 18
jQuery Question

how to do a stacked with order bar chart

I want to create a stacked bar chart and each xaxis should have a stacked bar with a total column bar for comparison.

I have 3 legends on the stacked bar and a total column next to it. is this possible to do?

data

[{"label":"All","data":[{"0":1433113200000,"1":0},{"0":1435705200000,"1":0},{"0":1438383600000,"1":0},{"0":1441062000000,"1":0},{"0":1443654000000,"1":4},{"0":1446336000000,"1":8},{"0":1448928000000,"1":10},{"0":1451606400000,"1":20},{"0":1454284800000,"1":41},{"0":1456790400000,"1":78},{"0":1459465200000,"1":176},{"0":1462057200000,"1":360}],"bars":{"order":0},"idx":0},{"label":"P3","data":[{"0":1433113200000,"1":0},{"0":1435705200000,"1":0},{"0":1438383600000,"1":0},{"0":1441062000000,"1":0},{"0":1443654000000,"1":0},{"0":1446336000000,"1":2},{"0":1448928000000,"1":4},{"0":1451606400000,"1":2},{"0":1454284800000,"1":7},{"0":1456790400000,"1":0},{"0":1459465200000,"1":12},{"0":1462057200000,"1":28}],"bars":{"order":1},"stack":true,"color":"#ffa500","idx":1},{"label":"P2","data":[{"0":1433113200000,"1":0},{"0":1435705200000,"1":0},{"0":1438383600000,"1":0},{"0":1441062000000,"1":0},{"0":1443654000000,"1":0},{"0":1446336000000,"1":0},{"0":1448928000000,"1":0},{"0":1451606400000,"1":0},{"0":1454284800000,"1":0},{"0":1456790400000,"1":2},{"0":1459465200000,"1":31},{"0":1462057200000,"1":136}],"bars":{"order":1},"stack":true,"color":"#f00","idx":2}]


options

{"series":{"bars":{"show":true,"fill":1,"align":"center","barWidth":1296000000,"lineWidth":0}},"xaxis":{"mode":"time","autoscaleMargin":null,"tickSize":[1,"month"],"format":"%m %y","ticks":null},"yaxis":{"min":0,"tickDecimals":0,"minTickSize":2},"grid":{"clickable":true,"hoverable":true},"legend":{"noColumns":3,"position":"ne"}}

Answer

is this possible to do?

yes, I believe this is possible using jquery.flot.stack.js plugin.

See this example on how-to-make-jquery-flot-stacked-chart