Multi bar chat with Flot

Question

Any sample code for chart with multiple bars using flot ??

similar to this example . The given patched files are not working for me. Anywhere I can download the latest files for multi bar graph.

Update

I am sure Flot is a very good library but plugins/add-ons are not available easily and the examples given on the website are very basic, so I decided to use jqPlot instead

Solution 1

Updated Info: Andión's answer makes reference to this library. Bars-side-by-side

You can download the code here: http://www.benjaminbuffet.com/public/js/jquery.flot.orderBars.js

The result is :

Solution 2

Have you tried the orderBars plugin?

You can download the code here

Solution 3

You have to treat each bar as its own data series, so if you see 11 bars you need to create 11 data series.

Here's sample code for 2 bars.

<script id="source" language="javascript" type="text/javascript">
$(function () {

var d1 =[0, 2];
var d2 =[1,3];

var startData = [
    {   //first series
        label:"d1",
        data: [d1],
        bars:{
            show: true,
            fill: true,
            fillColor: "red"
        }
    },
    {   //second series
        label:"d2",
        data: [d2],
        bars:{
            show: true,
            fill: true,
            fillColor: "blue"
        }
    }
];

var option={
        series: {
                bars:{
                        show: true,
                        fill: true
                }
        },
        grid: {
                hoverable: true,
                clickable: true
        },
        yaxis: { ticks: 5 }
    };

$.plot($("#placeholder"),startData,option  );

});

Comments

[Joe]

this does not work for me, i'm using flot 0.6, copy pasted this code and the bars just end up rendering over each other

[pcproff]

I would be curious to see what you are using it for Peter.

[AbdullahDiaa]

@MagnusLindhe click-charts-enhanced.googlecode.com/svn-history/r61/trunk/…

[Andión]

I updated the outdated links as noted by @AbdullahDiaa and pmking