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