Unable to build a timeline chart from ajax values

Question

Actually i'm trying to build a timeline chart using the google's one by using data passed from server side and received by ajax.

The problem is that i get the following error when i'm trying to do it:

Uncaught Error: Row given with size different than 4 (the number of columns in the table).

While here is what i get from the $.each cycle

As i'm just preparing the timeline with the data from ajax the real values will be set later while for now i'm just trying to add blank timelines by using the following guide so the data start and end should be the same.

here is the ajax code:

$.ajax({
    type: "POST",
    url: "prenotazioni.aspx/getTavolo",
    data: "{}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (msg) {
        $.each(msg.d, function (k, v) {
            //console.log(v);
            dataTable.addRow([[v, '', new Date(0, 0, 0, 12, 0, 0), new Date(0, 0, 0, 12, 0, 0)]]);
        });

    }
});

UPDATE: That's what i'm trying to reach automatically from the ajax loop

The problem is that to make the cell blank the start and end date have to be the same but can't be the same for all the rows here is how the following timeline was built

dataTable.addRows([
    ["33", '', new Date(0, 0, 0, 11, 0, 0), new Date(0, 0, 0, 11, 0, 0)],
    ["Tavolo 2", '', new Date(0, 0, 0, 12, 0, 0), new Date(0, 0, 0, 12, 0, 0)],
    ["Tavolo 3", '', new Date(0, 0, 0, 13, 0, 0), new Date(0, 0, 0, 13, 0, 0)],
    ["Tavolo 4", '', new Date(0, 0, 0, 14, 0, 0), new Date(0, 0, 0, 14, 0, 0)],
    ["Tavolo 5", '', new Date(0, 0, 0, 15, 0, 0), new Date(0, 0, 0, 15, 0, 0)],
    ["Tavolo 6", '', new Date(0, 0, 0, 16, 0, 0), new Date(0, 0, 0, 16, 0, 0)],
    ["Tavolo 7", '', new Date(0, 0, 0, 19, 0, 0), new Date(0, 0, 0, 19, 0, 0)],
    ["Tavolo 8", '', new Date(0, 0, 0, 20, 0, 0), new Date(0, 0, 0, 20, 0, 0)],
    ["Tavolo 9", '', new Date(0, 0, 0, 21, 0, 0), new Date(0, 0, 0, 21, 0, 0)],
]);

So the issue now is how to make the start and end time same for row but different for each row.

Seblor Seblor · Accepted Answer · 2019-03-21T13:51:53

I think the issue is that you are trying to add a single row with only an element :

dataTable.addRow([[v, '', new Date(0, 0, 0, 12, 0, 0), new Date(0, 0, 0, 12, 0, 0)]]);

With this line, you are trying to add this data :

[
    [v, '', new Date(0, 0, 0, 12, 0, 0), new Date(0, 0, 0, 12, 0, 0)]
]

Which is only a single element (a list with a single list within), when you need 4 of them to make a complete row (it should contain 4 elements in your case).

Just remove the extra brackets and you should be fine :

dataTable.addRow([v, '', new Date(0, 0, 0, 12, 0, 0), new Date(0, 0, 0, 12, 0, 0)]);

Edit : The new error you are reporting in the comment (Error: <text> attribute x: Expected length, "NaN") might be caused by the fact that the 2 dates you are giving are the same (according to this answer).

Edit 2 : Following your edit :

As I said in my reply to your comments, the end date of a row can be the same as the start date of the next one. Try this :

dataTable.addRows([
    ["33", '', new Date(0, 0, 0, 11, 0, 0), new Date(0, 0, 0, 12, 0, 0)],
    ["Tavolo 2", '', new Date(0, 0, 0, 12, 0, 0), new Date(0, 0, 0, 13, 0, 0)],
    ["Tavolo 3", '', new Date(0, 0, 0, 13, 0, 0), new Date(0, 0, 0, 14, 0, 0)],
    ["Tavolo 4", '', new Date(0, 0, 0, 14, 0, 0), new Date(0, 0, 0, 15, 0, 0)],
    ["Tavolo 5", '', new Date(0, 0, 0, 15, 0, 0), new Date(0, 0, 0, 16, 0, 0)],
    ["Tavolo 6", '', new Date(0, 0, 0, 16, 0, 0), new Date(0, 0, 0, 17, 0, 0)],
    ["Tavolo 7", '', new Date(0, 0, 0, 19, 0, 0), new Date(0, 0, 0, 20, 0, 0)],
    ["Tavolo 8", '', new Date(0, 0, 0, 20, 0, 0), new Date(0, 0, 0, 21, 0, 0)],
    ["Tavolo 9", '', new Date(0, 0, 0, 21, 0, 0), new Date(0, 0, 0, 22, 0, 0)],
]);

Unable to build a timeline chart from ajax values

1 Answers