[Chartjs]-How to display timestamped data with PrimeFaces and ChartJs?

by

4👍

✅

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.

  1. In your Java model for your chart set the Extender feature on.
chartModel.setExtender("chartExtender");
  1. 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.

1👍

Just a complement to do the extender works, use this.cfg.config.options = {…

for exemple:

function extName() {
    this.cfg.config.options = {
        legend: {
           display: false
        }                    
    };
};

Leave a comment