Hi!
I’m working on a project where we show a pie chart of some data. Easy enough that is working fine. However, the customer would like to have us, when they click on a legend title – to remove that data from the chart and re-draw the pie chart w/ the new ratios. By default, when you click on a legend in a pie chart it simply just removes the slice (blanks it out).
I’ve seen 2 examples of how to do this in pure JS, but I can’t figure out how to do this w/ the Vaadin plug-in. The 2 ways appear to be:
opts.plotOptions.pie.point.events.legendItemClick = function() {
if (this.visible) {
this[‘y_old’]
= this.y;
this.update(0);
}
else {
this.update(this.y_old);
}
};
I.e. set the Y value to 0. Now, there is no update() function on a point or series (that I can find) so I tried to remove(Point) on the old one, and addPoint() with a new one setting the Y to 0 in a listener like:
// Add listener to handle legend click ...
unitChart.addListener(new PieChartLegendItemClickListener() {
@Override
public void legendItemClick(PieChartLegendItemClickEvent clickEvent) {
final InvientCharts.DecimalPoint point = (InvientCharts.DecimalPoint)clickEvent.getPoint() ;
log.info("Pie Legend Clicked with event " + point);
final InvientCharts chart = clickEvent.getChart();
final XYSeries series = (XYSeries)chart.getSeries("Unit Status");
final InvientCharts.DecimalPoint newPoint = new InvientCharts.DecimalPoint( series, point.getName(), 0.0 );
series.removePoint(point);
series.addPoint( newPoint );
chart.refresh() ;
}
});
However, when I try this – odd results happen. Generally the first click on the legend appears to work pretty well, but then after that it seems to revert back to old behavior (just remove the slice) or “hangs” … etc.
I was also looking at the “preventDefault()” call available on the HIGHCHART JS library … but I don’t see anyway to use that within Vaadin as well …
TIA!
/Steve