dynamic google chart, Can't add new data

Question

I call updateChart(d) functions via ajax and pass new data.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    var chart;
    var dataTable;
    var options;
    var i = 1;

    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
        dataTable = google.visualization.arrayToDataTable([
            ['Amplitude', 'time'],
            ['0', 0]
        ]);
        options = {
            title: '',
            curveType: 'function',
            legend: { position: 'bottom' }
        };

        chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
        chart.draw(dataTable, options);
    }
    
    function updateChart(d) {
        i++;
        dataTable.setValue(i, d); // Вот тут
        chart.draw(dataTable, options);

    }
</script>

When I try to add the next value for the chart, it throws an error:

Uncaught Error: Invalid row index 2. Should be in the range [0-0]

I did not find any solutions on the Internet (This is for a robot, it swears that there is not enough text).

Answer 1

function updateChart(d) {
        i++;
        console.log(i+"======"+d);
        //data.setValue(i,1,d);
        data.addRow([String(i), Number(d)]);
        chart.draw(data, options);
    }