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.