charts
charts copied to clipboard
vaadin charts and click handling
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
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.