Using Flot with multiple bars with orderbars.js and categories

Question

I am having trouble creating multiple bars with flot. There is a plugin that can be downloaded here: http://www.benjaminbuffet.com/public/js/jquery.flot.orderBars.js that makes graphs with multiple bars per x category like this: http://www.pikemere.co.uk/blog/tutorial-flot-how-to-create-bar-charts/ (see under the customized bar charts). However, his example is a bit different in that it uses the time function rather than categories.

Here is my code:

<!doctype html>
<head>

<script language="javascript" type="text/javascript" src="/flot/jquery.js"></script>
<script language="javascript" type="text/javascript" src="/flot/jquery.flot.js"> </script>
<script language="javascript" type="text/javascript" src="/flot/jquery.flot.categories.js"></script>
<script language="javascript" type="text/javascript" src="/flot/jquery.flot.orderBars.js"></script>


<script type="text/javascript">
    $(document).ready(function () {

        var data1 = [
        {
        label: "Male" ,
        data: [["True", 1],["False", 2]] ,
        bars: {
            show: true,
            barWidth: 0.13,
            order: 1
            }
        },
        {
        label: "Female" ,
        data: [["True", 3],["False", 4]],
        bars: {
            show: true,
            barWidth: 0.13,
            order: 2
            }
        }           
        ];

        $.plot($("#placeholder"), data1, {      
        xaxis: {
            mode: "categories"
        },

        });
    });
</script>


<title>Test</title>
</head>
<body>
<div id="placeholder" style="width:600px;height:300px"></div>

</body>
</html>

With the above code, the graph displays, but without any bars. If I remove the order:1 and order:2, it displays correctly, except with the bars overlapping each other rather than being offset by each other (I think it just ignores the orderbars plugin).

This is a very simplified example of what I really want to do, but if someone knows how I can get it to do what I want fairly simply, I would be very much appreciative.

To sum up, what I want is to have two sets of two bars. The first set with "True" under them and the second second set with "False" under them. I do not want to use numbers to represent the values, if possible as it will greatly complicate my more complex situation. But if I must, I would still like to know how to do it that way.

First of all you dont need to go for orderbars.js for what you are depicting in your question.That can be done using flot alone.Are you looking for jquery flot bar chart multiple series — Deepak Ingole
Thank you Captain, but that solution appears to use the mode: 'time' for the x axis rather than the mode: "categories". Unfortunately, using the "time" mode won't work for me in my situation. Perhaps I am missing something though? — Ryan Cramer
I'm using .81 right now. I think I made a confusing statement in my comment above. Using the time mode will work for me, I just would rather use the categories mode because I am dynamically creating the graphs with php, and using the time mode makes it very difficult to do what I want to do. — Ryan Cramer

Rabih Fashwal Rabih Fashwal · Accepted Answer · 2014-06-27T14:34:03

change the function getAxeMinMaxValues in orderBars.js

function getAxeMinMaxValues(series, AxeIdx) {
        var minMaxValues = new Array();
        for (var i = 0; i < series.length; i++) {
          series[i].data[series[i].data.length - 1][AxeIdx];
            minMaxValues[0] = 0;
            minMaxValues[1] = series[i].data.length - 1;
        }
        return minMaxValues;
    }

hope this will help

Using Flot with multiple bars with orderbars.js and categories

1 Answers