Flot PIE chart with optional series

Question

Im using the library Flot in combination with pie charts.

Now I got my chart working but I also need to be able to select what series will be visible. I've seen several examples using checkboxes and regular charts(line, bar). But I haven't seen one example using pie charts.

So here's the code I used to make it work with pie charts, but without success.

function setKPI(data, id)
{

var i = 0;
$.each(data, function(key, val) {
    val.color = i;
    ++i;
});

// insert checkboxes 
var choiceContainer = $("#choices");
$.each(data, function(key, val)
{
    choiceContainer.append("<br/><input type='checkbox' name='" + key +
        "' checked='checked' id='id" + key + "'></input>" +
        "<label for='id" + key + "'>"
        + val.label + "</label>");
});

choiceContainer.find("input").click(plotAccordingToChoices);

function plotAccordingToChoices()
{
    var data1 = [];
    choiceContainer.find("input:checked").each(function ()
    {
        var key = $(this).attr("name");
        if (key && data[key]) {
            data1.push(data[key]);
        }
    });
    if (data1.length > 0)
    {
        $.plot(id, data1,
        {
            series:
            {
                pie:
                {
                    show: true,
                    innerRadius: 0.4,
                },
            },        
            legend: {show: false}
        });
    }
}
plotAccordingToChoices();
}
var datasets = new Array();
datasets[1] = [
    {label: "New",  data: 51},
    {label: "Plan",  data: 20},
    {label: "Comm",  data: 25},
    {label: "Done",  data: 100},
    {label: "Overdue",  data: 20},
];
setKPI(datasets[1],'#kpi-2');

This code seems to work the first time it's run but whenever there's a checkbox unticked it draws an invalid line chart.

HTML:

<div id="kpi-2" style="width:100%;height:220px;margin:0 auto;"></div>
<p id="choices" style="float:right; width:135px;"></p>

score 0 · Accepted Answer · edited May 23 '17 at 11:51

Found the answer here: Refresh/Reload Flot In Javascript

thus using

plot.setData(newData);
plot.draw();

full example below

function setKPI(data, id, check, options)
{
setColors(data);

createFlot(data, id);

var plot = $.plot($(id),data,options);

if(check)
{   
    insertCheckboxes(data);
    var choiceContainer = $("#choices");
    choiceContainer.find("input").on('click', function(){
        resetKPI(data, plot);
    });
}
}

function resetKPI(data, plot)
{
var choiceContainer = $("#choices");

var newData = [];
choiceContainer.find("input:checked").each(function ()
{
    var key = $(this).attr("name");
    if (key && data[key]) {
        newData.push(data[key]);
    }
});
plot.setData(newData);
plot.draw();
}

function createFlot(data, id, options)
{
$.plot(id, data, options);
}

function setColors(data)
{
var i = 0;
$.each(data, function(key, val) {
    val.color = i;
    ++i;
});
}

function insertCheckboxes(data)
{
var choiceContainer = $("#choices");
$.each(data, function(key, val)
{
choiceContainer.append("<br/><input type='checkbox' name='" + key +
    "' checked='checked' id='id" + key + "'></input>" +
    "<label for='id" + key + "'>"
    + val.label + "</label>");
});
}

using the following data

datasets[1] = [
    {label: "New",  data: 51},
    {label: "Plan",  data: 20},
    {label: "Comm",  data: 25},
    {label: "Done",  data: 100},
    {label: "Overdue",  data: 20},
];

calling function

setKPI(datasets[1],'#kpi-2', true, {
    series:
    {
        pie:
        {
            show: true,
            innerRadius: 0.4,
        },
    },        
    legend: {show: false}
});

Flot PIE chart with optional series

1 Answers1