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
    });
});

Answer 2

The issue is that you were not defining your chart in:

$("#refresh").click(function() {
            var options = chart.options;
            chart = new Highcharts.Chart(options);
        });

Try defining it before you call the new HighCharts code:

$("#refresh").click(function () {
    var chart = $('#container').highcharts();
    var options = chart.options;
    chart = new Highcharts.Chart(options);
});

See example here.

Also note you have some invalid syntax in the tooltip as well as some dangling commas.