How to display timestamped data with PrimeFaces and ChartJs? - primefaces

Question

Since the public 7.0 release of PrimeFaces includes ChartJs, I thought I'd give it a try.
It works fine, however so far I have not been able to properly display data with values changing over time in a line chart.
chart.js has cartesian time axes for this purpose, however in PrimeFaces , only CartesianLinearAxes is available.
Feeding date objects (instead of String labels) to ChartData simply results in no x-axis being drawn.
Am I missing something or did they just skip this functionality when including chart.js in Primefaces?

Answer 1

OK great questions.
First, PF knows they did not implement time yet but there is an open ticket: https://github.com/primefaces/primefaces/issues/4564
Second, have no fear you can use the Extender feature to make it work. Here is an example we used.
In your Java model for your chart set the Extender feature on.
chartModel.setExtender("chartExtender");
In your XHTML add this JavaScript code function to match when you set in #1 Java bean.
function chartExtender() {
//copy the config options into a variable
var options = $.extend(true, {}, this.cfg.config);
options = {
//remove the legend
legend: {
display: false
},
scales: {
xAxes: [{
display: true,
type: "time",
time: {
parser: 'h:mm:ss a',
tooltipFormat: 'h:mm:ss a',
unit: 'hour',
displayFormats: {
'hour': 'h:mm:ss a'
}
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Your Y Axis',
fontSize: 13,
}
}]
}
};
//merge all options into the main chart options
$.extend(true, this.cfg.config, options);
};
You can see the different time formats available from ChartsJS using MomentJS.

Answer 2

Just a complement to do the extender works, use this.cfg.config.options = {...
for exemple:
function extName() {
this.cfg.config.options = {
legend: {
display: false
}
};
};