Как динамически добавлять строки на временной шкале Google Maps с различными типами данных

Question

Я работаю над проектом, в котором мне нужно создать временную шкалу, и я использую Google Charts. У меня есть данные, извлекаемые из Firebase и API Trello. Мне нужно динамически добавлять свои данные из этих источников в график времени. Ниже мой код.

var arrs = [];
var arr =  ["1", apiName, new Date(startDate[2], startDate[0], startDate[1]), new Date(due[2], due[0], due[1])];
arrs.push(arr);

function masterTimeline(){
    console.log(arrs);

    // Create seperate timelines
    google.charts.load("current", {packages:["timeline"]});
    google.charts.setOnLoadCallback(drawChart);

    // Function callback form google.charts.setOnLoadCallback
    function drawChart(){
        // Get container in HTML
        var container = document.getElementById("master");
        // Create a new Timeline object
        var chart = new google.visualization.Timeline(container);
        // Create a new DataTable object
        var dataTable = new google.visualization.DataTable();

        dataTable.addColumn({type: 'string', id: 'Number'})
        dataTable.addColumn({type: 'string', id: 'Title'});
        dataTable.addColumn({type: 'date', id: 'Start'});
        dataTable.addColumn({type: 'date', id: 'End'});

        // Give data to columns
        dataTable.addRows(arrs);

        // Set option to get rid of row labels
        var options = {
            timeline: {showRowLabels: false, barLabelStyle: { fontSize: 18 }},
            height: 200,
        };

        // Draw Table
        chart.draw(dataTable, options);
    }
}

Теоретически, это должно работать, но когда я запускаю его, я получаю ошибку Error: <text> attribute x: Expected length, "NaN". при запуске. Как бы я поступил так.

Answer 1

Вам необходимо отделить данные от ответа API и использовать, как показано ниже.

dataTable.addRows([[Number, Title, Start, End]]);