**Customizing (Pie)-Chart** Using the latest SOCharts version 2.3.3 I have

Directory SO Charts
1

Customizing (Pie)-Chart

Using the latest SOCharts version 2.3.3 I have created a simple pie chart, without legend and without tooltip.
Now I would like to set up some more customization.
First, I would like to disable animation on init and on data update. This is possible via property [“animation”]
(Documentation - Apache ECharts).
I did subclass com.storedobject.chart.PieChart and overwrote encodeJSON() method as following:

public class SoPieChartExample2 extends Div {

  private SOChart soChart;
  private DemoPieChart pieChart;

  public SoPieChartExample2() {
    soChart = new SOChart();
    pieChart = new DemoPieChart(
        new CategoryData(new String[]{"L 0", "L 1", "L 2"}),
        new Data(10, 10, 80));
    pieChart.setColors(
        new Color[]{new Color("#25B15F"), new Color("#DFE218"), new Color("#FF4238")});
    pieChart.setName("Testchart");
    soChart.add(pieChart);
    soChart.disableDefaultLegend();
    soChart.disableDefaultTooltip();
    add(soChart);
  }

  private static class DemoPieChart extends PieChart {

    public DemoPieChart(AbstractDataProvider<?> itemNames, DataProvider values) {
      super(itemNames, values);
    }

    @Override
    public void encodeJSON(StringBuilder sb) {
      super.encodeJSON(sb);
      ComponentPart.encode(sb, "animation", Boolean.FALSE);
    }
  }
}

This works, chart doesn’t animate on init/update.

Additionally I would like to disable the emphasis of the chart which is triggered on mouse-over.
According to ECharts documentation this should be possible via property [“emphasis”]
(Documentation - Apache ECharts). In the examples [editor]
(Examples - Apache ECharts) of the ECharts website it works.
When I try to “inject” this property within SOCharts however the emphasis behaviour doesn’t disappear.
I tried to extend the aforementioned encodeJSON() method accordingly and alternatively to implement the emphasis handling in SOCharts itself (hardcoded in Chart.java. encodeJSON(), right after the “type” encoding).
Both without success.

In both cases the resulting JSON which is sent to the frontend looks alright to me, with emphasis property within the series node.

{"dataset":{"source":{"d1":1,"d2":2}}
,"series":[{"name":"Testchart","id":8,"color":["rgb(37,177,95)","rgb(223,226,24)","rgb(255,66,56)"]
,"type":"pie","emphasis":{"disabled":true},"label":{"show":false,"inside":false},"encode":{"itemName":"d1","value":"d2"},"animation":false}]
}

Any idea why the chart is still emphasizing upon mouse-over and/or any idea how this could be accomplished?

2

Hi,

"emphasis": { "disabled": true }

This feature is available in echarts starting from version 5.3.0 only.
The current version of the SO Chart uses echarts version 5.2.2, I will update it tonight.

3

Oooh, right, didn’t see that…

Thanks!

4

Ok, updated with echarts 5.3.0. Please check.

5

Works fine. Extended my subclassed PieChart as following:

  private static class DemoPieChart extends PieChart {

    public DemoPieChart(AbstractDataProvider<?> itemNames, DataProvider values) {
      super(itemNames, values);
    }

    @Override
    public void encodeJSON(StringBuilder sb) {
      super.encodeJSON(sb);
      ComponentPart.encode(sb, "animation", Boolean.FALSE);
      ComponentPart.addComma(sb);
      sb.append("\"emphasis\":{");
      ComponentPart.encode(sb, "disabled", Boolean.TRUE);
      sb.append('}');
    }
  }
6

Nice to know that it’s working