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