使用带有线性时间轴分布的Chart.js绘制IoT数据

时间:2018-11-09 02:55:08

标签: javascript database time chart.js iot

我已经使用mongoDB和chart.js成功构建了IoT平台。

我已经将传感器读数值和时间戳配对为标签。

JavaScript代码:

for (var property in data) {
        if (data.hasOwnProperty(property)) {
            var varTag = property;
            var varData = data[property];
            var label = varData.name;
            var xLabels = [];
            var yValues = [];

            for (var i in varData.values) {
                // extract values
                yValues.push(varData.values[i][0]);
                // extract timestamp in a Date object and format the output in a string
                var t = new Date(varData.values[i][1]);
                // add formated timestamp to the array holding values for x axis
                //timeValues=moment(t).format("DD/MM/YYYY HH:mm");
                timeLabels=moment(t).clone().format("HH:mm:ss");
                //xValues.push(timeValues)
                xLabels.push(timeLabels)
            }
        }
        var ctx = document.getElementById(varTag+"_canvas").getContext("2d");

        var myChart=new Chart(ctx,{
            type: 'line',
            data:  {
                labels: xLabels,
                datasets: [{
                    label:label,
                    data:yValues,
                    backgroundColor:'rgba(255, 99, 132, 0.2)',
                    borderColor:'rgba(153, 102, 255, 1)',
                    borderWidth:1,
                    fill:false
                    }
                    ]
                    }

但是我想要的不是作为标签而是作为值的时间戳。

问题是我的值和时间戳是单独的数组,例如:

y = [val1,val2,val3,..]
x = [date1,date2,date3,..]

而chart.js的格式如下:

data: {
labels: label,
datasets: [{
  label: 'Demo',
  data: [{
      t: new Date("Date1"),
      y: 12
    },
    {
      t: new Date("Date2"),
      y: 21
    },
    {
      t: new Date("Date3"),
      y: 32
    }
  ],

我的问题是如何将数组转换为chart.js格式(类似对象)?

0 个答案:

没有答案