ECharts refresh on data change

Question

I'm currently working on an interactive chart which should calculate potential risk-factors of commercial project. I've been using Baidu ECharts for this, and got the graph working visually, but can't get the graph to update when data changes.

The data comes from an external questionnaire, which uses radiobuttons for the values and a checkbox to turn the whole set on and off.

 <input type="checkbox" id="GPEbool" value="true"> Example Question 1</h4>
    <form action="">
  <input type="radio" id="polishedness" value="1"> Idea<br>
  <input type="radio" id="polishedness" value="1"> Concept<br>
  <input type="radio" id="polishedness" value="2"> Mockup<br>
  <input type="radio" id="polishedness" value="5"> Prototype<br>
  <input type="radio" id="polishedness" value="7"> Playable<br>
  <input type="radio" id="polishedness" value="15"> Polish<br>
  <input type="radio" id="polishedness" value="30"> Finished<br>
</form>

Now, the problem is getting the data into the graph. It gets the initially selected value right (when adding "checked" to one of them), but won't update after that.

data: [{ value: $('input[name=polishedness]:checked').val(), name: 'Design'}]

I've tried calling the refresh function whenever something changes, but it'll return refresh is not a function. I'm really at loss, and the Chinese documentation doesn't help me much :)

Any suggestions? Thanks in advance!

Answer 1

You have to call chartInstance.setOption() again with your new data.

I give you a small example:

// eChart is the chart instance!
echart.setOption({
   // .... some configuration
   series: [
       {
           type: "line",
           name: "test",
           data: [1,2,3,4,5,6]
       }
   ]
})

After you changed the value of your select box, you have to catch that event, change the value of the configuration object and call chartInstance.setOption() again.

Therefore, it is sometimes advisable to save your complete configuration object and store your changes there.

Answer 2

If you are using Angular , You can also use the [merge] option to have the Chart responding for the value changes,

<div echarts [options]="initialValue" [merge]= "dynamicData" class="demo-chart"></div>

Reference : https://github.com/xieziyu/ngx-echarts#api

In your Module assign Initial Value as below,

  initialValue: EChartOption = {
xAxis: {
  type: 'time',
  splitNumber : 20
},
yAxis: {
  type: 'value',
  name : '$',
  nameLocation: 'middle'
},
series: [{
  data : [],
  type: 'line'
}]

}

and set the Dynamic value based on your data, Also initialize "this.dynamicData" before making the api calls to the external service

 formDataforChart(backTestTrades) {
    let i = 0;
    for(let backTestTrade of backTestTrades){
       let profitAndTime = [];
       profitAndTime.push(backTestTrade.exitTime);
       profitAndTime.push(backTestTrade.profitOrLoss);
       this.eChartDataSeries.push(profitAndTime);
    }
    let data = {
      data : this.eChartDataSeries,
      type : 'bar'
    };
    this.dynamicData=this.initialValue;
    this.dynamicData.series = [];
    // Applying my dynamic data here
    this.dynamicData.series.push(data);  
  }

Answer 3

You can use resize() method, for example

window.chartRadar = echarts.init(document.getElementById('echartId'));
window.chartRadar.setOption({
        title: {
            text: 'radar echart'
        },
        tooltip: {},
        legend: {
            data: ['data1', 'data2']
        },
        radar: {
            // shape: 'circle',
            name: {
                textStyle: {
                    color: '#fff',
                    backgroundColor: '#999',
                    borderRadius: 3,
                    padding: [3, 5]
               }
            },
            indicator: [
               { name: 'sales', max: 6500},
               { name: 'Administration', max: 16000},
               { name: 'Information Techology', max: 30000},
               { name: 'Customer Support', max: 38000},
               { name: 'Development', max: 52000},
               { name: 'Marketing', max: 25000}
            ]
        },
        series: [{
            name: 'Budget vs spending',
            type: 'radar',
            // areaStyle: {normal: {}},
            data : [
                {
                    value : [4300, 10000, 28000, 35000, 50000, 19000],
                    name : 'data1'
                },
                 {
                    value : [5000, 14000, 28000, 31000, 42000, 21000],
                    name : 'data2'
                }
            ]
        }]
    });

Once you alreay make you echart you cloud use the method "resize()" for redraw the echar for example

window.chartRadar.resize();