xively.feed.history()에 여러 번 호출

여러 xively 피드에서 데이터를 가져오고 Rickshaw (D3 기준)을 사용하여 플로팅 웹 페이지를 작성하려고합니다. 내가 가진 문제는 호출 함수 밖에서 서버에서 반환 된 데이터에 액세스 할 수 없다는 것입니다. 나는 js에 익숙하지 않아 호출의 비동기 특성을 처리하는 방법을 모르겠습니다. xively.feed.history()으로 전화를 걸어 과거 데이터의 다양한 섹션을 얻고 단일 그래프에 연결합니다. 어쨌든, 여기 제가 시도한 것과 비슷한 것이 있습니다. 내가 말했듯이 그것은 xively tutorial xively.feed.history()에 여러 번 호출

xively.setKey('xxxx my key ') 
// Replace with your own values 
var feedID  = 12345678,   // Feed ID 
    selector  = "#myelement"; // Your element on the page 

var series = []; 
xively.feed.history(feedID, { duration: "10days", interval: 1800 ,limit: 1000}, function (mydata) { 
    mydata.datastreams.forEach(function(stream){ 
     if ((stream.id == "tempinside") || (stream.id == "tempoutside")) { 
      var points = []; 
      stream.datapoints.forEach(function(datapoint){ 
       points.push({x: new Date(datapoint.at).getTime()/1000.0, y: parseFloat(datapoint.value)}); 
      // Add Datapoints Array to Graph Series Array 
      }); 
      series.push({ 
       name: stream.id, 
       data: points 
      }); 
     }; 
    }); 


    var graph2 = new Rickshaw.Graph({ 
     element: document.querySelector("#chart2"), 
     width: 600, 
     height: 400, 
     renderer: 'line', 
     series: [{ 
      data: series[0].data, 
      name: series[0].name, 
      color: 'red' 
      },{ 
      data: series[1].data, 
      name: series[1].name, 
      color: 'blue' 
      }] 
    }) 
})

에 따라, 그래서 어쩌면 내가 뭔가를 누락 자바 스크립트에 새로운 해요. 그래프가 xively.feed.history 함수의 콜백 부분 안에 있으면 잘 작동합니다. 함수를 여러 번 호출하려고하면 그래프 코드가 실행될 때까지 데이터가 준비되지 않은 것입니다.

출처

2013-11-28 mor22

좋아, 그래서 나는 그것을 만들었고 다른 사람들이 내가 어떻게했는지 볼 수 있도록 여기에 그 부분 집합을 넣었다. 최종 코드 내에서

var starttime = moment().subtract("day", 3); 
series['tempoutside']=[ 
{x:starttime.subtract("second",2).unix(),y:15}, 
{x:starttime.subtract("second",1).unix(),y:15} 
]; 


graph = new Rickshaw.Graph({ 
    element: document.querySelector("#chart"), 
    height: 400, 
    width: 600, 
    renderer: 'line', 
    interpolation: 'step-before', 
    series: new Rickshaw.Series([ 
     { 
      name: 'temperature', 
      data: series['tempoutside'], 
      color: 'blue', 
     } 
    ], series) 
}); 

xively.datastream.history("123456789", "tempoutside", query, loadData); 

function loadData(data) { 
    //console.log('Getting ' + data.id + 'data from Xively'); 
    if (data.datapoints != undefined){ 
     //console.log('received ' + data.datapoints.length +' datapoints'); 
     lastdata=data; 
     var filtedData = data.datapoints.filter(function(x) { return (x.value >0.005); }); 
     for (var i=0; i < filtedData.length; i++) { 
      var date = moment(filtedData[i].at); 
      var value = parseFloat(filtedData[i].value+0.000001); 
     series[data.id].push({x: date.unix(), y: value}); 
     } 
     graph.render(); 
    } 
}

는 또한 .pop()으로 series['tempoutside'] 배열 더미 초기화 값을 제거 하였다. 데이터가 xively에서 반환되기 전에 먼저 그래프가 작성되기 때문에 배열에 필요했습니다. 데이터가 반환되면 xively.datastream.history() 함수는 데이터를 series 배열로 푸시하는 loaddata() 콜백을 호출합니다. 또한 그래프를 작성할 때 배열을 참조로 전달 했으므로 데이터를 그래프 시리즈 배열로 푸시 할 필요가 없다는 것을 이해하지 못했습니다. 배열을 업데이트 한 다음 graph.render()으로 전화하면 모든 내용이 복제됩니다. 승리! 즉 하나의 API 호출 (1000 데이터 포인트로 제한)에서 사용할 수있는 것보다 많은 데이터를 얻기 위해 Xively에 여러 호출을 할 수 있습니다. 플롯하기 전에 x 값으로 데이터를 정렬하는 것을 잊지 마십시오 ....

출처

2013-12-06 15:23:20 mor22

xively.feed.history()에 여러 번 호출

답변

관련 문제