Pie chart using flot

Question

I am using Jquery Flot to create a pie chart based on three different values, pause, nopause and sleeping. Initially it draws th pie chart correctly but after some redraw it gives me the following error.

Could not draw pie with labels contained inside canvas

My code is

Lecturer.socket.onmessage = function (message) {

   var str = message.data;
   var msg = str.split(":");
   if(msg[0] == 'pause'){
       var pause = parseInt(msg[1]);
       var noPause = parseInt(msg[2]);
       var sleeping = parseInt(msg[3]);
       var data = [
          {label: "Pause", data:pause},
          {label: "No Pause", data:noPause},
          {label: "Sleeping", data:sleeping}
       ];
   var options = {
        series: {
            pie: {show: true}
        },
        legend: {
            show: false
        }
     };

    $.plot($("#pie-placeholder"), data, options);
}

};

HTML is

<div id="live-placeholder" class="flot"></div>

All the require js libraries are included. What I m doing wrong? Any Help ?

Thanks

Answer 1

You've got two problems:

1.) your placeholder div id doesn't match the $.plot call. live-placeholder != pie-placeholder.

2.) You don't need to calculate the percents yourself. Flot will do it internally.

See a working fiddle here.