Board index JavaServer Faces General Line Chart Zoom is not feasible when X-Axis is of date type

Line Chart Zoom is not feasible when X-Axis is of date type

Components, Ajax Framework, Utilities and More.


Posts: 33
Location: Kurtkoy/Istanbul

Hi,

I want to plot a Line Chart: Y-Axis has numeric values and X-Axis has Date Values.
As of Primefaces 3.2 it is possible to plot Date type as X-Axis data. However when we try to do zoom, While Y-Axis numeric values are
being zoomed(scaled), X-Axis Date values are not Scaled.


E.g. Like the one below:
http://www.jfree.org/jfreechart/images/DeviationRendererDemo2.png
[img]D:\Users\ryildiz\Desktop\canvas.png[/img]

Any comment will be appreciated,
thanks in advance.
Ramazan YILDIZ
Senior Software Developer Engineer
Netas RnD
ramazangsu[at]gmail.com


Posts: 33
Location: Kurtkoy/Istanbul

I think Primefaces and JQplot integrations javascript stack, handles/scales only the numeric values when doing zoom. And a Date Value scaling script code is lacking in the stack.

I hope i am wrong with this :)
Ramazan YILDIZ
Senior Software Developer Engineer
Netas RnD
ramazangsu[at]gmail.com


Posts: 15050
Location: Cybertron

3.4 supports dates on axis via converter.
PrimeFaces Lead


Posts: 33
Location: Kurtkoy/Istanbul

Hi Cagatay Abi,

Would you please give a code snippet regarding "dates on axis via converter".

That will be very appreciated. Or a demo code on the showcase regarding this issue
would be surely perfect and reflects the power of Primefaces.

Thanks in advances.
Ramazan YILDIZ
Senior Software Developer Engineer
Netas RnD
ramazangsu[at]gmail.com


Posts: 33
Location: Kurtkoy/Istanbul

i mean with zoom enabled(scaling dates when zoomed).
Ramazan YILDIZ
Senior Software Developer Engineer
Netas RnD
ramazangsu[at]gmail.com

sudheer User avatar
PrimeFaces Core Developer

Posts: 3140
Location: India,chennai
Don't know how its working in the current build 3.4.Please check this http://code.google.com/p/primefaces/issues/detail?id=2180
PrimeFaces 5.0 | PFExt 2.0.0 | Mojarra 2.2
PFExtensions Book: http://www.packtpub.com/learning-primef ... pment/book
PFBlueprints: https://www.packtpub.com/primefaces-blueprints/book/
___________________
Sudheer Jonna


Posts: 33
Location: Kurtkoy/Istanbul

Thanks Sudheer,

Your link is useful, in Primefaces3.4 Date value on axis is achieved,
However scaling over Date values was not clear to me.
Like it's seen in this Demo of Jqplot, Date axis is being scaled from initially 2 months interval, up to 1 day interval precision:
http://www.jqplot.com/tests/zooming.php

I couldn't achieve this with Primefaces integration. I need to implement a demo like this one, but scaling up to 1 minute precision, beginning from 1 month lets say! This demo gives me a hope to achieve scale on Date axis. I think that Cagatay Abi(Optimus prime) is putting the finger on this with his comment.
But still i don't feel that i can achieve it. I'm gonna share it with you on this thread. Up to that, if somebody can provide a code snippet, i''ll be glad :D
thanks in advance.
Ramazan YILDIZ
Senior Software Developer Engineer
Netas RnD
ramazangsu[at]gmail.com


Posts: 33
Location: Kurtkoy/Istanbul

By the way, as far as i understand, JQplot achives Date axis scale with jqplot.dateAxisRenderer.min.js. I don't know if it's integrated into Primefaces.
Ramazan YILDIZ
Senior Software Developer Engineer
Netas RnD
ramazangsu[at]gmail.com


Posts: 3
I actually made X-Axis of date type work with zoom, I just needed to add the jqplot.dateAxisRenderer.min.js in my sources and make some "fixes" to make my code work as expected

JSF code:
<p:lineChart id="linear" value="#{cashBean.linearModel}" legendPosition="ne" animate="true" widgetVar="chart" zoom="true" 
    title="#{cashBean.linearModelTitle}" style="height:280px; width:480px" extender="ext2"/>
<script type="text/javascript" src="../src/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script>
   function ext2() {
      //this = chart widget instance
      //this.cfg = options
      this.cfg.axes = {
         xaxis:{
            renderer:$.jqplot.DateAxisRenderer,
               rendererOptions:{
               tickRenderer:$.jqplot.CanvasAxisTickRenderer
               },
               tickOptions:{
                  fontSize:'10pt',
                  fontFamily:'Tahoma',
                  angle:-40
               }
            },
         yaxis:{
            rendererOptions:{
            tickRenderer:$.jqplot.CanvasAxisTickRenderer},
            tickOptions:{
            fontSize:'10pt',
            fontFamily:'Tahoma',
            angle:30
            }
         }
      };
   }
</script>


Bean:
public void showAccountEvolution() {
      Evolution evolution = cashBean.getAccountEvolution(selectedTimeLineCurrency, selectedTimeLineCia, selectedTimeLineBic, selectedTimeLineAccount);
      linearModel = new CartesianChartModel();
      LineChartSeries series1 = new LineChartSeries(); 
        series1.setLabel(evolution.getTag());
        Map<Object, Number> data = getShowedEvolutionData(evolution.getEvolution());
        TreeSet<Date> tree = new TreeSet<Date>();
        for (Object lineChartSeries : data.keySet()) {
           Date key = (Date)lineChartSeries;
           tree.add(key);
      }
        Iterator<Date> it = tree.iterator();
        while (it.hasNext()) {
           Date key = it.next();
           Number value = data.get(key);
           series1.set(key.getTime(), value);
        }
        linearModel.addSeries(series1);
}


I hope this helps to everyone who needs it

Note: you can get the dateAxisRenderer plugin here http://svnplot.googlecode.com/svn-histo ... rer.min.js


Posts: 3
@pescamillam,
Thank you very much for posting the sample code. I had a question on what you had posted.
Could you please confirm that when you build the series object in the bean, the key to the values you add is key.getTime() and not key (i.e. a long and not a Date) ?
Can jqplot work with epoch time and format it as a date ?
I tried following what you had suggested, but I am seeing nothing on my x-axis !!!! I have used different options though (numberTicks & tickOptions:{formatString:'%H:%M'}).

Next

Return to General