jqplot is not zooming properly with date axis renderer

Question

I'm using jqPlot (version 1.0.2, I believe -- the 7/25/12 release) to render a day's worth of solar energy production for a variety of values. When I zoom into a portion of the day, quite often the wrong area of the chart is rendered.

Here are the plot options --

    var plotOptions = {
    series: [{ showMarker:false} ],
    axes: {
        xaxis:{
            renderer:jQuery.jqplot.DateAxisRenderer,
            tickOptions:{
                formatString:'%R'
            },
            min: data[0].time * 1000,
            max: data[data.length - 1].time * 1000
        },
        yaxis: {
            tickOptions: {
                formatString: '%.3f'
            }
        }
    },
    highlighter: {
        show : true,
        sizeAdjust: 7.5
    },
    cursor: {
        show : true,
        zoom: true,
        showToolTip: false
    }
};

The data are 1 minute samples of the entire electrical system, with the current default value being the AC current on one phase leg (standard North American electrical system -- 120/240 volt AC power). There are typically 1,440 samples, one for each minute of the day.

What I see happen is I'll select a region, typically 4 or 6 hours, and the wrong part of the data is being zoomed. For example, if I select midnight to 8am, I'll see 4am to 8am (or perhaps 9am, if I zoom a little past 8am) zoomed instead. This is fairly consistent -- the second half of the range being displayed -- but I also see instances where there's no rhyme or reason to what shows up, and the values may be zoomed in so close I can't tell what's what.

I've tried to steal heavily from the examples, but to no avail. I've also tried limiting the size of my data set and that doesn't much seem to help.

UPDATE: I tried switching from using raw timestamps to using Date() objects, to no avail ...

Since I started having issues with zooming with jqplot I switched to [flot](http://people.iola.dk/olau/flot/examples/). Even tough jqplot is visually richer, flot proved to be more reliable. — Thomas C. G. de Vilhena, Aug 05 '12 at 13:11
Thomas -- that's what it looks like I'm going to have to do. Aside from the "no answers yet!" issue, I'm guessing flot would have been the better choice. If I give up in disgust, I promise I'll accept "Dump jqPlot!" as an answer from you ;) — Julie in Austin, Aug 05 '12 at 21:59
@Thomas -- I've been looking around stackoverflow to see how many other jqPlot issues there are, and there are a surprisingly large number of questions with no answers. So ... it looks like switching to flot is the correct answer ... — Julie in Austin, Aug 09 '12 at 10:36
Since nobody provided an answer I better turn my comment into one ;) — Thomas C. G. de Vilhena, Aug 10 '12 at 01:27

score 2 · Accepted Answer · answered Oct 03 '12 at 16:06

I ran in to this same issue. I couldn't switch to Flot, although it is a good package also. I did some digging and found this post on the jqplot-users google group that had the answer.

Here's the short answer. There is a bug in src\plugins\jqplot.dateAxisRenderer.js. The post says the work around is to commment out the following in the dataAxisRenderer.js file

min = new $.jsDate(min);
min = min.getTime() + min.getUtcOffset();

HOWEVER, I'm not sure if

min = new $.jsDate(min);
min = min.getTime();

is necessary or not, removing this might be a bad idea. I haven't noticed anything off but, I think we could keep those lines and just remove min.getUtcOffset().

That was it! I use the minimized JS file, so I had to search for getUtcOffset() in jqplot.dateAxisRenderer.js, split the line, then comment out the buggy code to test the fix. — Julie in Austin, Apr 21 '13 at 03:50

score 1 · Answer 2 · edited May 23 '17 at 12:20

Not trying to underestimate jqPlot, which is a great plug-in for building visually appealing graphs and charts, I suggest you also take a look at Flot for building graphs with zooming functionality. I have tried both and found Flot to be more reliable for this kind of requirement.

A few tips for configuring DateTime axis while using Flot (from Flot Reference):

The time series support in Flot is based on Javascript timestamps, and you can see a timestamp like this:

alert((new Date()).getTime())

In .NET you can get an appropriate timestamp with:

public static int GetJavascriptTimestamp(System.DateTime input)
{
    System.TimeSpan span = new System.TimeSpan(System.DateTime.Parse("1/1/1970").Ticks);
    System.DateTime time = input.Subtract(span);
    return (long)(time.Ticks / 10000);
}

And some time formats are discussed in this SO question.

jqplot is not zooming properly with date axis renderer

2 Answers2