如何在xaxis上使用Flot的选择图随时间变化？

Question

UPDATE: here is a fiddle to demonstrate: http://jsfiddle.net/MsybN/1/

I am using Flot's Selection graph: http://www.flotcharts.org/flot/examples/selection/index.html

I use time as the xaxis, but when I drag to zoom in to a smaller time interval the graph goes blank. In the working examples the xaxis is time based but in years, so numerically it is easy to plot (ie 1994.5 is half way through 1994).

I have month year on my xaxis such as: 'Jul 2012', 'Jan 2013', 'Jul 2013' and so on in 6 month intervals. I am using it in conjuntion with the crosshair plugin and the time plugin.

The zooming wont work. It get's the milli sec values correctly but cant set the graph to them. Code below, can anyone help?

imported scripts: jquery.flot.js jquery.flot.time.js jquery.flot.crosshair.js jquery.flot.selection.js

$(function() {



    //define datasets
    var datasets = {
            "blah": {
                label: "blah",
                key: "blah",
                data: []
            }, //etc
    }; 

    $.each(datasets, function(i, item) {    
            item.data.push([(time*1000), datapoints]);
    });

    // 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;
    });

    var plot;

    var options = {
            xaxis: {
                timezone: "browser",
                mode: "time"
            }, series: {
                lines: {
                    show: true
                }
            }, crosshair: {
                mode: "x"
            }, grid: {
                hoverable: true,
                autoHighlight: false
            }, selection: {
                mode: "x"
            }
        };

    function plotAccordingToChoices() {

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

        if (data.length > 0) {
            plot = $.plot("#placeholder", data, options);
        }
    }

    plotAccordingToChoices();


    var placeholder = $("#placeholder");

    placeholder.bind("plotselected", function (event, ranges) {

        var from = Math.ceil(ranges.xaxis.from / 1000);
        var to = Math.ceil(ranges.xaxis.to / 1000);

//THIS IS WHERE IT BREAKS


        plot = $.plot(placeholder, datasets, $.extend(true, {}, options, {
            xaxis: {
                min: from,
                max: to
            }
        }));
    });
});

</script>

Answer 1

(Updated based on solving the problems in the Fiddle)

There are three problems:

1. The main problem is that you're not using the same code to re-plot in the plotselected callback as you do to plot originally. The plotAccordingToChoices function builds a new array containing the data series from the datasets object. The plotselected callback simply passes in 'datasets' itself, which is invalid.

   This was difficult to see in your original code snippet, since you omitted those lines.

2. As mentioned before, you're incorrectly dividing 'from' and 'to' by 1000; you should use the range values as-is.

3. The crosshair doesn't work because updateLegend is undefined in your plothover callback. That fails repeatedly as you move the mouse across the plot, blocking the crosshair.

I've updated the Fiddle to demonstrate.