How can I use Flot to make a multiseries line graph with curved lines?

Question

I'm trying to use Flot to make a line graph with multiple series, then smoothing the lines out using the CurvedLines plugin.

I can get my multiple series line chart using flot alone to get jagged lines. I can also use the CurvedLines plugin to make a single smooth line chart. But for some reason, I'm unable to make my multiple series line graph smooth.

Here is a link to the graph I'm working on: www.somanifamily.com/multiple/

I am positive that there is nothing wrong with my CSS or the external JS files.

Here is the (slightly abridged) Javascript from my page:

$(function() {
var datasets = {
"oak": {
    label: "Oak (Querus)",
    data: [[10, 30], [20, 0], [30, 23], [40, 54], [50, 45], [60, 2], [70, 0], [80, 0], [90, 0], [100, 0], [110, 0], [120, 0]]
},
"elm": {
    label: "Elm (Ulmus)",
    data: [[10, 0], [20, 0], [30, 0], [40, 45], [50, 23], [60, 0], [70, 0], [80, 0], [90, 0], [100, 0], [110, 0], [120, 0]]
},
"weeds": {
    label: "Total Weeds",
    data: [[10, 0], [20, 0], [30, 0], [40, 45], [50, 23], [60, 0], [70, 0], [80, 0], [90, 0], [100, 0], [110, 0], [120, 0]]
},
"grass": {
    label: "Total Grass",
    data: [[10, 0], [20, 0], [30, 0], [40, 45], [50, 23], [60, 0], [70, 0], [80, 0], [90, 0], [100, 0], [110, 0], [120, 0]]
}
};

// hard-code color indices to prevent them from shifting as
// pollens are turned on/off

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

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

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

function plotAccordingToChoices() {
    var d1 = [];
    choiceContainer.find("input:checked").each(function () {
        var key = $(this).attr("name");
        if (key && datasets[key]) {
            d1.push(datasets[key]);
        }
    });
    if (d1.length > 0) {
        // set options
        var options = {
            series: {
                curvedLines: {
                active: true
                }
            },
            yaxis: {
                min: 0
            },
            xaxis: {
                tickDecimals: 0,
                ticks: [[10,'Jan.'],[20,'Feb.'],[30,'March'],[40,'April'],[50,'May'],[60,'June'],
                [70,'July'],[80,'Aug.'],[90,'Sep.'],[100,'Oct.'],[110,'Nov.'],[120,'Dec.']]
            }
        };

        // plot
        $.plot("#placeholder", [{data: d1, lines: { show: true }, curvedLines: {apply:true, fit: true, fitPointDist: 0.000001}}], options);
    }
}

plotAccordingToChoices();
});

I'm suspecting that the error is with the line

$.plot("#placeholder", [{data: d1, lines: { show: true }, curvedLines: {apply:true, fit: true, fitPointDist: 0.000001}}], options);

How do I get the graph to plot the multiple series smoothly (and display the legend along with it)? Thanks in advance.

Answer 1

Your suspicion is correct. In that line, you are treating d1 as an individual series, when it is in fact an array of series. In your case, since you seem to want the same curvedLines parameters applied to all the series, you can just add them in the options (you already have active: true, you need to add the rest):

var options = {
    series: {
        curvedLines: {
            active: true
            apply: true,
            fit: true,
            fitPointDist: 0.000001
        }
    },
etc...

If you wanted different parameters for each series, you could add them there instead.

var datasets = {
"oak": {
    label: "Oak (Querus)",
    data: [[10, 30], [20, 0], [30, 23], [90, 0], [100, 0], [110, 0], [120, 0]]
    curvedLines:  {
            apply: true,
            fit: true,
            fitPointDist: 0.000001
        }
},
etc...

Then the plot line is just:

$.plot("#placeholder", d1, options);