jQuery Flot Toggling Series Manipulation

As we all know when you`re plotting a chart, they are usually have more than one data source. Such as the chart below shows the world population , this chart contains 6 data series.

By showing just one series on the chart, it would be easy for user to read, but putting all six data series in one chart, it would be difficult for user to distinguish series from each other, especially when the chart lines are overlapping. Althogh Flot doesn`t have a built in function that can turn on and off the data series, but there is still a workaround for this to achieve the same effects.

Steps for making toggling series chart

1. Creating Data Source
2. Organizing Toggling Controls
3. Determining which series to be plotted

Creating Data Source

We use world population chart we used before in Area Chart as example. First, you need to make the data source, either you hard coded in script file, or you can get the data via Ajax. In here we hard coded in script file, the data source looks like...

   
//Asia population data source
var rawData6 = [
    [year(1800), 63500], [year(1850), 80900], [year(1900), 94700], [year(1950), 139849], [year(1955), 154195],
    [year(1960), 167434], [year(1965), 189942], [year(1970), 214312], [year(1975), 239751], [year(1980), 263234],
    [year(1985), 288755], [year(1990), 316781], [year(1995), 343005], [year(2000), 367974], [year(2005), 391751],
    [year(2010), 411963]
];
                    

There will be a total of six data sources, the rest of five data sources is omitted here.

After we obtained all the data sources, we need to put them all in an array variabe named dataCollection, then we create another array named labelCollection and put the corresponding label name into this array.

The reason why we create these two arrays is, we will go through all the checkboxes to see if they are being checked or not, if checkbox belongs to Asia data source is being checked, then we will add the data source corresponds to Asia into another array named dataSet, this will be used to plot the chart later.

   
var dataCollection = [
    rawData1, rawData2, rawData3, rawData4, rawData5, rawData6
];

var labelCollection = [
    "Oceania", "North America", "Latin America", "Europe", "Africa", "Asia"
]
                    

Organizing Toggling Controls

The toggling control we will be using is checkbox, you need to set checked attribute in advance, and give each checkbox id a sequential number, this number will be used to identify which data source and label name will extract from the array. For instance, if a user has selected the checkbox of Oceania, then you will put rawData1 as data source and "Oceania" as label into dataSet array, by repeating this process will get the data you need to plot the chart.

   
<ul id="ToggleController">
    <li><input id="Checkbox1" type="checkbox" checked="checked" />Oceania</li>
    <li><input id="Checkbox2" type="checkbox" checked="checked" />North America</li>
    <li><input id="Checkbox3" type="checkbox" checked="checked" />Latin America</li>
    <li><input id="Checkbox4" type="checkbox" checked="checked" />Europe</li>
    <li><input id="Checkbox5" type="checkbox" checked="checked" />Africa</li>
    <li><input id="Checkbox6" type="checkbox" checked="checked" />Asia</li>
</ul>
                    

Determining which series to be plotted

Now the data and controls are all set, it`s time to handle the toggling process. The entire process are like ...

• Loop through each checkboxes to check which one is being checked
• Get the sequential number from the checkbox that is being checked
• Adding the data corresponds to predefined data source into dataSet array
• Redraw the chart

We need to create an empty array dataSet first, this variable will be used to plot the chart in the end. Then we go through all the toggling controls which are checkboxes, by using jQuery selector to get all the input element with type attribute set to checkbox. $("input[type='checkbox']");

Because we added an ID to UL element, in order to distinguish from other checkboxes in the same page, so we need to get the UL element first, then use$.find to get all the checkboxes. Then use $.each to loop through all the checkboxes.

Now we need to find out if checkbox is being checkd, we could use is(":checked"), if checkbox is being checked then it will return true. The following step is to get the sequential number of this checkbox. Because the entire checkbox element looks like this...
<input id="Checkbox6" type="checkbox" checked="checked" />.

You can get the value of id attribute first, then remove the string 'Checkbox', the rest of it is the sequential number. The final step is to simply push the corresponding data and label from the predefined array using the sequential number into dataSet array.

And now you can plot your chart by calling $.plot($("#flot-placeholder"), dataSet, options);. We didn`t mention anything about options variable because we want to keep it simple. If you want to know more about options setting for area chart, you can go to Area Chart.

   
var dataSet = [];

$("#ToggleController").find("input[type='checkbox']").each(function () {
    if ($(this).is(":checked")) {
        var position = $(this).attr("id").replace("chkData", "");
        position = parseInt(position) - 1;

        dataSet.push(
            {
                label: labelCollection[position],
                data: dataCollection[position]
            }
        );   
    }
});

$.plot($("#flot-placeholder"), dataSet, options);
                    

To make the codes neat, you can wrap the formula above into a function DoToggling(), when the document loaded ready , call the function once just to show the chart first, then bind the click event to all checkboxes, so when user check/uncheck the boxes, the chart will be redrawn again.

   
function DoToggling() {
    //formula mentioned above goes here..
}                

$(document).ready(function () {
    DoToggling();

    $("#ToggleController").find("input[type='checkbox']").click(function () {
        DoToggling();
    });
});
                    

The toggling series chart will be like below.