Using an editable table with HighChart and having the chart refresh with change

Question

I am building a prototype that uses High charts - Data defined in a HTML table, I have applied an editable feature using jQuery so that the cells can be edited by the user.

Answer 1

wergeld is correct.
You may try this fiddle which just updates the series data and refreshes the chart afterwards.

This will not recreate the chart from scratch, but rather only update it.
It's a bit more code, but depending on your usecase this might be useful.

here is the code in question:

$('#container').highcharts({
    // [...]
    series : [{ id: 'series1' }, { id: 'series2' }]
});

$("#refresh").click(function() {

    var complete = function(options) {
        // get the two HC-series objects
        var chart = $('#container').highcharts();
        var series1 = chart.get('series1');
        var series2 = chart.get('series2');

        // set new data
        series1.setData(options.series[0].data, false);
        series2.setData(options.series[1].data, false);

        // and redraw chart
        chart.redraw();
    };

    // call the data parser of HC
    Highcharts.data({
        table : document.getElementById('datatable'),
        complete : complete
    });
});