views:

278

answers:

4
+1  Q: 

Empty Flot Charts?

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>
A: 

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

Perhaps this or this plugin can help you?

Natrium
I'll give a +++ to the jqcharts plugin cited by Natrium there. The Google Charts API is very nice, giving you great flexibility. See the basic API information at: http://code.google.com/apis/chart/
Tony Miller
+2  A: 

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}
Derek Kurth
+2  A: 

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.

Lee Theobald
+1  A: 

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

------>

alt text

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

pfctdayelise