Beginning JavaScript Charts: With jqPlot, D3, and Highcharts by Fabio Nelli

Author:Fabio Nelli [Nelli, Fabio]
Language: eng
Format: epub
Tags: Web, Computers, JavaScript, Web Programming, Programming Languages
ISBN: 9781430262909
Google: BZ4QAwAAQBAJ
Publisher: Apress
Published: 2013-12-03T21:19:54+00:00

Using Check Boxes

In the previous examples, the user could choose only one among the number of series that could be displayed.However, typically the user will want to be able to decide which series should be displayed and which should not, choosing, for instance, to display two or more sets at the same time. This entails dealing with multiple choices within the same group. To enable the user make this kind of choice, you have to opt for check boxes.

Generally, check boxes are grouped in a list, represented by empty boxes (see Figure 15-1). Unlike radio buttons, these controls are not mutually exclusive, but rather multiple choice. Thus, you can select all, some, or none of the values that they represent(whereas with radio buttons an item has to be selected)

Similar to radio buttons, there is a check box for each series, and if a check box is checked, the corresponding series is shown in the chart. Yet, unlike radio buttons, check boxes are independent of each other: their state (checked or unchecked) does not affect the status of the others.

Often, when you have a list of check boxes, it can be very useful to add two buttons with the “CheckAll/UncheckAll” functionality, thereby allowing the choice of selecting/deselecting all the check boxes with one click.

Using the previous example (see Listing 15-9 to 15-11), the data set and options settings are the same; the only thing you need to change is the data passed in the $.jqplot() function. In this case, the whole data set will be passed as an argument.

var plot1 = $.jqplot ('myChart', [dataSet.data1, dataSet.data2, dataSet.data3, dataSet.data4], options);

Let us delete the table containing the previous controls (radio buttons, sliders) and substitute it with a new one containing check boxes, as shown in Listing 15-12 (if you are starting directly from here, you can copy the entire listing without considering the previous controls). Moreover, in addition to the four controls for as many series, you can add a button at the end to manage the feature “CheckAll/UncheckAll .”

Listing 15-12. ch15_03.html

<table>

<tr>

<td>

<div>

<ul>

<li><input name="data1" type="checkbox" checked />First series</li>

<li><input name="data2" type="checkbox" checked />Second series</li>

<li><input name="data3" type="checkbox" checked />Third series</li>

<li><input name="data4" type="checkbox" checked />Fourth series</li>

<li><input type="button" name="checkall" value="Uncheck All"></li>

</ul>

</div>

</td>

</tr>

</table>

As with radio buttons, you have to add jQuery methods to bind the events that have occurred with these controls. First, you define the status of each check box. Normally, they should all be checked. Then, you define five jQuery methods, enabling or disabling the series to be represented, and then force the replot.

From the code, you must delete all the rows that handled the previous controls and in their place, write the methods in Listing 15-13.

Listing 15-13. ch15_03.html

$("input[type=checkbox][name=data1]").change(function(){

if(this.checked){

plot1.series[0].data = dataSet.data1;

plot1.replot();

} else {

plot1.series[0].data = [];

plot1.replot();

}

});

$("input[type=checkbox][name=data2]").change(function(){

if(this.checked){

plot1.series[1].data = dataSet.data2;

plot1.replot();

} else {

plot1.series[1].data = [];

plot1.replot();

}

});

$("input[type=checkbox][name=data3]").change(function(){

if(this.checked){

plot1.series[2].data = dataSet.data3;

plot1.replot();

} else {

plot1.series[2].data = [];

plot1.replot();

}

});

$("input[type=checkbox][name=data4]").change(function(){

if(this.checked){

plot1.series[3].data = dataSet.data4;

plot1.replot();

} else {

plot1.series[3].data = [];

plot1.replot();

}

});

$("input[type=button][name=checkall]").click(function(){

if(this.value == "Check All"){

plot1.series[0].data = dataSet.data1;

plot1.series[1].data = dataSet.data2;

plot1.series[2].data = dataSet.data3;

plot1.series[3].data = dataSet.data4;

$("input[type=checkbox][name=data1]").prop("checked", true);

$("input[type=checkbox][name=data2]").prop("checked", true);

$("input[type=checkbox][name=data3]").prop("checked", true);

$("input[type=checkbox][name=data4]").prop("checked", true);

this.value = "Uncheck All";

plot1.replot();

} else {

plot1.series[0].data = [];

plot1.series[1].data = [];

plot1.series[2].data = [];

plot1.series[3].data = [];

$("input[type=checkbox][name=data1]").prop("checked", false);

$("input[type=checkbox][name=data2]").prop("checked", false);

$("input[type=checkbox][name=data3]").prop("checked", false);

$("input[type=checkbox][name=data4]").prop("checked", false);

this.value = "Check All";

plot1.replot();

}

});

As shown in Figure 15-5, the user can now select the series he or she wants to see displayed in the chart.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.