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:

1. Is the change of the yAxis's title supported? This is similar to the mand to update the graph's title, but it doesn't work, of course.
2. 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?
3. 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
    });
});

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:

1. Is the change of the yAxis's title supported? This is similar to the mand to update the graph's title, but it doesn't work, of course.
2. 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?
3. 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
    });
});

• javascript
• jquery
• highcharts

1 Answer 1

1. Yes it is possible by update function on called on axis. http://api.highcharts./highcharts#Axis.update()

2. update, works on point, so it should be chart.series[0].data[0].update(20);