how do I clear a apache Echart? I need to re-initialize it

Question

I have Stacked Horizontal Bar chart on a single page, and each chart changes based on what the user selects (Drop Down Select). I have an ajax call that retrieves the data, so the data varies and is dynamic based on user selection. I'm having a problem clearing out old data. If there is no data it should display Horizontal Bar chart. But it displays previous data. it is not getting empty if there is no data. Basically, I just want after each selection to re-initialize the chart and start from scratch. How can I do that?

<script type = "text/javascript" >
    var series;
$("#sub_project3").change(function() {
    $.ajax({
        url: "<?php echo base_url("
        Manage_procurement_plan / load_bar_chart ");?>",
        type: "POST",
        data: {
            drop_value: $(this).val()
        },
        dataType: "text",
        cache: false,
        success: function(data) {
            series = data;
            var dom = document.getElementById("main");
            var myChart = echarts.init(dom);
            var app = {};
            var option;
            getBarGraph(series);

            function getBarGraph(data) {
                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        top: '3%',
                    },
                    grid: {
                        top: '28%',
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true,
                    },
                    xAxis: {
                        type: 'value',
                    },
                    yAxis: {
                        type: 'category',
                        data: ['Actual Avg', 'ADB Min Standard']
                    },
                    series: JSON.parse(data),
                };
                /*if (option && typeof option === 'object') {
                    
                    myChart.setOption(option);
                }*/
                myChart.setOption(option);

            }
        }
    });
}); 
</script>

A mere dev · Accepted Answer · 2022-05-13T07:27:39.637

7

Each time you make a new selection, you can 're-initialize' your series (make it an empty list) before pushing new data inside it. So if there is no data, the series will remain empty.

Then, you can update your chart using notMerge = true. According to echarts doc :

notMerge Optional. Whether not to merge with previous option. false by default, means merge, see more details in Component Merging Modes. If true all of the current components will be removed and new components will be created according to the new option.

myChart.setOption(option, true);

edited May 13 '22 at 07:27

answered May 12 '22 at 07:21

A mere dev

1,263
4
14

I tired. But it did not work. In my code, Series Data is getting empty. But it does update the chart with empty data. If the Series data is empty it shows the chart with previous data. If there is a series data chart is getting updated. Your support is highly appreciated. – Ruhunage Deshan May 12 '22 at 17:09
What you are looking for is the `notMerge` param of `setOption`. I added it in my answer, it should work now. – A mere dev May 13 '22 at 07:00

score 1 · Answer 2 · answered Jan 12 '23 at 00:18

I had the same problem today.

What I see in your question is that you are using each Ajax call to create a new chart.

var dom = document.getElementById("main");
var myChart = echarts.init(dom);

So that Ajax call is fine for the very first time you create the chart and show the initial data.

The fact is that the Apache Echarts library remembers each drawn chart on it's instances. So, on every call of this success method you are actually creating a new chart.

So, you must create another Ajax call for updating the data, where first, you must find the chart instance, and execute the setOption method, as well said by @A mere dev in the other answer. On the only update Ajax call, you'll don't need to create a new chart, but just receive the new data and pass it

myChart.setOption(option, true);

score 1 · Answer 3 · answered May 10 '23 at 09:33

this.chartInstance.setOption(
  {
    series: this.widgetData.map((widget: ChartDataDto) => ({
      type: 'bar',
      barMaxWidth: !this.widget.barWidth ? 40 : this.widget.barWidth,
      name: widget.name,
      data: widget.data,
      stack: 'one',
      label: {
        show: this.widget.showLabel ? true : false,
        position: 'right',
        fontWeight: 'bold',
        formatter: ({ value }) => MathUtils.formatNumberToThousands(value),
      },
    })),
  },
  {
    replaceMerge: ['series'],
  }

Adding { replaceMerge: ['series'], } did the trick for me.

how do I clear a apache Echart? I need to re-initialize it

3 Answers3