ChartJS + drillDown

[fmezini]

Hello people,

I'm trying to do a drill down in interactive ChartJS and everything works fine, but I need to add a button or link inside a canvas to back to previous graphic.

Is there any way to do this?

Thanks!

[Melloware]

This is not a PF question but a ChartsJS question. I would say try and figure out how to do it with raw ChartsJS: https://www.chartjs.org/

Once you figure out how to do it with raw ChartsJS then using the "Extender" functionality of the PF Component will allow you to do the same thing.

[aryaDev]

Hi Melloware,

I have a similar problem with the chartJS integration. I want to change the format of the y-axis in the bar chart component. In ChartJS this can be done by setting a callable function to the ticks element. But in the primefaces 7 version there is no possibility to set that callable function in the java code.

From your comment I understand, that I can get the functionality by setting the extender. Can you give me examples, how the function should be which is called by the extender? At the moment I get the function called, but don't know how to implement the function to change the y-axis labels.

Thank you in advance

[Melloware]

For examples using the extender see my solution here: https://stackoverflow.com/questions/557 ... primefaces

Here is an advanced example where I do exactly what you want and call a function to override the ticks.

Code: Select all

//This executes right before painting the line chart
function chartExtender() {
   var tickColor = "#666";
   var gridlineColor = "rgba(0,0,0,0.1)";
   
   if (!this.cfg.config.options) {
      this.cfg.config.options = {}
   }

   //copy the config options into a variable
   var options = $.extend(true, {}, this.cfg.config.options);

   options = {
      //remove the legend
      legend: {
         display: false
      },
      tooltips: {
         callbacks: {
            //add MW to label in tooltip
            label: function (tooltipItem, data) {
               return " " + tooltipItem.yLabel + " MW";
            }
         }
      },
      scales: {
         xAxes: [{
            display: true,
            type: "time",
            time: {
               parser: timeFormat,
               tooltipFormat: timeFormat,
               unit: 'hour',
               displayFormats: {
                  'hour': timeFormat
               }
            },
            gridLines: {
               color: gridlineColor
            },
            ticks: {
               fontColor: tickColor
            }
         }],
         yAxes: [{
            display: true,
            scaleLabel: {
               display: true,
               labelString: 'Capacity Available',
               fontSize: 13,
               fontColor: tickColor
            },
            ticks: {
               // add MW to y axis label
               callback: function (value, index, values) {
                  return value + " MW";
               },
               fontColor: tickColor
            },
            gridLines: {
               color: gridlineColor
            }
         }]
      }
   };

   //merge all options into the main chart options
   $.extend(true, this.cfg.config.options, options);
};