Gauge/Donut repainting if I remove the Style

[vaadin-bot]

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

[vaadin-bot]

Originally by [email protected]

---

Attachment added: refresh.png (146.4 KiB) https://trac-attachments.vaadin.com/trac/14620/refresh.png

[vaadin-bot]

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();

        }

    };

[vaadin-bot]

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.

[vaadin-bot]

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.