Renaming flot pie chart ID

Question

I'm trying to create a pie chart through the use of flot charts. I have successfully managed to create one with the following code:

HTML:

<div class="row">
   <div class="col-md-6">
      <div id="pie-chart"></div>
   </div>
</div>

Javascript:

    var data = [];

    data[0] = { label: "Vertification successful", data: 9 };
    data[1] = { label: "Vertification failed", data: 2 };
    var series = Math.floor(Math.random() * 10) + 1;
    $.plot($("#pie-chart"), data,
    {
        series: {
            pie: {
                show: true,
            }
        },
        grid: { hoverable: true },
    });

And it displays just fine. The thing is, if I change the ID of the div element to "pie-chart1" (rather than "pie-chart") and update the javascript accordingly:

$.plot($("#pie-chart1"), data,

I get the following error:

Uncaught Invalid dimensions for plot, width = 501, height = 0

What on earth could be causing this? I simply wanna rename the ID which apparently for some reason is impossible.

I've used flot a bit in the past, and I can tell you that an element used for the flot-chart (your pie-chart div) cannot have height or width set to 0 (otherwise you get an error like the one you have described). So it is seems strange, to me, that it works in the first case. Are you sure you aren't maybe setting the width and height in css somewhere? — user3334690
github.com/flot/flot/blob/master/README.md read in the Basic Usage part. Its the proper markup — rockStar
@user3334690 It works great in the first case. It's only when I change the ID that it fails. — Jamie Romeo
@JamieRomeo yeah, and I think that is strange... try setting the height and width of your div to some values around 500 each and see if it works? Also do you think you could try to reproduce it in a jsfiddle? — user3334690
@user3334690 Ahh I tried setting the height and it appears to work again. Strange how it worked before with no height. — Jamie Romeo

DNS DNS · Accepted Answer · 2014-02-28T04:18:00

It's very likely that there is some CSS or possibly JS elsewhere on your site that expects the div to be called pie-chart. You need to ensure that it still applies to the new div. For example, if you had:

#pie-chart {
    width: 400px;
    height: 300px;
}

When you change the ID of the div, you need to update that reference too, or else the placeholder's height and width become undefined, which Flot cannot handle.

If your goal in adding that number is to create several charts, then you should use a class to apply the styles rather than an ID.

Renaming flot pie chart ID

1 Answers