How to dynamically add rows in a google charts timeline with different data types

Question

I am working on a project where I need to create a timeline and I am using Google Charts. I have data pulling from Firebase and the Trello API. I need to dynamically append my data from these sources to the timeline. Below is my code.

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

Theoretically, this should work, but when I run it, I get a Error: <text> attribute x: Expected length, "NaN". error when I run it. How would I go about doing this.

Answer 1

您需要将数据与api响应分开并按以下方式使用。

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