javascript - Multi bar chat with Flot - Stack Overflow

admin管理员组

文章数量:1203219

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

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

• javascript
• jquery
• flot

Share Improve this question Follow edited Aug 27, 2010 at 4:23 user431514 asked Aug 26, 2010 at 7:17 user431514user431514 1,20133 gold badges1010 silver badges77 bronze badges

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 9

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 :

Have you tried the orderBars plugin?

You can download the code here

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  );

});

Double-check the values that you're passing in on the X-axis (of your bar series).

You don't need a different series for each bar, that would be.... excessive.

What you do need is a different series for each colour of bar (or more accurately, each different set of rendering settings that you'd like to have in your chart).

I realize you've moved on, but if you want to post the code that was giving you issues, it might help other people. The examples on the flot site are pretty straight-forward, so it may have just been something simple (like your X-axis value if they weren't defined) that was tripping you up.

I'm using flot in a production system to render three different bar series (red, yellow and green bars) so it sounds like a very similar solution what you're trying to do.

本文标签： javascriptMulti bar chat with FlotStack Overflow