Discussion :

[in]

Bonjour,

je construit un graphique avec JQPlot.
Je voudrais, selon le nombre de ticks appliquer tel ou tel format ; par exemple si nbTicks > 20 alors angle:-30.

J'ai des boutons (+,-, <, >) qui permettent de zoomer/scroller le graphique (en fait, à chaque clic, je met à jour le tableau "ticks" pour l'axe.

J'arrive à faire fonctionner cela avec un renderer:CategoryAxisRenderer.
Le problème est que je souhaite utiliser un DateAxisRenderer (pour le highlighter principalement) et que là ça ne fonctionne plus.
Enfin ça fonctionne pour l'angle met je perds le formattage de la date.

Le code appelé par les boutons (désolé c'est du JSNI à la base)
displayedTicks est le tableau de ticks que j'affiche

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
private native void updateChartAxis(JavaScriptObject chart, JavaScriptObject displayedTicks) /*-{
 
	if(displayedTicks.length > 16) {
                // font-size et angle sont correctement appliqués
                // par contre par le format
		chart.axes.xaxis.tickOptions={formatString:'%d-%b-%y', fontSize: '6pt', angle:-30};
		chart.axes.yaxis.tickOptions={fontSize: '6pt'};
	} else {
		chart.axes.xaxis.tickOptions={fontSize: '10pt', angle:0};
		chart.axes.yaxis.tickOptions={fontSize: '10pt', angle:0};
	}
 
	chart.axes.xaxis.ticks = displayedTicks;
	chart.axes.yaxis.ticks = displayedTicks;
 
	chart.replot({resetAxes:true});
	//chart.replot();
 
	}-*/;

et le code (raccourci) du graphique :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
public native JavaScriptObject createChart(String id, String chartTitle, JavaScriptObject dataString) /*-{
 
	$wnd.jQuery.jqplot.config.enablePlugins = true;
 
// j'ai également essayé ce genre de truc mais sans succès, ce n'est pas appelé ...
//		$wnd.jQuery.jqplot.postDrawHooks.push(function() {
//	        if(plot) {
//	        	plot.axes.xaxis.tickOptions = {formatString:'%d-%b-%y', angle:-30};
//	        }
//    	});
//		
 
var plot = $wnd.jQuery.jqplot(id, dataString, {
		             title:chartTitle
		              ,legend:{
			       renderer: $wnd.jQuery.jqplot.EnhancedLegendRenderer,
		    	           show: true
		    	           , placement:'outsideGrid'
		    	           , rowSpacing: '0.5em'
		    	           , fontSize: '8pt'
		               }
		               , highlighter: {
				  show: true 
				 , sizeAdjust: 7.5
				 , tooltipAxes:'xy'
				 , formatString:    '<table class="jqplot-highlighter"><tr><td colspan="2"><b>#serieLabel#</b></td></tr><tr><td>Date:</td><td>%s</td></tr><tr><td>End:</td><td>%s</td></tr></table>'
				, useAxesFormatters:true
				, tooltipLocation:'ne' 
			       }
				, cursor:{
		    	    	  //...
		    	        }
		               ,seriesDefaults: {
		    	          //...
		    	       	}
		               ,series:[
	    	               //...
		                 ]
		               , axesDefaults: {
		               		//renderer:$wnd.jQuery.jqplot.CategoryAxisRenderer
		               		renderer:$wnd.jQuery.jqplot.DateAxisRenderer
		               		,tickRenderer: $wnd.jQuery.jqplot.CanvasAxisTickRenderer
		               		,tickOptions:{formatString:'%d-%b-%y'}
		               }  
		});
 
 
		return plot;
	}-*/;

si qqu'un a une idée ?

[in]

bon, a priori, j'ai résolu le problème en forçant le "formatter"
ce qui donne dans ma fonction de mise à jour des axes

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
chart.axes.xaxis.tickOptions={
       // force le formatter de DateAxisRenderer
       formatter:$wnd.jQuery.jqplot.DateTickFormatter 
     , formatString:'%d-%b-%y'
     , fontSize: '6pt', angle:-30
};