Flot Pie Chart Renders Legend But Not Empty Chart When Data is Zero

Question

I am doing some flot charts in my current project. The code works great when you have at least one data object with a positive value, but I want to at least display an empty circle or some kind of message or something if the data returned is ZERO. Here is the data object i'm trying to make a chart out of. The legend shows up fine, but no chart (even an empty one).

datacontent":[{"label":"Wired headset","data":0},{"label":"Bluetooth headset","data":0},{"label":"Car bluetooth","data":0},{"label":"None","data":0}]

I'd really like to just have a message like "sorry, no chart available" or something, while still showing the legend. Is this possible?

Here is a screenshot of what It currently shows:

Answer 1

I'd add a check for "no data" after the plot call and add a message directly to the canvas. That way you get to keep the legend and could add further customization.

somePlot = $.plot($("#placeholder"), [{"label":"Wired headset","data":0},{"label":"Bluetooth headset","data":0},{"label":"Car bluetooth","data":0},{"label":"None","data":0}], {
    series: {
        pie: { 
            show: true
        }
    }
});

if (isNaN(somePlot.getData()[0].percent)){
    var canvas = somePlot.getCanvas();
    var ctx = canvas.getContext("2d");  //canvas context
    var x = canvas.width / 2;
    var y = canvas.height / 2;
    ctx.font = '30pt Calibri';
    ctx.textAlign = 'center';
    ctx.fillText('No Data!', x, y);
}

Produces (fiddle here):

Answer 2

When you see that you have no data, why not create a single dummy series with a value of 1 and a label matching your message?