API에서 얻은 인력거 차트에 동적 데이터 표시

Question

인력거를 사용하여 웹 API에서 검색 한 데이터를 ajex 요청을 통해 표시하려고합니다. 데이터가 올바르게 검색되고 배열에 추가됩니다. 그러나 차트는 데이터를 렌더링하지 않습니다. 계열 데이터 배열을 콘솔하면 모든 데이터가 표시됩니다. 여기 내 코드가

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

어떤 문제를 해결할 수 있습니까?

Answer 1

인력거는 자동으로 데이터 세트의 변경 사항을 감시하지 않으므로 끝에 ajax.done 함수의 graph.update()를 호출해야합니다.

.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()