Flot Chart : Adding Checkbox's to Toggle Chart Series

Question

After setting up my first chart I'm looking to add check-boxs to toggle which series are selected.

Flot provides an example here : http://www.flotcharts.org/flot/examples/series-toggle/

Now when i tried to replicate this I'm getting error: 'datasets' is undefined could anyone explain why??

Also bonus points if anyone can tell my why the legend still display's inside the graph?

Chart Looks like : View Code :

<div class="legend-container"></div>
<div class="graph-container">
<div id="placeholder" class="graph-placeholder"></div>
</div>
<p id="choices"></p>

Chart Code:

$(document).ready(function fetchData() {
function onDataReceived(series)
{
    console.log('recieved data now parsing the data');
    var currentdata = $.parseJSON(series);

    //Testing
    console.log(currentdata);
    console.log("series sub-arrays");
    console.log(currentdata[0]);
    console.log(currentdata[1]);
    console.log(currentdata[2]);

    var datasets = [
        {
            label: "Current_Out",
            data: currentdata[0],
            yaxis: 2,
            color: '#00C932',
            points: { fillColor: "#00C932", show: true },
            lines: { show: true }
        }, {
            label: "Temperature",
            data: currentdata[1],
            yaxis: 1,
            color: "#0062FF",
            points: { fillColor: "#0062FF", show: true },
            lines: {show:true }
        }]
    var options = {
        legend: {
            show: true,
            placement: 'outsideGrid',
            container: $("#legend-container")
        },
        lines: {
            show: true,
            fill: false,
        },
        axisLabels: {
            show: true
        },
        xaxes: [{
            mode: "time",
            timeformat: "%H:%M:%S",
            axisLabel:'Date',
            axisLabelUseCanvas: false,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
            axisLabelPadding: 5

        }],
        yaxes: [{
            position: "left",
            axisLabel:'Celcius',
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
            axisLabelPadding: 5

        }, {
            position: "right",
            axisLabel: 'mA'
        }],
        grid: {
            hoverable: true,
            clickable: true,
            borderWidth: 1
        },
        legend: {
            labelBoxBorderColor: "none",
            position: "right"
        },
        points: {
            show: true,
            fillColor: "#000000"
        }
    };

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

}
$.ajax({
    url: '/Ajax/GetGraphData',
    type: "GET",
    dataType: "json",
    success: onDataReceived,
    failure: function() {
        console.log('Fail!');
    }
});

Jquery for Checkbox's

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


function plotAccordingToChoices() {
    var data = [];

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

    if (data.length > 0)
        $.plot($("#placeholder"), data, {
            yaxis: { min: 0 },
            xaxis: { tickDecimals: 0 }
        });
}   
plotAccordingToChoices();

Answer 1

Scoping issue. var datasets is local to the onDataReceived function. It is not accessible outside that function. Initing it to null in the $(document).ready( handler should make it accessible to everything in that scope.

As for your second question, you need to show us the CSS attached to those divs. I'm guessing your graph-container is absoluting positioned. Also, in your options, you have two different configurations for legend. Delete the second one.