CODEWITHSUNDEEP
jsfdatechartsprimefacesjqplot
skombijohn
skombijohn

Reputation: 405

Problems with jqPlot / Primefaces extender and Date values

so here's the thing. I've got plenty of persisted "Snapshots" containing a java.sql.Timestamp and (for the sake of simplicity) an int as data.

I have a JSF page containing a primefaces 3.4.1 <p:lineChart> and behind that a ManagedBean that contains the model for the chart.

Let's say I then select a time range and fetch all the Snapshots in between that range. and populate the data model for the chart with all the Timestamps (x-axis) and all the integers (y-axis).

So what i do while populating is:

data = new HashMap<Object, Number>();        
List<Snapshot> allSnapshots = persistenceService.getAllSnapshots();
for(int i = 0; i < allSnapshots.size(); i++) {
    Snapshot s = allSnapshots.get(i);
    data.put(new Date(s.getTimestamp().getTime()), s.getData());
}
chartModel.getSeries().get(0).setData(data);

(Note: in the example code I just fetch all Snapshots, as I quickly just generated a hundred or so).

I set up the chart like this:

<p:lineChart id="chart" value="#{backingBean.chartModel}" xaxisAngle="-90">
   <f:convertDateTime pattern="HH:mm:ss"/>
</p:lineChart>

It works ok but when the model contains a hundred data points, the xaxis is just overcrowded with all the tickmarks.

What I then did is to use the primefaces' option to use a jqplot extender function. So I just add extender="extend" as attribute for the chart, where extend is the following js function :

function extend() {
      this.cfg.axes = {
          xaxis: {
              renderer: $.jqplot.DateAxisRenderer,
              rendererOptions: { tickRenderer: $.jqplot.CanvasAxisTickRenderer },
              tickOptions: {
                  showGridline: true,
                  formatString: '%H:%M',
                  angle: -90                        
             }         
         }
     }
}

This is the current version of it.. After hours of reading and trial and error, I still cannot get it right, as the following things are just never right:

I am getting a little tired from dealing with this.....maybe I am doing something fundamentally wrong. Otherwise I have no idea why this is so complicated..

Thanks for any advice!

Cheers

Chris

EDIT:

Ok thanks to perissf, I checked this one : https://stackoverflow.com/a/14287971/870122

With the suggested extender I get the following output : http://www.abload.de/img/clipboard01y6sgj.png

(sorry I cannot post the image directly due to new user restrictions :-/ )

As you can see the tick marks are rendered correctly as HH:MM, thats very nice. But as you also can see another quite weird problem occurs:

The given time range of the snapshots is

I collected these as UTC timestamps with System.currentTimeMillis() while the JVM is set to UTC in the glassfish config.

As you notice, the datapoints in the plot are shifted one hour, they start at 14:01, which looks like the values have been auto-converted to my current timezone which is UTC+1. But the leftmost xaxis tick is placed at around the original UTC value at 13:00.

I collect the timestamps UTC as I dont know in which actual timezone the application will be running, but I'd like to display the "translated" time value. So the auto shift to my timezone is a nice feature, but the xaxis scaling is actually not nice and weird.

Any suggestions how I get rid of that ?

Cheers

Chris

EDIT2:

Ok while debugging the rendered page with Firebug I stumbled upon the jqplot internal variables in the plot object, which seem to contain the min and max values for the xaxis. Min is set to the original min UTC value which is around 13:00, and max is set to the shifted UTC+1 value around 14:15.

Somehow the min value is not shifted accordingly to the automatic timezone adjustments.

All other values, that is dataBounds, data itself and so on, are all shifted nicely by one hour.

I opened a issue at Bitbucket jqplot issue tracker

Let's see.

Bye

Chris

Upvotes: 3

Views: 4700

Answers (2)

christophenoel
christophenoel

Reputation: 308

I'm very interested in this fix but the issues on BitBucket are in a restricted area so I cannot access it. So I had myself to try to fix this AxisDateRenderer and fortunately I did :)

So the Primefaces (6.0) chart uses an old version of the JQPlot library. A bug in this version sets the minimum date axis bound being not the first value exactly, but a time older according to the locale time zone of the user browser. For example, if the first value is at 12:00 and your GMT is GMT+1, then the date axis bound minimum will be at 11:00 instead of 12:00 !

The minVale

The following line (in createTicks function) should bed replaced (note the code is written minified below)

ad = ad.getTime() + ad.getUtcOffset();

By the next line:

ad = Math.floor((ad.getTime() - ad.getUtcOffset())/r) * r + ad.getUtcOffset();

Non minified line to replace:

min = min.getTime()  + min.getUtcOffset();

With:

 min = Math.floor((min.getTime() - min.getUtcOffset())/tempti) * tempti + min.getUtcOffset();

Note that I have tried to update the chart.js of Primefaces to an earlier version , but the chart do not work anymore. I will wait for the next update of Primefaces hoping that a newer version is used. I also don't know which version of JQPlot is used in Primefaces 6.0

Upvotes: 0

skombijohn
skombijohn

Reputation: 405

i finally debugged the jqplot renderer and found some lines of code that cause this behaviour.

For anyone interested, please find the bugfix in the comment section here: Bitbucket issue tracker

Thanks for any help

Upvotes: 0

Related Questions