Highcharts - how to properly update series[0].data and yAxis title of a VUMeter?
highcharts, javascript, jquery
Solution
Yes it is possible by update function on called on axis. http://api.highcharts.com/highcharts#Axis.update()
update, works on point, so it should be chart.series[0].data[0].update(20);
Problem
I am preparing a `VU Meter` graph in Highcharts to display an array of values. These values are displayed one at a time, by choosing an `<OPTION>` of a `<SELECT>`. I managed to understand how to change the `title` of the graph to match the selected `label` of the `<OPTION>`, but unfortunately I am a noob and I was not able to properly update the `data` of the `series`. A minimal working example is available on jsFiddle. In particular, the following function is fired when the `<SELECT>` is changed: ``` $('#receptorsList0').change(function() { var selectedOption = $("#receptorsList0 option:selected"); var selectedValue = selectedOption.val(); var selectedText = selectedOption.text(); alert("i: "+selectedOption+", val: "+selectedValue+", text: "+selectedText); // 1. Possible? chart.yAxis.setTitle({ text: table[selectedText] + '<br/><span style="font-size:8px">' + selectedText + '</span>' }); // 2. Doesn't work, suggestions? Same with chart.series[0].update(...) chart.series[0].setData([selectedValue], true); chart.setTitle({ text: selectedText }); // 3. Unneeded, right? chart.redraw(); }); ``` My questions are the following: - Is the change of the `yAxis`'s `title` supported? This is similar to the command to update the graph's title, but it doesn't work, of course. - How am I supposed to change the data? Both `chart.series[0].setData(...)` and `chart.series[0].update(...)` only made the needle to disappear to to stay still. `data` is not properly formatted, maybe? Could you please point me out my mistake? - This is unneeded, right (provided that the above works)? Thanks in advance for any suggestion you may provide! Thanks to Sebastian Bochan who pointed me towards the right direction, I managed to solve the above problems! Please find below the final version of the above function: ``` $('#receptorsList0').change(function () { var selectedOption = $("#receptorsList0 option:selected"); var selectedValue = parseFloat(selectedOption.val()); var selectedText = selectedOption.text(); chart.yAxis[0].update({ title: { text : table[selectedText] + '<br/><span style="font-size:8px">'+selectedText+'</span>', y : -40 } }); chart.series[0].data[0].update(selectedValue); chart.setTitle({ text: selectedText }); }); ```