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

Components, Ajax Framework, Utilities and More.
ryildiz
Posts: 33
Joined: 19 Jul 2012, 16:43
Location: Kurtkoy/Istanbul
Contact:

06 Aug 2012, 15:47

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/ ... rDemo2.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

ryildiz
Posts: 33
Joined: 19 Jul 2012, 16:43
Location: Kurtkoy/Istanbul
Contact:

06 Aug 2012, 15:50

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

User avatar
optimus.prime
Prime
Posts: 17586
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

06 Aug 2012, 16:09

3.4 supports dates on axis via converter.

ryildiz
Posts: 33
Joined: 19 Jul 2012, 16:43
Location: Kurtkoy/Istanbul
Contact:

06 Aug 2012, 16:25

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

ryildiz
Posts: 33
Joined: 19 Jul 2012, 16:43
Location: Kurtkoy/Istanbul
Contact:

06 Aug 2012, 16:26

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

User avatar
sudheer
PrimeFaces Core Developer
Posts: 4251
Joined: 16 Oct 2011, 19:19
Location: Singapore

06 Aug 2012, 17:41

Don't know how its working in the current build 3.4.Please check this http://code.google.com/p/primefaces/iss ... il?id=2180
Author,Speaker
https://twitter.com/sudheerjonna
Github: https://github.com/sudheerj
Website http://sudheerjonna.com/

___________________
Sudheer Jonna

ryildiz
Posts: 33
Joined: 19 Jul 2012, 16:43
Location: Kurtkoy/Istanbul
Contact:

06 Aug 2012, 17:58

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

ryildiz
Posts: 33
Joined: 19 Jul 2012, 16:43
Location: Kurtkoy/Istanbul
Contact:

06 Aug 2012, 18:04

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

pescamillam
Posts: 5
Joined: 21 Sep 2012, 16:56

21 Sep 2012, 17:02

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:

Code: Select all

<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:

Code: Select all

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

marcose
Posts: 3
Joined: 24 Aug 2012, 21:16

28 Sep 2012, 06:31

@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'}).

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 6 guests