Primefaces & jqplot - Displaying dates on an axis

问题

I am trying to use the extender atttribute on a line chart in PrimeFaces 3.4. I need to use extender to format the x-axis with date/time values. Doing this without extender is not an option as there are too many data points and the labels simply overwrite if I use the default PF lineChart attributes. When I setup the the code as shown below, I get an x-axis with no values displayed; all I can see is the x-axis. See pic for more details. How can I set this up so that the x-axis displays time in hh:mm format ?

XHTML Code

<script type="text/javascript" src="#{request.contextPath}/js/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="#{request.contextPath}/js/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script type="text/javascript">
 function loginRateChartExt() {
  this.cfg.axes = { 
   yaxis: {
    numberTicks: 10,
    label: 'Logins per minute ->',
    labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
    labelOptions: { fontFamily: 'Verdana', fontSize: '8pt' },
   },
   xaxis: { 
    renderer: $.jqplot.DateAxisRenderer,
    rendererOptions: { tickRenderer:$.jqplot.CanvasAxisTickRenderer },
    tickOptions: { formatString:'%H:%M' },
    label: 'Time of day ->',
    labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
    labelOptions: { fontFamily: 'Verdana', fontSize: '8pt' }
   }
  }; 
 }
</script>
<p:lineChart id="loginRateChart" value="#{loginRateBean.chartModel}" extender="loginRateChartExt" />

Bean Code

for(int i = 0; i < workerBean.getSize(); i++) { // worker bean has the data
  for (String key : workerBean.getValueKeys()) { // each key refers to a series
    // chartSeriesMap is a map that contains all the series
    // workerBean.getKeyAt(i) returns Date
    // workerBean.getValueAt(i, key) returns a Number
    chartSeriesMap.get(key).set(workerBean.getKeyAt(i), workerBean.getValueAt(i, key).floatValue());
  }
}
for (String string : workerBean.getValueKeys()) {
 chartModel.addSeries(chartSeriesMap.get(string));
}

回答1:

To achieve it you must set the date values as LONG, using .getTime();

serie.set(registro.getDataAfericao().getTime(), registro.getValor());

For more information: http://forum.primefaces.org/viewtopic.php?f=3&t=23891&start=10

回答2:

Adding the min attribute to the extender seems to fix the problem with the display. I saw this on another question on stackoverflow (link below). Anybody know if this is a workaround to this ?

jqPlot DateAxis tickInterval not working

来源：https://stackoverflow.com/questions/12642507/primefaces-jqplot-displaying-dates-on-an-axis

标签

jsf

primefaces

jqplot