Использование редактируемой таблицы с HighChart и обновление диаграммы с изменением

Я строю прототип, который используетВысокие графики - данные, определенные в таблице HTMLЯ применил редактируемую функцию с помощью jQuery, чтобы пользователь мог редактировать ячейки. Вопрос в том:

Как заставить диаграмму обновляться / обновляться после того, как пользователь редактирует ячейку без использования базы данных? Я хотел бы использовать кнопку с прослушивателем событий .click для перезагрузки графика из отредактированной таблицы.

Это всего лишь прототип, поэтому мне не нужен реальный вызов Ajax или соединение с базой данных. В основном мне нужно взаимодействие пользователя с таблицей, чтобы отразить на графике.

Вот очень упрощенная версия:

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/data.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
    <script>
    $(function () {
        $('#container').highcharts({
            data: {
                table: document.getElementById('datatable')
            },
            chart: {
                type: 'column'
            },
            title: {
                text: 'Data extracted from a HTML table in the page'
            },
            yAxis: {
                allowDecimals: false,
                title: {
                    text: 'Units'
                }
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.series.name +'</b><br/>'+
                        this.y +' '+ this.x.toLowerCase();
                }
            },
        });
    });
    $("#refresh").click(function() {
                var options = chart.options;
                chart = new Highcharts.Chart(options);
            });
    </script>
    <script>
    $(function () {
        $("#datatable td").dblclick(function () {
            var OriginalContent = $(this).text();
            $(this).addClass("cellEditing");
            $(this).html("<input type='text' value='" +"' />");
            $(this).children().first().focus();
            $(this).children().first().keypress(function (e) {
                if (e.which == 13) {
                    var newContent = $(this).val();
                    $(this).parent().text(newContent);
                    $(this).parent().removeClass("cellEditing");
                }
            });
        $(this).children().first().blur(function(){
            $(this).parent().text(OriginalContent);
            $(this).parent().removeClass("cellEditing");
        });
        });
    });
    </script>
    </head>
    <body>
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
    <table id="datatable">
      <thead>
        <tr>
          <th></th>
          <th>Jane</th>
          <th>John</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>Apples</th>
          <td>9</td>
          <td>4</td>
        </tr>
        <tr>
          <th>Pears</th>
          <td>2</td>
          <td>0</td>
        </tr>
        <tr>
          <th>Plums</th>
          <td>5</td>
          <td>11</td>
        </tr>
        <tr>
          <th>Bananas</th>
          <td>1</td>
          <td>1</td>
        </tr>
        <tr>
          <th>Oranges</th>
          <td>2</td>
          <td>4</td>
        </tr>
      </tbody>
    </table>
    </body>


<button id="refresh">Refresh</button>

Ответы на вопрос(2)

Ваш ответ на вопрос