Vaadin Charts ChartSelectionListener.onSelection() not fired anymore since

Flow
1

Hi Vaadin-Team,

in my code I added a ChartSelectionListener to a chart. With v2.0 the method ChartSelectionListener.onSelection() is called on every zoom event.
With v2.1 this method (in my case) isn’t called anymore (I tried v2.1.2 and v2.1.3), so I had to fallback to v2.0.
Is this a known bug? Any fix in reach?

Cheers
Maarten

2

Hi Maarten,

I’m sorry to hear that you have faced problems with the Vaadin Charts. Anyway, that is not a known issue. I just tried following code with v2.0.0 and v2.1.3 and it did worked with both versions.

chart.addChartSelectionListener(new ChartSelectionListener() { @Override public void onSelection(ChartSelectionEvent chartSelectionEvent) { Double start = chartSelectionEvent.getSelectionStart(); Double end = chartSelectionEvent.getSelectionEnd(); Notification.show("Select " + start + " - " + end); } }); Did you recompiled the widgetsets after changing the version? Could you provide a code example where the problem occurs?

BR,
Jarno

3

Hi Jarno,

thank you for your quick answer.
This problem was also mentioned some months ago here: https://vaadin.com/forum/#!/thread/9406556/10653450

My project uses the vaadin mvn artefact which recompiles the widgetset on mvn clean/mvn install. So the widgetset should be no problem. However it runs as a portlet in a liferay context, maybe an additional complication.

Here is a fragment of our code, nothing special here, I think. With v2.1.3 the zooming still works, but the ChartSelectionListener isn’t called anymore, the zooming seems to be the result of some internal functionality of the chart widget.

As we can use charts 2.0 as a fallback at the moment, this problem has not the highest priority to us. But if I have some time, I can try to create a small project with the error.

cheers,
Maarten

...
detailChart = createDetailChart();
layout.addComponent(detailChart);

masterChart = createMasterChart();
layout.addComponent(masterChart);

ChartSelectionListener chartSelectionListener = new ChartSelectionListener() {
    @Override
    public void onSelection(ChartSelectionEvent event) {
        Component comp = event.getComponent();

        long start = event.getSelectionStart().longValue();
        long ende = event.getSelectionEnd().longValue();

        Date startZoom = Util.toServerDate(start);
        Date endeZoom = Util.toServerDate(ende);

        zoomCharts(startZoom, endeZoom);
    }
};

masterChart.addChartSelectionListener(chartSelectionListener);
detailChart.addChartSelectionListener(chartSelectionListener);
...

private Chart createMasterChart() {
    Chart mChart = new Chart();
    mChart.setHeight("100px");
    mChart.setWidth("100%");

    Configuration configuration = mChart.getConfiguration();

    configuration.getChart().setType(ChartType.LINE);
    configuration.getChart().setZoomType(ZoomType.X);

    configuration.getChart().setReflow(false);
    configuration.getChart().setBorderWidth(0);
    configuration.getChart().setBackgroundColor(null);
    configuration.getChart().setMarginLeft(50);
    configuration.getChart().setMarginRight(20);

    XAxis xAxis = configuration.getxAxis();
    xAxis.setType(AxisType.DATETIME);
    Labels xlab = xAxis.getLabels();
    xlab.setFormatter(getXFormatter(true));
    xAxis.setShowLastTickLabel(true);
    xAxis.setTitle(new Title(""));

    xAxis.setMinRange(1 * DAY_IN_MILLIS);

    configuration.getTitle().setText("");
    configuration.getTooltip().setEnabled(false);
    configuration.getLegend().setEnabled(false);

    PlotOptionsLine globalPlotOptions = new PlotOptionsLine();
    globalPlotOptions.setLineWidth(1);
    globalPlotOptions.setShadow(false);
    State hover = new State();
    hover.setLineWidth(1);
    States states = new States();
    states.setHover(hover);
    globalPlotOptions.setStates(states);
    globalPlotOptions.setEnableMouseTracking(false);
    globalPlotOptions.setAnimation(false);
    configuration.setPlotOptions(globalPlotOptions);

    PlotOptionsLine seriesPlotOptions = new PlotOptionsLine();
    seriesPlotOptions.setMarker(new Marker(false));

    YAxis yAxis = mChart.getConfiguration().getyAxis();
    yAxis.setTitle("");
    yAxis.getLabels().setEnabled(false);

    refreshMaster(mChart, seriesPlotOptions, false);

    mChart.drawChart(configuration);

    return mChart;
}
4

Hi Maarten,

Are you still facing the issue mentioned here? I have tested the example you pasted here and it works for me. The selection listener is called as it should. (I assume the method refreshMaster(…) only sets the data to the chart.)

By the description of the problem, I would guess that registering the event handler on client side fails for some reason. Can you see any exception on browser console?

BR,
Jarno