开发者

Multi bar chat with Flot

开发者 https://www.devze.com 2023-01-12 23:06 出处:网络
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.

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

Multi bar chat with 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 web开发者_高级运维site are very basic, so I decided to use jqPlot instead


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 :

Multi bar chat with Flot


Have you tried the orderBars plugin?

Multi bar chat with Flot

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.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号