Date axis in linechart using primefaces and jqplot

Question

I've tried to show a linechart with primefaces and jqplot. But I don't get it. I have this code in my bean:

CartesianChartModel graphic = new CartesianChartModel(); 
LineChartSeries series = new LineChartSeries();
DateFormat dateFormat = new SimpleDateFormat("mm/dd/yy"); 
String date1 = "01/10/13";
String date2= "01/15/13";
String date3= "02/20/13";

p=dateFormat.parse(date1);
series.set(p.getTime(), 10);
p=dateFormat.parse(date2);
series.set(p.getTime(), 20);
p=dateFormat.parse(date3);
series.set(p.getTime(), 15);

graphic.addSeries(series);

And I have this code in my extender function:

function extender(){
this.cfg.axes = {
   xaxis :{
      renderer:$.jqplot.DateAxisRenderer, 
      rendererOptions : {
             tickRenderer:$.jqplot.CanvasAxisTickRenderer
      },
      tickOptions : { 
           fontSize:'10pt',
           fontFamily:'Tahoma', 
           angle:-40,
           formatString:'%D'
       }

    };

    this.cfg.axes.xaxis.ticks = this.cfg.categories;
}

PROBLEM

It doesn't work properly because I get date3 before the others and the date is not shown in the x axis.

I've just tried to do like PrimeFaces - customise Date Chart. I've changed the time format and I've added the tickInterval element. With these changes I get an empty graphic. And if I remove the tickInterval element I get on the x axis something like that on each tick 111011000001110111000000000-%y

Answer 1

Ok..I am not sure if you still need this, but I was facing a similar problem and this is how I solved it. I also needed to zoom into the dates.

Firstly, primefaces does not contain DateAxisRenderer . You need to download it and add it seperately in your code. You can get it here -

DateAxisRenderer.js

And then add it into your code like so -

<h:outputScript library="js/plugins" name="jqplot.dateAxisRenderer.min.js" target="head" />

Place the file under webapp/js/plugins ..this might ofcourse vary between projects...

Then send the date as long from the backing bean and remove the following line from your javascript -

this.cfg.axes.xaxis.ticks = this.cfg.categories;

It should work properly then.

Answer 2

I've solved my problem creating a new proyect like that and it works. I don't know what was the problem. But I have a new problem. I've just tried to plot a range of data between 01/01/2013 and 01/03/2013 and I only get data in January. It means, I get a plot with the data in January and February printing in the same date, in January.

Answer 3

You have to set the X axis value using epoch millis. I had to figure it out.