Empty Flot Charts?

Question

I'm running the code below and getting an empty chart using Flot/jQuery. Ideally what I am after is a bar chart of the data. I'm looked and looked at this with no joy - does anyone have any ideas?

<div id="user_breakdown_placeholder" style="width:300px;height:300px"></div>

<script>
    $(function () {
        var d = [["Unassigned", 310],["Maynard Schumm", 274]];
            var options = {};
        $.plot($("#user_breakdown_placeholder"), d, options);
    });

</script>

Answer 1

You can do this but you just need to fake up your data a little bit.

$(function () {
    var data = [[0, 310],[1,274]];
    var datasets = [ {
                 "data": data
                     }, 
                   ];
    var options = {
                   bars: {show: true},
                   yaxis: { min: 0 },
                   xaxis: { ticks:  [
                                     [0.5, "Unassigned"],
                                     [1.5, "Maynard Schumm"]
                                    ],
                          },
                  };
   $.plot($("#user_breakdown_placeholder"), datasets, options);
});

------>

Presumably you can modify your data appropriately before passing it to Flot.

There are lots of great examples of real uses at FlotUsage. e.g. Fedora have some nice bar charts. The great thing is because it's JavaScript you can view source and crib ideas from anyone :)

Answer 2

As Neil Middleton says in his comment, Flot does not support Bar Charts.

Perhaps this or this plugin can help you?

Answer 3

An old question but I don't think it was answered. According to the Flot API documentation:

Note that to simplify the internal logic in Flot both the x and y values must be numbers ... If you're getting mysterious errors, double check that you're inputting numbers and not strings.

If the above case you are using strings in your data (e.g. ["Unassigned", 310]) which isn't going to work according to the docs.

Answer 4

The current version of flot (v. 0.6) supports bar charts. Here is an example. In your plot() function, you just have to put:

bars: { show: true}