Display dynamic data in Rickshaw chart retreived from API

Question

I try to display data retrieved from web API via a ajex request using rickshaw. Data is retrieved correctly and added to an array. However the chart does not render any data. When I console the series data array it shows all data. Here is my code

var seriesData = [
    []
];


$.ajax({
    url: "http://things.ubidots.com/api/v1.6/devices/Smart-
    FAD/Temperature/values?page_size=50&format=json&&token=A1E-
    BR1Y0dMLAULMNmMLbk0Y8qADGOdS5h",
    type: "GET"
}).done(function(data) {
    var result = data.results;
    for (var i = 0; i < result.length; i++) {
        var value = result[i].value;
        var time = result[i].timestamp;
        seriesData[0][i].push({
            "x": time,
            "y": value
        });
    };
}).fail(function() {
    console.log("REQUEST FAILED");
});


var graph = new Rickshaw.Graph({
    element: document.querySelector("#chart"),
    width: 540,
    height: 240,
    series: [{
        data: seriesData[0],
        color: 'steelblue',
        name: 'Server1'
    }]
});

var x_axis = new Rickshaw.Graph.Axis.Time({
    graph: graph
});

var y_axis = new Rickshaw.Graph.Axis.Y({
    graph: graph,
    orientation: 'left',
    tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
    element: document.getElementById('y_axis'),
});

graph.render();

Can some help me to solve this?

Answer 1

Rickshaw doesn't watch for changes in the dataset automatically so you need to call graph.update() at the end of you ajax.done function.

.done(function(data) {
    var result = data.results;
    for (var i = 0; i < result.length; i++) {
        var value = result[i].value;
        var time = result[i].timestamp;
        seriesData[0].push({
            "x": time,
            "y": value
        });
    };

    graph.update()