vaadin charts and click handling

[vaadin-bot]

Originally by franck.lefebure

---

Hi My Vaadin Chart version is 2.1.3 My Vaadin version is 7.5.10 but problem is present with 7.6.4

Trying to implement context menu over Vaadin Chart, I face 2 problems :

• Right Click is not handled (despite ticket https://dev.vaadin.com/ticket/13624)
• Mouse coordinates are wrong (always the top-left of the chart)

These problems can be illustrated with the following UI :

public class TestUI extends UI {

    @Override
    public void init(VaadinRequest request) {

        this.setSizeFull();;
        VerticalLayout layout = new VerticalLayout();
        layout.addComponent(createChart());
        this.setContent(layout);

    }

    public static Chart createChart() {
        Chart chart = new Chart(ChartType.PIE);

        Configuration conf = chart.getConfiguration();

        conf.setTitle("Browser market shares at a specific website, 2010");

        PlotOptionsPie plotOptions = new PlotOptionsPie();
        plotOptions.setCursor(Cursor.POINTER);
        Labels dataLabels = new Labels();
        dataLabels.setEnabled(true);
        dataLabels
                .setFormatter("'<b>'+ this.point.name +'</b>: '+ this.percentage +' %'");
        plotOptions.setDataLabels(dataLabels);
        conf.setPlotOptions(plotOptions);

        final DataSeries series = new DataSeries();
        series.add(new DataSeriesItem("Firefox", 45.0));
        series.add(new DataSeriesItem("IE", 26.8));
        DataSeriesItem chrome = new DataSeriesItem("Chrome", 12.8);
        chrome.setSliced(true);
        chrome.setSelected(true);
        series.add(chrome);
        series.add(new DataSeriesItem("Safari", 8.5));
        series.add(new DataSeriesItem("Opera", 6.2));
        series.add(new DataSeriesItem("Others", 0.7));
        conf.setSeries(series);

        chart.addPointClickListener(new PointClickListener() {

            @Override
            public void onClick(PointClickEvent event) {
                Notification.show("Click: "
                        + series.get(event.getPointIndex()).getName()
                        +", "+event.getAbsoluteX()
                        +", "+event.getAbsoluteY());
            }
        });

        chart.drawChart(conf);

        return chart;
    }

}

---

Imported from https://dev.vaadin.com/ issue #19695

[flefebure]

Hi,

Two years after my original post, I took my courage with both hands to implement this right-click handling / context-menu over vaadin charts.

The problem is that context-menu is also not included in highcharts/highstocks so I got to implement in both layers (this jsfiddle helped me : http://jsfiddle.net/highcharts/c42Ms/ ). My workaround is for Vaadin7 / charts3.2.0 but I imagine it can work with Vaadin8

My patched Vaadin Charts sources are here : https://github.com/flefebure/vaadin-charts-tricks To use them :

      Configuration conf = timeline.getConfiguration();
      conf.setChart(new ChartModel() {
            Boolean catchRightClick = true;
            public Boolean getCatchRightClick() {
                return catchRightClick;
            }
            public void setCatchRightClick(Boolean catchRightClick) {
                this.catchRightClick = catchRightClick;
            }
        });
 ...
  chart.addPointClickListener( new PointClickListener() {
            @Override
            public void onClick(PointClickEvent event) {
                if (event.getButton() != MouseEventDetails.MouseButton.RIGHT) return;
                // open some Vaadin Context Menu....

The patched files include also some enhancement about data grouping. It's now possible to modify data grouping approximation :

  plotOptions.setDataGrouping(new DataGrouping(true){
                String approximation = "sum";
                public String getApproximation() {
                    return approximation;
                }
                public void setApproximation(String approximation) {
                    this.approximation = approximation;
                }
            });

And to retrieve data grouping information on clicked points:

   public void onClick(PointClickEvent event) {
                   event.getPointIndex();
                   event.getDataGroupStart()
                   event.getDataGroupLength();
...

As I don't want to repackage Vaadin-Chart and keep it unmodified, I put the patched source in my main projects sources, in a src/charts directory, then I have this Gradle trick to put them first on classpath during widgetset compilation :

sourceSets {
    charts {
        output.classesDir = 'build/classes/charts'
        output.resourcesDir = 'build/classes/charts'
        java.srcDirs += 'src/charts/java'
        resources.srcDirs += 'src/charts/resources'
        compileClasspath = sourceSets.main.compileClasspath
    }
 
    main.compileClasspath = files("src/charts/java") + files("build/classes/charts") + sourceSets.main.compileClasspath
    main.runtimeClasspath = files("src/charts/java") + files("build/classes/charts") + sourceSets.main.runtimeClasspath
}

Hope this helps.