從DynamoDB查詢更新ChartJS折線圖

Question

我正在嘗試顯示收集到的DynamoDB數據的實時折線圖。 圖表有3個範圍的數據顯示（過去30天，過去7天，過去24小時）。選擇範圍時，將查詢DynamoDB並創建ChartJS折線圖。繪製完初始圖表後，每5秒鐘會再次查詢Dynamo，並且將使用新查詢的結果更新圖表。

由於某些原因，.update（）調用會將重複數據添加到圖表中。我相信這是因爲查詢會提取一些與原始查詢相同的數據，但我的印象是更新調用會重新渲染圖表的數據，所以我不明白爲什麼會有重複的數據。

下面是相關代碼：

var getDateTimeStr = function(hours){ 
    //create a string of the date and time 30 days ago 
    var ts = new Date().getTime(); 
    var tsYest = (ts - (hours /*hrs in 30 days*/ * 3600) * 1000); 
    var d = new Date(tsYest); 
    var yestDateStr = d.getFullYear() + '/' 
    + ('0' + (d.getMonth()+1)).slice(-2) + '/' 
    + ('0' + d.getDate()).slice(-2) + ' ' 
    + ('0' + (d.getHours()+1)).slice(-2) + ':' 
    + ('0' + (d.getMinutes()+1)).slice(-2) + ':' 
    + ('0' + (d.getSeconds()+1)).slice(-2); 
    console.log(yestDateStr); 
    return yestDateStr; 
} 

//PARAMETERS FOR 3 RANGES 
var params1 = { 
    TableName: "O2Sensor_data", 
    ConsistenRead: false, 
    ScanindexForward: true, 
    KeyConditionExpression: "sensor_id = :sensor AND #dtdt >= :start_date", 
    ExpressionAttributeNames: { 
    "#dtdt": "DateTime" 
}, 
    ExpressionAttributeValues: { 
    ":sensor": "sensor1", 
    ":start_date": getDateTimeStr(720) 
    } 
} 

var params2 = { 
    TableName: "O2Sensor_data", 
    ConsistenRead: false, 
    ScanindexForward: true, 
    KeyConditionExpression: "sensor_id = :sensor AND #dtdt >= :start_date", 
    ExpressionAttributeNames: { 
    "#dtdt": "DateTime" 
    }, 
    ExpressionAttributeValues: { 
    ":sensor": "sensor1", 
    ":start_date": getDateTimeStr(168) 
    } 
} 

var params3 = { 
    TableName: "O2Sensor_data", 
    ConsistenRead: false, 
    ScanindexForward: true, 
    KeyConditionExpression: "sensor_id = :sensor AND #dtdt >= :start_date", 
    ExpressionAttributeNames: { 
    "#dtdt": "DateTime" 
    }, 
    ExpressionAttributeValues: { 
    ":sensor": "sensor1", 
    ":start_date": getDateTimeStr(24) 
    } 
} 

//DYNAMODB QUERY FUNCTION 
function chartCreate(params, color){ 
    console.log("Querying DynamoDB"); 
    docClient.query(params, function(err, data){ 
     if(err) console.log(err, err.stack); 
     else{ 
     DateTimeArr = []; 
     o2readingArr = []; 
     data.Items.forEach(function(item){ 
      DateTimeArr.push(item.DateTime.toString()); 
      o2readingArr.push(item.o2percent.toString()); 
    }); 

     var dataMap = { 
     type: 'line', 
     data: {//displays readings form sensor based on the range selected 
      labels: DateTimeArr, 
      datasets: [{ 
      label: '% O2 In Air', 
      data: o2readingArr, 
      backgroundColor: color 
      }, 
      {//creates a line at 19.5% to see if data readings are below safe   value 
      label: "19.5%", 
      data: Array.apply(null, new Array(o2readingArr.length)).map(Number.prototype.valueOf, 19.5), 
      fill: false, 
      radius: 0, 
      borderColor: "rgba(0,0,0,.5)" 
      }]//end of datasets 
     }, 
     options: { 
      animation: false, 
      responsive: true, 
      scaleOverride: true 
     } 
     };//end of dataMap var declaration 

     //CREATE CHART 
     var ctx = document.getElementById("lineChart").getContext("2d"); 
     ctx.canvas.width = 600; 
     ctx.canvas.height = 256; 
     window.datChart = new Chart(ctx, dataMap); 
    }//end of else statement 
    });//end of query function 
} 

function chartUpdate(params){ 
    console.log("Querying DynamoDB"); 
    docClient.query(params, function(err, data){ 
    if(err) console.log(err, err.stack); 
    else{ 
     data.Items.forEach(function(item){ 
     DateTimeArr.push(item.DateTime.toString()); 
     o2readingArr.push(item.o2percent.toString()); 
     }); 
    } 
    }); 
} 

function chooseChart(){ 
    if(window.datChart){window.datChart.destroy();} 
    if(document.getElementById("sel1").value == "last30"){ 
    currParams = params1; 
    currColor = "rgba(0,0,255,.8)"; 
    chartCreate(params1, "rgba(0,0,255,.8)"); 
    }//blue 
    else if(document.getElementById("sel1").value == "last7"){ 
    currParams = params2; 
    currColor = "rgba(0,255,0,.8)"; 
    chartCreate(params2, "rgba(0,255,0,.8)"); 
    }//green 
    else if(document.getElementById("sel1").value == "last24"){ 
    currParams = params3; 
    currColor = "rgba(255,0,0,.8)"; 
    chartCreate(params3, "rgba(255,0,0,.8)"); 
    }//red 
    else{console.log("something went wrong in chooseChart function");} 
} 

chooseChart(); 

setInterval(function(){ 
    window.datChart.destroy(); 
    chartUpdate(currParams); 
    window.datChart.update(); 
}, 5000); 

我曾嘗試其他方式，如每次重繪完全圖表，但這會導致閃爍的網頁，這是相當惱人的。我不確定我如何才能使這個工作，使圖表更新只有新的數據。

任何幫助或建議，將不勝感激。謝謝。

Answer 1

我寫了一個函數來檢查已存儲在數組中的日期，它現在看起來運行良好。

下面是函數：

var isinArr = function(str){ 
    for(i=0; i<DateTimeArr.length; i++){ 
    if(str === DateTimeArr[i]){ 
     return true; 
    } 
    } 
    return false; 
} 

這裏是更新chartUpdate（）函數：

function chartUpdate(params){ 
    console.log("Querying DynamoDB"); 
    docClient.query(params, function(err, data){ 
    if(err) console.log(err, err.stack); 
    else{ 
     data.Items.forEach(function(item){ 
     if(!isinArr(item.DateTime.toString())){ 
      DateTimeArr.push(item.DateTime.toString()); 
      o2readingArr.push(item.o2percent.toString()); 
     } 
     }); 
    } 
    }); 
}