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

[ryildiz]

HighChart and HighStock jquery chart libraries can be used with primefaces.
I used it and it's better than jqplot.

[pescamillam]

@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]

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]

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

[dovlex]

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

[pescamillam]

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

[dovlex]

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]

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

[dovlex]

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]

Hi pescamillam

Perfect!
Thank you! Helped me a lot!