显示每日数据片段,而不是每小时

时间:2018-06-22 09:03:02

标签: arrays json multidimensional-array chart.js cumulocity

我正在使用来自Cumulocity的json多维数组来显示价值几个月的数据,但希望它每天显示数据。

我目前正在使用下一页上显示的第一个数组中显示的数据。数据在第二个数组中可用,但是我不确定如何通过Chart.js访问它,因为这些数组是根据时间戳命名的。

Website

当前使用的JSON

{
    "measurements": [
        {
            "time": "2018-05-23T00:16:40.000Z",
            "id": "6395294",
            "self": "https:\/\/greencitysolutions.cumulocity.com\/measurement\/measurements\/6395294",
            "source": {
                "id": "3223990",
                "self": "https:\/\/greencitysolutions.cumulocity.com\/inventory\/managedObjects\/3223990"
            },
            "type": "cc",
            "gcs_libelium_CO2": {
                "CO2 south": {
                    "unit": "ppm",
                    "value": 419.087
                }
            }
        },
        {
            "time": "2018-05-23T00:38:44.000Z",
            "id": "6395985",
            "self": "https:\/\/greencitysolutions.cumulocity.com\/measurement\/measurements\/6395985",
            "source": {
                "id": "3223990",
                "self": "https:\/\/greencitysolutions.cumulocity.com\/inventory\/managedObjects\/3223990"
            },
            "type": "cc",
            "gcs_libelium_CO2": {
                "CO2 south": {
                    "unit": "ppm",
                    "value": 419.135
                }
            }
        },
    ],
    "statistics": {
        "currentPage": 1,
        "pageSize": 2000,
        "totalPages": null
    },
    "self": "https:\/\/greencitysolutions.cumulocity.com\/measurement\/measurements?aggregationType=DAILY&dateTo=2018-06-22&pageSize=2000&fragmentType=gcs_libelium_CO2&fragmentType=aggregatedMeasurement&source=3223990&dateFrom=2018-05-23¤tPage=1"
}

可用系列数据JSON

{
    "values": {
        "2018-05-23T00:00:00.000Z": [
            {
                "min": 0.6,
                "max": 6.5
            },
            {
                "min": 1645,
                "max": 1645
            },
            {
                "min": 1645,
                "max": 1645
            },
            {
                "min": 613,
                "max": 718
            },
            {
                "min": 53.8,
                "max": 58.2
            },
            {
                "min": 8.86,
                "max": 13.37
            },
            {
                "min": 4.31,
                "max": 59.73
            },
            {
                "min": 9,
                "max": 12.1
            },
            {
                "min": 3.92,
                "max": 36.06
            },
            {
                "min": 2.64,
                "max": 28.24
            },
            {
                "min": 71.373,
                "max": 95.202
            },
            {
                "min": 75,
                "max": 88
            },
            {
                "min": 1215,
                "max": 1238
            },
            {
                "min": 394.638,
                "max": 443.776
            },
            {
                "min": 0,
                "max": 47
            },
            {
                "min": 0.375,
                "max": 3.36
            },
            {
                "min": 47,
                "max": 110
            },
            {
                "min": 19,
                "max": 23
            },
            {
                "min": 0,
                "max": 23
            },
            {
                "min": 0,
                "max": 34
            },
            {
                "min": 0.194,
                "max": 0.35
            },
            {
                "min": 12730,
                "max": 14490
            },
            {
                "min": 930,
                "max": 1243
            },
            {
                "min": 102147.53,
                "max": 102440.36
            },
            {
                "min": 1230,
                "max": 21140
            },
            {
                "min": 400,
                "max": 600
            },
            {
                "min": -610,
                "max": 1890
            }
        ],
        "2018-05-24T00:00:00.000Z": [
            {
                "min": 0.5,
                "max": 6.6
            },
            {
                "min": 1645,
                "max": 1645
            },
            {
                "min": 1645,
                "max": 1645
            },
            {
                "min": 710,
                "max": 807
            },
            {
                "min": 51.6,
                "max": 55
            },
            {
                "min": 8.07,
                "max": 20.74
            },
            {
                "min": 6.67,
                "max": 82.63
            },
            {
                "min": 8.5,
                "max": 14.1
            },
            {
                "min": 4.82,
                "max": 63.51
            },
            {
                "min": 3.88,
                "max": 50.91
            },
            {
                "min": 44.408,
                "max": 99.351
            },
            {
                "min": 75,
                "max": 89
            },
            {
                "min": 1238,
                "max": 1260
            },
            {
                "min": 394.398,
                "max": 419.231
            },
            {
                "min": 0,
                "max": 111
            },
            {
                "min": 0.32,
                "max": 4.11
            },
            {
                "min": 35,
                "max": 47
            },
            {
                "min": 19,
                "max": 23
            },
            {
                "min": 0,
                "max": 23
            },
            {
                "min": 0,
                "max": 41
            },
            {
                "min": 0.099,
                "max": 0.32
            },
            {
                "min": 12730,
                "max": 14490
            },
            {
                "min": 1120,
                "max": 1432
            },
            {
                "min": 101972.72,
                "max": 102407.31
            },
            {
                "min": 1280,
                "max": 22100
            },
            {
                "min": 400,
                "max": 600
            },
            {
                "min": -620,
                "max": 2310
            }
        ],
        "2018-05-25T00:00:00.000Z": [
            {
                "min": 0.6,
                "max": 6.2
            },
            {
                "min": 1645,
                "max": 1645
            },
            {
                "min": 1645,
                "max": 1645
            },
            {
                "min": 771,
                "max": 895
            },
            {
                "min": 49.7,
                "max": 53.1
            },
            {
                "min": 8.36,
                "max": 19.96
            },
            {
                "min": 6.02,
                "max": 101.53
            },
            {
                "min": 8.9,
                "max": 15.2
            },
            {
                "min": 4.94,
                "max": 83.16
            },
            {
                "min": 3.21,
                "max": 64.41
            },
            {
                "min": 52.244,
                "max": 100
            },
            {
                "min": 76,
                "max": 89
            },
            {
                "min": 1260,
                "max": 1282
            },
            {
                "min": 394.398,
                "max": 443.823
            },
            {
                "min": 0,
                "max": 111
            },
            {
                "min": 0.335,
                "max": 4.61
            },
            {
                "min": 35,
                "max": 111
            },
            {
                "min": 22,
                "max": 23
            },
            {
                "min": 0,
                "max": 22
            },
            {
                "min": 0,
                "max": 42
            },
            {
                "min": 0.097,
                "max": 0.27
            },
            {
                "min": 12730,
                "max": 14490
            },
            {
                "min": 1205,
                "max": 1597
            },
            {
                "min": 101855.48,
                "max": 102130.53
            },
            {
                "min": 1280,
                "max": 21960
            },
            {
                "min": 400,
                "max": 600
            },
            {
                "min": -580,
                "max": 2260
            }
        ],
    "truncated": false
}

Chart.js代码正在使用

var no2json = <?php echo $no2json; ?>;
var co2json = <?php echo $co2json; ?>;
//console.log(no2json);
//console.log(co2json);
//the rest of your code
var labels1 = no2json.measurements.map(function(e) {
    time1 = moment(e.time, "YYYY-MM-DDTHH:mm:ss").format("DD/MM/YY")
  return time1;
});
var labels2 = co2json.measurements.map(function(e) {
    time2 = moment(e.time, "YYYY-MM-DDTHH:mm:ss").format("DD/MM/YY")
  return time2;
});

var data1 = no2json.measurements.map(function(e) {
  return e.gcs_libelium_NO2["NO2 south"].value;
});
var data2 = co2json.measurements.map(function(e) {
   return e.gcs_libelium_CO2["CO2 south"].value;
});

var ctx1 = no2canvas.getContext('2d');
var config1 = {
    type: 'line',
    options: {
      scales: {
        type: 'date',
        /*xAxes: [{
          ticks: {
            autoSkip: true,
            maxTicksLimit: 30
          },
          tooltips: {
            mode: 'nearest',
            intersect: false
          }
        }]*/
        xAxes: [{
          afterTickToLabelConversion: function(data){
            var xLabels = data.ticks;
            xLabels.forEach(function (labels, i) {
              if (i % 2 == 1){
                xLabels[i] = '';
              }
            });
          } 
        }]
      }
    },
    data: {
      labels: labels1,
      datasets: [
      {
        label: 'NO2 Levels',
        data: data1,
        backgroundColor: 'rgba(0, 119, 204, 0.3)'
      },
      ]
    }
};
var chart1 = new Chart(ctx1, config1);

var ctx2 = co2canvas.getContext('2d');
var config2 = {
    type: 'line',
    options: {
      scales: {
        type: 'date',
        /*xAxes: [{
          ticks: {
            autoSkip: true,
            maxTicksLimit: 30
          }
        }]*/
        xAxes: [{
          afterTickToLabelConversion: function(data){
            var xLabels = data.ticks;
            xLabels.forEach(function (labels, i) {
              if (i % 2 == 1){
                xLabels[i] = '';
              }
            });
          } 
        }]
      }
    },
    data: {
      labels: labels2,
      datasets: [
      {
        label: 'CO2 Levels',
        data: data2,
        backgroundColor: 'rgba(0, 119, 204, 0.3)'
      },
      ]
    }
};
var chart2 = new Chart(ctx2, config2);

0 个答案:

没有答案