Question

I am creating a flot graph that very closely resemble the StackOverflow reputation graph. There is a small graph that shows a birds-eye level of the data which allows you to select a range and show it, zoomed, on a larger graph. When either graph is hovered, the legend text is updated to reflect the values at that x-position.

There are two problems I am encountering, and there are absolutely no errors to be found in my console, etc…

1: When I select a range on the “zoomer” graph, the larger “detail” graph zooms in properly, but the code that causes the legend text to update when an x-value is hovered stops working. The point Item mouse-overs (which cause a tooltip) still work and the two bits of code are in the same event. Weird.

2: The date format gets thrown out of whack once I zoom in. The dates are reverted to timestamps despite my timeformat being specified (and it actually works on the first plot, before a zoom takes place).

---

I have recorded a short screencast to show the problem in action:

http://www.screenr.com/KUX8

---

I have setup a JSFiddle that shows the date/time formatting issue. For some reason, in that environment, none of the hovering events are working as expected.

http://jsfiddle.net/Kzg3r/2/

---

Am I missing something that would cause these two issues?

---

//doPlot is originally called where ranges=null. This plots the entire universe
//of data on both charts. Once a range is selected, this is called again with
//ranges


var plot=null;
var plot2=null;
var updateLegendTimeout = null;
var latestPosition = null;   
var datasets=null;
var currRange=null;

function doPlot(ranges){
    currRange=ranges;

    clearTimeout(updateLegendTimeout);
    updateLegendTimeout = null;

    var options = { //Options for large graph
        lines: { show: true },
        points: { show: true },
        grid: { hoverable: true, clickable: false, autoHighlight: false, backgroundColor: { colors: ["#fff", "#eee"] }, markings: weekendAreas   },
        xaxis: {mode: 'time', timeformat: "%m/%d", minTickSize: [1, "day"]},
        crosshair: { mode: "x" },
        legend: {
            show: true,
            container: $('#legend'),
            noColumns: 2
        }
    };

    var options2 = {  //options for small zoomer graph
        lines: { show: true },
        points: { show: false },
        grid: { hoverable: true, clickable: true, autoHighlight: false, backgroundColor: { colors: ["#fff", "#eee"] }, markings: weekendAreas   },
        xaxis: {mode: 'time', timeformat: "%m/%d", minTickSize: [1, "month"]},
        crosshair: { mode: "x" },
        selection: { mode: "x" },
        legend: { show: false }
    };    


    if (currRange){ //if there is a range specified, extend options to include it.
        options = $.extend(options, {
            xaxis: { 
                min: currRange.xaxis.from, 
                max: currRange.xaxis.to 
            }
        });

    }

    //Plot Large Graph with (or without) given range
    plot = $.plot($("#placeholder"), datasets,options);


    //plot the zoomer graph, only if it is null (it is set to null before ajax request for new chart)
    if (!plot2) { 
        plot2 = $.plot($("#zoomer"), datasets, options2);


        $("#zoomer").unbind("plotselected").bind("plotselected", function (event, ranges) {

            //unbind/re-bind plotselected event to zoom in when a range is selected
            doPlot(ranges);

        }).unbind("plothover").bind("plothover",  function (event, pos, item) {

            //unbind/re-bind plothover event to to show tooltips and to change legend values
            latestPosition = pos;
            if (!updateLegendTimeout)
                updateLegendTimeout = setTimeout(function(){
                    updateLegend(plot2);
                }, 50);

            if (item) {
                if (previousPoint != item.dataIndex) {
                    previousPoint = item.dataIndex;

                    $("#tooltip").remove();
                    var x = item.datapoint[0].toFixed(2),
                        y = item.datapoint[1].toFixed(2);
                    var text = item.series.label.split(' = ');

                    showTooltip(item.pageX, item.pageY,
                                text[0] + ' ('+y+')');
                }
            }
            else {
                $("#tooltip").remove();
                previousPoint = null;            
            }
        });         
    }

    doBinds();          
}


function doBinds(){
    $("#placeholder").unbind("plothover").bind("plothover",  function (event, pos, item) {
        latestPosition = pos;
        if (!updateLegendTimeout)
            updateLegendTimeout = setTimeout(function(){
                updateLegend(plot);
            }, 50);

        if (item) {
            if (previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;

                $("#tooltip").remove();
                var x = item.datapoint[0].toFixed(2),
                    y = item.datapoint[1].toFixed(2);
                var text = item.series.label.split(' = ');

                showTooltip(item.pageX, item.pageY,
                            text[0] + ' ('+y+')');
            }
        }
        else {
            $("#tooltip").remove();
            previousPoint = null;            
        }    
    });  
}

Answer 1

The issue with the ticks on your x-axis has to do with the way you extend the plot options in the doPlot function if there is a range selected. You need to call jQuery.extend with `true as the first argument so that it does a deep copy. Otherwise when you extend the options object with the x-axis min and max, it overwrites the x-axis object with the mode set to time. Replace that bit with this and it will fix that issue.

    if (currRange){ //if there is a range specified, extend options to include it.
        options = $.extend(true, options, {
            xaxis: { 
                min: currRange.xaxis.from, 
                max: currRange.xaxis.to 
            }
        });

    }

EDIT:

So, your first issue occurs because the legend items are removed and new ones added when the chart is redrawn. You store references to the original legend labels on document ready, but when the chart redraws, these are no longer attached to the DOM. You are updating the labels on those detached elements, and not on the newly created legend labels. Try re-initializing the legends collection when you update the legend like so:

//THIS IS MOST LIKELY WHERE THE PROBLEM IS OCCURRING!!!!
function updateLegend(thePlot) {
    legends = $('.legendLabel');   
    clearTimeout(updateLegendTimeout);
    updateLegendTimeout = null;

    var pos = latestPosition;

    var axes = thePlot.getAxes();
    if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max ||
        pos.y < axes.yaxis.min || pos.y > axes.yaxis.max)
        return;

    var i, j, dataset = thePlot.getData();
    for (i = 0; i < dataset.length; ++i) {
        var series = dataset[i];

        // find the nearest points, x-wise
        for (j = 0; j < series.data.length; ++j)
            if (series.data[j][0] > pos.x)
                break;

        // now interpolate
        var y, p1 = series.data[j - 1], p2 = series.data[j];
        if (p1 == null)
            y = p2[1];
        else if (p2 == null)
            y = p1[1];
        else
            y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]);

        legends.eq(i).text(series.label.replace(/=.*/, "= " + y.toFixed(2)));
    }
}