charts
charts copied to clipboard
Gauge/Donut repainting if I remove the Style
Originally by [email protected]
Hi,
I added three gauge/donut charts in a layout,for that charts I added chart click listener and also style(which forms border for that chart) to identify the selected chart.
If i apply the style to the chart it is repainting the chart(looking like refreshing).
same as remove style,if i remove the applied style from chart also it is repainting the chart.
Imported from https://dev.vaadin.com/ issue #14620
Originally by [email protected]
Attachment added: refresh.png
(146.4 KiB)
https://trac-attachments.vaadin.com/trac/14620/refresh.png
Originally by [email protected]
Hi,
Here is my code.
I am calling chart.java class 5times to draw the 5 donuts in single layout.
chart listener is to identify the selectd chart in that 5 charts.
chart.java
public class DoNutChart {
public Chart getChart(String name, Float perc, String xAxisName,
String yAxisName, int flag, String prevValue, SolidColor color) {
Chart chart = new Chart(ChartType.PIE);
chart.setWidth("201px");
chart.setHeight("250px");
chart.setId(name);
Configuration conf = chart.getConfiguration();
conf.getChart().setSpacingBottom(50);
Title title = new Title();
Style sty = new Style();
sty.setFontFamily("Arial");
sty.setFontSize("11px");
sty.setColor(new SolidColor("#979797"));
title.setStyle(sty);
title.setFloating(true);
title.setText(name);
title.setY(-1);
title.setMargin(1);
title.setVerticalAlign(VerticalAlign.BOTTOM);
conf.setTitle(title);
conf.disableCredits();
PlotOptionsPie pie = new PlotOptionsPie();
pie.setShadow(false);
conf.setPlotOptions(pie);
conf.getTooltip().setEnabled(false);
DataSeries outerSeries = new DataSeries();
outerSeries.setName("Compliance %");
PlotOptionsPie outerSeriesOptions = new PlotOptionsPie();
outerSeries.setPlotOptions(outerSeriesOptions);
outerSeriesOptions.setInnerSize(100);
outerSeriesOptions.setSize(70);
outerSeriesOptions.setBorderColor(new SolidColor("Gray"));
outerSeriesOptions.setBorderWidth(0.2);
int perc1 = (int) Math.round(perc);
String perValue = String.valueOf(perc1) + "%";
DataSeriesItem dataItem1 = new DataSeriesItem(perValue, perc1, color);
DataSeriesItem dataItem2 = new DataSeriesItem("", 100 - perc1,
new SolidColor("White"));
DataSeriesItem[] outerItems = new DataSeriesItem[] { dataItem1,
dataItem2 };
outerSeries.setData(Arrays.asList(outerItems));
conf.setSeries(outerSeries);
chart.drawChart(conf);
return chart;
}
Listener for this chart
ChartClickListener DonutChartClickListener = new ChartClickListener() {
@Override
public void onClick(ChartClickEvent event) {
if (prevChart != null) {
prevPolicyChart.removeStyleName(CHARTSELSTYLE);
}
Chart doNutChart = (Chart) event.getComponent();
prevPolicyChart = doNutChart;
/*added border style for my donut to identify the
selected chart*/
doNutChart.setStyleName(CHARTSELSTYLE);
String category = doNutChart.getId();
}
};
Originally by @zch
We should make it possible to disable animations before changing the style name to avoid the animation when adding a border around a chart.
Originally by @zch
The following now works in the latest version of Charts 2.0:
for (AbstractPlotOptions po : chart.getConfiguration().getAllPlotOptions()) {
po.setAnimation(false);
}
for (AbstractPlotOptions po : chart2.getConfiguration().getAllPlotOptions()) {
po.setAnimation(false);
}
chart.drawChart();
chart2.drawChart();
chart.removeStyleName(CHARTSELSTYLE);
chart2.removeStyleName(CHARTSELSTYLE);
Chart doNutChart = (Chart) event.getComponent();
/*added border style for my donut to identify the
selected chart*/
doNutChart.setStyleName(CHARTSELSTYLE);
i.e. disabling animation for the affected charts when clicking one of them.
Unfortunately the explicit call to {drawChart()
is still needed. We need to fix this in a future version (time has unfortunately run out for 2.0.0), but you can work around the problem like this.