Chart.js #5937 test01

by Akihiko Kusanagi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.min.js"></script>
<button onclick="zoom('WEEK')">
Zoom week</button>
</button>
              <canvas id="chart" height="250px" width="400px"></canvas>

JavaScript

var stats;
var chart;

var prepareData= function() {
        var h = []; 
        // keys
        h[0] = [];
        h[0][0] = 'timestamp';
        h[0][1] = stats[0][1];
        h[0][2] = stats[0][2];

        // datas
        h[1] = [];//ts
        h[2] = [];//inside hive
        h[3] = [];//outside hive
        //datasets for couvains zone
        h[4] = [];
        h[5] = [];
        for(let i = 1; i < stats.length; i++){
          h[1].push(moment(stats[i][0] * 1000));
          h[2].push({
            t:moment(stats[i][0] * 1000), y: stats[i][1]}); 
          h[3].push({t:moment(stats[i][0] * 1000), y:stats[i][2]}); 
        }
        h[4].push({t:0, y:30}); 
        h[4].push({t:h[1][h[1].length-1], y:30}); 
        h[5].push({t:0, y:36}); 
        h[5].push({t:h[1][h[1].length-1], y:36}); 

        return h;
}

var displayChart = function(stats){
        var timeFormat = 'DD/MM/YYYY HH:mm';

        var ctx = document.getElementById('chart').getContext('2d');

        const data = {
            // Labels should be Date objects
            //labels:this._stats[1],
            datasets: [{
                fill: false,
                label: "label1",
                data: stats[2],
                borderColor: '#fe8b36',
                pointRadius: 0,
                backgroundColor: [
                '#fe8b36'
                ]
            },{
                label: "label2",
                fill: false,
                data: stats[3],
                borderWidth: 1,
                pointRadius: 0,
                borderColor: 'rgba(99, 100, 200, 1)',
                backgroundColor: [
                'rgba(99, 100, 200, 0.2)'
                ]
              }, {
                label: "alert min",
                fill: false,
                data: stats[4],
                borderWidth: 0,
                pointRadius: 0,
                borderColor: '#00be1e',
                backgroundColor: [
                'rgba(0, 190, 30, 0.2)'
                ],
  ...