jQuery flot stacked bar chart example

Date: 2010-03-11 | Modified: 2010-04-21 | Tags: javascript | 15 Comments

Flot is a Javascript plotting library for jQuery. Here are my steps to create a simplified version of the stacked bar chart example from the flot examples page. For more information, see the API documentation.

Download and unpack:

cd ~/src/jquery/flot_examples
curl http://flot.googlecode.com/files/flot-0.6.tar.gz | tar xzf -

~/src/jquery/flot_examples/stacked_bar_ex.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <!--[if IE]><script language="javascript" type="text/javascript" src="flot/excanvas.min.js"></script><![endif]--> 
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript" src="flot/jquery.flot.js"></script>
  <script type="text/javascript" src="flot/jquery.flot.stack.js"></script>
  <title>Flot stacked bar example</title>
</head>
<body>
  <div id="placeholder" style="width:550px;height:200px;"></div>
  <script type="text/javascript" src="stacked_bar_ex.js"></script>
</body>
</html>

~/src/jquery/flot_examples/stacked_bar_ex.js:

$(function () {
    var css_id = "#placeholder";
    var data = [
        {label: 'foo', data: [[1,300], [2,300], [3,300], [4,300], [5,300]]},
        {label: 'bar', data: [[1,800], [2,600], [3,400], [4,200], [5,0]]},
        {label: 'baz', data: [[1,100], [2,200], [3,300], [4,400], [5,500]]},
    ];
    var options = {
        series: {stack: 0,
                 lines: {show: false, steps: false },
                 bars: {show: true, barWidth: 0.9, align: 'center',},},
        xaxis: {ticks: [[1,'One'], [2,'Two'], [3,'Three'], [4,'Four'], [5,'Five']]},
    };

    $.plot($(css_id), data, options);
});

View ~/src/jquery/flot_examples/stacked_bar_ex.html in the browser:

Emacs espresso-mode for jQuery — posted 2010-03-10
Google jQuery hosting (very short version) — posted 2010-03-10

15 Comments — Comments feed for this post

#1 Colin Wren commented on 2010-07-16:

Excellent Post!

I've just today been looking at Flot to create some charts for work and this really helped me grasp how to create a stack chart with custom labels on the x-axis.

Thanks so much

#2 Miloš Rašić commented on 2010-09-08:

See how the plugin paints a blue line on the number far bar where he value for "bar" is 0? I'd call this undesirable behavior, or at least I wouldn't desire it in my graphs. Is there any way to fix this?

#3 Harpreet commented on 2010-09-29:

yes you can hide the bar having zero by setting its x-axis data to null, in above case javascript code would be data[1].data[4][0]=null

#4 suresh commented on 2010-11-27:

this example is very useful for us and understanding is easy by this.

#5 Joshua Lay commented on 2011-06-27:

Thanks for this post. I found the examples in the package annoying as they displayed example graphs but without the code written out nicely to generate it.

#6 robert commented on 2011-07-14:

Do you see how the colors in the legend go from top to bottom, whereas they stack on the graph from bottom to top? Is there any way to make the colors appear inverted in the legend so they match the visual order of the graph?

#7 phatneglo commented on 2011-09-05:

thank you for keeping nice and simple

#8 Matt commented on 2011-10-03:

Awesome! Great tutorial. One question, is there away to control the position of the legend? Mine is aligned to the left edge of the graph and is extending the entire width of the graph. I'd like to position it outside of the graph, just to the right of it

#9 Vipin commented on 2012-01-05:

how do u set the steps/intervels for the axis like for the X axis i want the number 0,1,2... and for Y axis i want 0,5,10,15,...

also can i rotate the labled in the Y axis for eg: One, Two.... can i rotate them by 90 degree...

#10 Casey Wise commented on 2012-02-02:

Stacks of thanks for posting and helping to destroy my flot learning curve! I needed to come up quick and working from examples is how I learn. You get a gold star.

#11 sean_rainey commented on 2012-04-11:

Hi thanks for your help. But do you know how to do this without stacking? Thanks.

#12 Lewis commented on 2012-10-08:

How to set input in array? Axis Y : 1,23,42,45 Axis X : 1 to 10

#13 madia commented on 2012-12-01:

works like charm! thanks!

#14 Farooq commented on 2012-12-05:

thanks! it help me a lot.

#15 Francois commented on 2013-06-04:

To answer to two of the questions:

to change color just add item'color' : [your color] in the array data like

var data = [ {label: 'foo', data: [[1,300], [2,300], [3,300], [4,300], [5,300]], color: 'red'}, {label: 'bar', data: [[1,800], [2,600], [3,400], [4,200], [5,0]], color: "rgba(255, 0, 0, 1)"}, {label: 'baz', data: [[1,100], [2,200], [3,300], [4,400], [5,500]], color: orange}, ];

to have the legend outside the graph just create another graph, the same in a div next to the graph div but with all option at false except the legend like:

//the option with legend set to false var options = { series: {stack: 0, lines: {show: false, steps: false }, bars: {show: true, barWidth: 0.9, align: 'center',},}, legend: { show: false }, xaxis: {ticks: [[1,'One'], [2,'Two'], [3,'Three'], [4,'Four'], [5,'Five']]}, };

//your true graph without legend $.plot($(css_id), data, options);

//the option with only legend
var options = { series: {stack: 0, lines: {show: false, steps: false }, bars: {show: false, barWidth: 0.9, align: 'center',},}, legend: { show: true, position: "ne", backgroundOpacity: 0.2 }, xaxis: { show: false}, yaxis: { show: false} };

//the graph with only the legend placed in the div you want (id=place+"Leg") $.plot($(css_id), data, options);

Then you control the position and the size of your legend outside the true graph with its div. Regards Francois


Name:	Required
Email:	Required, but not displayed
Website:	Optional
Comment:	Format using Markdown. (No HTML.) Code blocks: prefix each line by at least 4 spaces or 1 tab (and a blank line before and after) Code span: surround with backticks Blockquotes: prefix lines to be quoted with > Links: <URL> Links w/ description: [description](URL)

SaltyCrane Blog