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:
yAxis's title supported? This is similar to the command to update the graph's title, but it doesn't work, of course.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?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
});
});
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);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With