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!

Principally

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.

Outrush

Sorry for my horribly late reply, I somehow completely missed it :( But this was the solution for my problem! Thank you! – Principally

Do you have the html portion of this code? – Trolley

in addition to this answer; if you change just the series data and still got no change on chart, second parameter for setOption is 'notMerge?: boolean'. setOption(option, true) was the solution for me. – Fayefayette

Answer 2

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

Richma

Answer 3

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

Jaborandi