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

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

28 Sep 2012, 09:09

HighChart and HighStock jquery chart libraries can be used with primefaces.
I used it and it's better than jqplot. ;)
Ramazan YILDIZ
Senior Software Developer Engineer
Netas RnD
ramazangsu[at]gmail.com

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

02 Oct 2012, 15:26

marcose wrote:@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'}).
Yes, I confirm you that I use key.getTime() because it doesn't work with dates but using long the "renderer:$.jqplot.DateAxisRenderer" converts it into a Date format.

BTW I made some changes on my code to make it work with zoom and values are now amounts of money

xhtml:

Code: Select all

<td align="center">
	<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:{
					min:null,
					max:null,
					autoscale:true,
					numberTicks:null,
					pad:1.0,
					tickInterval:'1 days',
					renderer:$.jqplot.DateAxisRenderer, 
					rendererOptions: {
						tickInset: 0
					},
					tickRenderer: $.jqplot.CanvasAxisTickRenderer,
					tickOptions:{ 
						fontSize:'10pt',
						fontFamily:'Tahoma',
						angle:-40
					}
				},
				yaxis:{
					rendererOptions:{
						tickRenderer:$.jqplot.CanvasAxisTickRenderer
					},
					tickOptions:{
						fontSize:'10pt', 
						fontFamily:'Tahoma', 
						formatString: "$%'d",
						angle:30
					}
				}
			};
			this.cfg.highlighter = {
				show: true,
				tooltipOffset: 2
			}
		}
	</script>
</td>


bean:

Code: Select all

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);
Are you sure you added the line "<script type="text/javascript" src="../src/plugins/jqplot.dateAxisRenderer.min.js"></script>" and you have the js in the path?

dovlex
Posts: 40
Joined: 26 Feb 2010, 06:38

08 Oct 2012, 22:54

Hi pescamillam,

I got it working as well. However, my chart works only on Firefox. Did you try it on Safari and Chrome?

Regards,
Vladimir

dovlex
Posts: 40
Joined: 26 Feb 2010, 06:38

08 Oct 2012, 23:36

Ok, there is a workaround - provide minY value and then it works in all browsers.

dovlex
Posts: 40
Joined: 26 Feb 2010, 06:38

08 Oct 2012, 23:53

But how would one customize individual line series, turn data points marker off, change line colors and so on?

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

09 Oct 2012, 16:15

I recommend you downloading the documentation http://www.primefaces.org/documentation.html those options are covered in there and are really easy to implement, btw, I have it working on ie, chrome and firefox without using the minx
Last edited by pescamillam on 09 Oct 2012, 16:20, edited 1 time in total.

dovlex
Posts: 40
Joined: 26 Feb 2010, 06:38

09 Oct 2012, 16:20

Yeah, yeah I know! But how would you do it in extender or any other way? I tried unsuccessfully. Primefaces uses these line and marker defaults for each series and I am not sure how to overwrite them :-(

ybendek
Posts: 102
Joined: 05 Aug 2011, 17:52

09 Oct 2012, 17:42

Hi Guys...

First of all... thank you for this post.. it was very helpful to integrate datetime data into my charts.

I have a question, anyone trying to use a localized timezone data in these charts?

As recommended in the original issue log (http://code.google.com/p/primefaces/iss ... %20Summary) I'm trying to use it like this:

<p:barChart>
<f:convertDateTime pattern="dd.MM.yyyy" timeZone="ACT" type="both"/>
</p:barChart>

It's assumed that parameter timezone is used to convert a localized data, however it's not used in the final result.... :S
Last edited by ybendek on 09 Oct 2012, 21:09, edited 1 time in total.

dovlex
Posts: 40
Joined: 26 Feb 2010, 06:38

09 Oct 2012, 18:36

Replying to myself. There is an attribute showMarkers that is per line chart not per series. This attribute should be made per series but hey at least we can control it on/off. Very useful is seriesDefaults http://www.jqplot.com/docs/files/jqPlotOptions-txt.html property.

tayanefernandes
Posts: 1
Joined: 02 Nov 2012, 21:06

02 Nov 2012, 21:15

Hi pescamillam

Perfect!
Thank you! Helped me a lot! :D

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 9 guests