Reputation: 22238

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>

Upvotes: 1

Answers (4)

pfctdayelise

Reputation: 5285

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

Upvotes: 1

Lee Theobald

Reputation: 8587

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.

Upvotes: 2