jQuery/flot/dataset_checkboxes.js

/* from example at http://people.iola.dk/olau/flot/examples/turning-series.html */

    // hard-code color indices to prevent them from shifting as
    // countries 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) {
        choiceContainer.append('<br/><input type="checkbox" name="' + key +
                               '" checked="checked" >' + val.label + '</input>');
    });
    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]);
        });

        var placeholder = $('#placeholder');
        if ( ! placeholder ) alert("can't find #placeholder");

        if (data.length > 0)
            $.plot( placeholder, data, options);

        placeholder.bind("plotselected", function (event,ranges) {
                var from = ranges.xaxis.from.toFixed(1);
                var to   = ranges.xaxis.to.toFixed(1);

                function DateTimeStr(t) {
                        var d = new Date( parseInt(t) );

                        function pad2(n) {
                                var s = new String(n);
                                if ( s.length == 1 ) {
                                        return '0' + s;
                                } else {
                                        return s;
                                }
                        }

                        var str =
                                pad2( d.getUTCFullYear() )  + '-' +
                                pad2( d.getUTCMonth() + 1 ) + '-' +
                                pad2( d.getUTCDate() )      + ' ' +
                                pad2( d.getUTCHours() )     + ':' +
                                pad2( d.getUTCMinutes() )   + ':' +
                                pad2( d.getUTCSeconds() )   ;

                        return str;
                }

                $('#selection').text( DateTimeStr( from ) + ' to ' + DateTimeStr( to ) );
        });

    }

    plotAccordingToChoices();

1	/* from example at http://people.iola.dk/olau/flot/examples/turning-series.html */
2
3	// hard-code color indices to prevent them from shifting as
4	// countries are turned on/off
5	var i = 0;
6	$.each(datasets, function(key, val) {
7	val.color = i;
8	++i;
9	});
10
11	// insert checkboxes
12	var choiceContainer = $("#choices");
13	$.each(datasets, function(key, val) {
14	choiceContainer.append('<br/><input type="checkbox" name="' + key +
15	'" checked="checked" >' + val.label + '</input>');
16	});
17	choiceContainer.find("input").click(plotAccordingToChoices);
18
19
20	function plotAccordingToChoices() {
21	var data = [];
22
23	choiceContainer.find("input:checked").each(function () {
24	var key = $(this).attr("name");
25	if (key && datasets[key])
26	data.push(datasets[key]);
27	});
28
29	var placeholder = $('#placeholder');
30	if ( ! placeholder ) alert("can't find #placeholder");
31
32	if (data.length > 0)
33	$.plot( placeholder, data, options);
34
35	placeholder.bind("plotselected", function (event,ranges) {
36	var from = ranges.xaxis.from.toFixed(1);
37	var to = ranges.xaxis.to.toFixed(1);
38
39	function DateTimeStr(t) {
40	var d = new Date( parseInt(t) );
41
42	function pad2(n) {
43	var s = new String(n);
44	if ( s.length == 1 ) {
45	return '0' + s;
46	} else {
47	return s;
48	}
49	}
50
51	var str =
52	pad2( d.getUTCFullYear() ) + '-' +
53	pad2( d.getUTCMonth() + 1 ) + '-' +
54	pad2( d.getUTCDate() ) + ' ' +
55	pad2( d.getUTCHours() ) + ':' +
56	pad2( d.getUTCMinutes() ) + ':' +
57	pad2( d.getUTCSeconds() ) ;
58
59	return str;
60	}
61
62	$('#selection').text( DateTimeStr( from ) + ' to ' + DateTimeStr( to ) );
63	});
64
65	}
66
67	plotAccordingToChoices();
68