Contact us
Get started
Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Calling javascript synchronously by Enver Haase, 2 weeks ago
Recent Posts
Vaadin Forum1. Vaadin Flow - Java

Chart drill down eventListener

Dave Branning
6 years ago May 10, 2016 7:48am

Is there anyway to add an event listner for drill down events on Vaadin charts? I can see there is the method addChartDrillupListener(ChartDrillupListener) but no corresponding addChartDrilldownListener.

We basically need to know when a user drill's down, and to get the series data for the "drilled down" level. The closest I can get is:

chart.addPointClickListener(event -> {

            final DataSeries ds = (DataSeries) event.getSeries();
            final DataSeriesItem dataSeriesItem2 = ds.get(event.getPointIndex());

            System.out.println(ds);
            System.out.println(dataSeriesItem2);

            System.out.println(dataSeriesItem2.getX());
            System.out.println(dataSeriesItem2.getY());
        });

Unfortunately this only gives me the top level data series, and I can see no way of getting the child series from the parent series.

In addition, I would like to change the color of the bars (Column with Multilevel Drilldown). Is any of this possible?

Thanks

dmitrii rogozin
6 years ago May 10, 2016 12:12pm

I think you can do it like that:

chart.setDrilldownCallback(new DrilldownCallback() {
  @Override public Series handleDrilldown(DrilldownEvent event) {
  return getPointDrilldown(event.getItem());
  }
});

In the DrilldownEvent you can get series on drilldown appeared.

+1
Dave Branning
6 years ago May 11, 2016 12:12pm

Hi Dmitrii,

Thanks for your reply, I'd seen that you can use a callback via. an async drilldown and grab the data there which solved 1 of the  problems.

The other problem is that I can't change the color of a column when it's clicked. I've got the following code, but it doesn't change the colour of the clicked on column, and I see a "data is undefined" error in the js console:

chart.addPointClickListener(event -> {
            final DataSeries series = (DataSeries) event.getSeries();
            final DataSeriesItem item = series.get(event.getPointIndex());

            // change the colour
            item.setColor(SolidColor.CORAL);
            
            // let the chart know it's updated
            series.setConfiguration(chart.getConfiguration());
            series.update(item);
        });

Normally this should work in Highcharts, is this a bug in the Vaadin add-on library?

I also tried:

chart.addPointClickListener(event -> {
            final DataSeries series = (DataSeries) event.getSeries();
            final DataSeriesItem item = series.get(event.getPointIndex());

            item.setColor(SolidColor.CORAL);
            chart.drawChart();
        });

But in a multi-level drilldown chart, this just resets the chart to the top level.

Any help would be greatly appreciated.

Thanks