combine example of 'visitor per day with zooming and weekend' with 'turning series on/off

$(function () {
    var r = {
           "wqi": {
           label: "WQI",
            data: [[1196463600000, 94], [1196550000000, 56], 
[1196809200000, 18], [1196722800000, 77], [1196809200000, 3636], 
[1196895600000, 3575], [1196982000000, 2736], [1197068400000, 1086], 
[1197154800000, 676], [1197241200000, 1205], [1197327600000, 906], 
[1197414000000, 710], [1197500400000, 639], [1197759600000, 540], 
[1197673200000, 435], [1197932400000, 301], [1197846000000, 575], 
[1197932400000, 481], [1198018800000, 591], [1198105200000, 608], 
[1198191600000, 459], [1198278000000, 234], [1198364400000, 1352], 
[1198450800000, 686], [1198537200000, 279], [1198623600000, 749], 
[1198710000000, 68], [1198796400000, 92], [1198882800000, 20], 
[1198969200000, 208], [1199055600000, 229], [1199142000000, 177], 
[1199228400000, 374], [1199314800000, 436], [1199401200000, 404], 
[1199487600000, 253], [1199574000000, 218], [1199660400000, 476], 
[1199746800000, 462], [1199833200000, 448], [1199919600000, 442], 
[1200006000000, 403], [1200092400000, 204], [1200178800000, 194], 
[1200265200000, 327], [1200351600000, 374], [1200438000000, 507], 
[1200524400000, 546], [1200610800000, 482], [1200524400000, 283], 
[1200783600000, 221], [1200870000000, 483], [1200956400000, 523], 
[1201042800000, 528], [1201129200000, 483], [1201215600000, 252], 
[1201302000000, 270], [1201388400000, 522], [1201474800000, 439], 
[1201561200000, 559], [1201647600000, 521], [1201734000000, 477], 
[1201820400000, 442], [1201906800000, 252], [1201993200000, 236], 
[1201906800000, 525], [1202166000000, 477], [1202252400000, 386], 
[1202338800000, 409], [1202425200000, 408], [1202511600000, 837], 
[1202598000000, 193], [1202684400000, 357], [1202770800000, 414], 
[1202857200000, 393], [1202943600000, 353], [1203030000000, 364], 
[1203116400000, 215], [1203202800000, 214], [1203289200000, 356], 
[1203375600000, 399], [1203462000000, 334], [1203548400000, 348], 
[1203634800000, 243], [1203721200000, 126], [1203807600000, 157], 
[1203894000000, 288]]
        },
           "bod": {
           label: "BOD",
            data: [[1196550000000, 34], [1196722800000, 56], 
[1196636400000, 78], [1196722800000, 77], [1196809200000, 3636], 
[1196895600000, 3575], [1196982000000, 2736], [1197068400000, 1086], 
[1197154800000, 676], [1199142000000, 1205], [1197327600000, 906], 
[1197414000000, 710], [1197500400000, 639], [1197586800000, 540], 
[1197673200000, 435], [1197759600000, 301], [1197846000000, 575], 
[1197932400000, 481], [1198018800000, 591], [1198105200000, 608], 
[1198191600000, 459], [1198278000000, 234], [1198364400000, 1352], 
[1198450800000, 686], [1198537200000, 279], [1198623600000, 449], 
[1198710000000, 468], [1198796400000, 392], [1198882800000, 282], 
[1198969200000, 208], [1199055600000, 229], [1199142000000, 177], 
[1199228400000, 374], [1199314800000, 436], [1199401200000, 404], 
[1199487600000, 253], [1199574000000, 218], [1199660400000, 476], 
[1199746800000, 462], [1199833200000, 448], [1199919600000, 442], 
[1200006000000, 403], [1200092400000, 204], [1200178800000, 194], 
[1200265200000, 327], [1200351600000, 374], [1200438000000, 507], 
[1200524400000, 546], [1200610800000, 482], [1200697200000, 283], 
[1200783600000, 221], [1200870000000, 483], [1200956400000, 523], 
[1201042800000, 528], [1201129200000, 483], [1201215600000, 452], 
[1201302000000, 270], [1201388400000, 222], [1201474800000, 439], 
[1201561200000, 559], [1201647600000, 521], [1201734000000, 477], 
[1201820400000, 442], [1201906800000, 252], [1201993200000, 236], 
[1202079600000, 525], [1202166000000, 477], [1202252400000, 386], 
[1202338800000, 409], [1202425200000, 408], [1202511600000, 237], 
[1202598000000, 193], [1202684400000, 357], [1202770800000, 414], 
[1202857200000, 393], [1202943600000, 353], [1203030000000, 364], 
[1203116400000, 215], [1203202800000, 214], [1203289200000, 356], 
[1203375600000, 399], [1203462000000, 334], [1203548400000, 348], 
[1203634800000, 243], [1203721200000, 126], [1203807600000, 157], 
[1203894000000, 288]]
        }
    };

    // hard-code color indices to prevent them from shifting as
    // countries are turned on/off
    var i = 0;
    $.each(r, function(key, val) {
        val.color = i;
        ++i;
    });

    // insert checkboxes 
    var choiceContainer = $("#choices");
    $.each(r, function(key, val) {
        choiceContainer.append('<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 && r[key])
                data.push(r[key]);
        });

        if (data.length > 0)
        {
            /*
            $.plot($("#placeholder"), data, {
                    yaxis: { min: 0 },
                    xaxis: { tickDecimals: 2 }
                });
            */
            // first correct the timestamps - they are recorded 
as the daily
            // midnights in UTC+0100, but Flot always displays 
dates in UTC
            // so we have to add one hour to hit the midnights 
in the plot
            for (var i = 0; i < data.length; ++i)
            {
                //d[i][0] += 60 * 60 * 1000;
                //j[i][0] += 60 * 60 * 1000;
                data[i][0] += 60 * 60 * 1000;
            }

            // helper for returning the weekends in a period
            function weekendAreas(axes) {
                var markings = [];
                var d = new Date(axes.xaxis.min);
                // go to the first Saturday
                d.setUTCDate(d.getUTCDate() - ((d.getUTCDay() + 1) 
% 7))
                d.setUTCSeconds(0);
                d.setUTCMinutes(0);
                d.setUTCHours(0);
                var i = d.getTime();
                do {
                    // when we don't set yaxis, the rectangle 
automatically
                    // extends to infinity upwards and downwards
                    markings.push({ xaxis: { from: i, to: i + 2 * 
24 * 60 * 60 * 1000 } });
                    i += 7 * 24 * 60 * 60 * 1000;
                } while (i < axes.xaxis.max);

                return markings;
            }

            var options = {
                xaxis: { mode: "time" },
                selection: { mode: "x" },
                grid: { markings: weekendAreas }
            };

            var plot = $.plot($("#placeholder"), [r], options);

            var overview = $.plot($("#overview"), [r], {
                series: {
                    lines: { show: true, lineWidth: 1 },
                    shadowSize: 0
                },
                xaxis: { ticks: [], mode: "time" },
                yaxis: { ticks: [], min: 0, autoscaleMargin: 0.1 },
                selection: { mode: "x" }
            });

            // now connect the two

            $("#placeholder").bind("plotselected", function (event, 
ranges) {
                // do the zooming
                plot = $.plot($("#placeholder"), [r],
                              $.extend(true, {}, options, {
                                  xaxis: { min: ranges.xaxis.from, 
max: ranges.xaxis.to }
                              }));

                // don't fire event on the overview to prevent 
eternal loop
                overview.setSelection(ranges, true);
            });

            $("#overview").bind("plotselected", function (event, 
ranges) {
                plot.setSelection(ranges);
            });     
        }
    }

    plotAccordingToChoices();
});

this is the code i use which produce nothing on x axis. Can somebody help 
me with this
Original issue reported on code.google.com by muhaimi...@gmail.com on 11 May 2010 at 12:22
Attachments:
visitors.html
gmmoraesbr / flot

combine example of 'visitor per day with zooming and weekend' with 'turning series on/off #345
