Refreshing Chart dynamically results in error

Tags: #<Tag:0x00007efc6497aa38>
#1

Hi,

Trying to update a Chart dynamically and when updating the values in any cell below the first row of the spreadsheet, get an error:

Uncaught TypeError: Cannot read property ‘data’ of undefined. the line in the code that errors out is:
myChart.data.datasets[row].data[col] = value;
Basically at this point cant enter any other values and the page has to be refreshed.

Also, the formula cell doesn’t dynamically update on the chart (cell A1) , although the value in the cell changes.

jsFiddle: https://jsfiddle.net/hpattern/uqja8dLh/65/

<div><canvas id="myChart" width="100" height="50"></canvas></div>
<div class="HeadingTable center" id="excel"></div>

document.addEventListener("DOMContentLoaded", function () {
        var container = document.getElementById('excel');
        var myData = [
            ['=SUM(b1:b2)', 40000],
            [10000, 45000],
            [20000, 30000]
        ];
        var hot = new Handsontable(container, {
            data: myData,
            rowHeaders: true,
            colHeaders: true,
            filters: true,
            dropdownMenu: true,
            formulas: true,
            licenseKey: "non-commercial-and-evaluation",
            beforeChange: function (changes, src) {
                if (src !== 'loadData') {
                    changes.forEach((change) => {
                        var row = change[0];
                        var col = change[1];
                        var value = change[3] === '' ? 0 : change[3];
                        myChart.data.datasets[row].data[col] = value;
                        myChart.update();
                    });
                }
            }// before change
        }) // hansontable
        var ctx = document.getElementById('myChart').getContext('2d');

        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['Formula', 'Value2'],
                datasets: [{
                    label: 'Formula Test',
                    data: [hot.getDataAtCell(0, 0), hot.getDataAtCell(1, 0), hot.getDataAtCell(0, 0), hot.getDataAtCell(1, 1)],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        } //
                    }]//
                }//
            }//
        })// myChart
    })// listener

Thanks,
Tom

#2

Hey @hpattern1

officially we do not have chart support, but if you’re using ChartsJS you may want to check this example https://handsontable.com/blog/articles/2017/10/integrating-handsontable-with-chart-js that provides some tips on how to connect those two libraries and how to run the changes.

#3