Comment afficher la date comme étiquette sur l'axe des x dans chart.js ?

Question

J'essaie d'afficher une date sur x.axix en utilisant chart.js. Je reçois deux valeurs en json de la base de données : un horodatage et un relevé de capteur. Je veux afficher un tick de la lecture du capteur contre chaque timestamp dans le graphique. Les données sont mises à jour périodiquement toutes les quelques minutes.

Il s'agit du format de l'horodatage :

2018-12-07 12:45:17

Voici mon code pour le graphique jusqu'à présent :

var ctx = document.getElementById ('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
    type: 'line',
    data: {
    labels: time_Array, // example value 2018-12-07 12:45:17 .......
    datasets: [{
    label: 'Humidity',
    data: meas_value_Array, //// example value 116, 120 110 ....
    backgroundColor: "rgba(255,153,0,0.4)"
    }]
    },

        options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }],
            xAxes: [{
                type: 'time',
                time: {
                    unit: 'minute',
                    displayFormats: {
                        second: 'h:MM:SS',
                        minute: 'h:MM',
                        hour: 'hA',
                        day: 'MMM D',
                        month: 'YYYY MMM',
                        year: 'YYYY'
                    },                            
                },
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'value'
                }                        
            }]                    
        }
    }
});

Il y a cette erreur dans Firefox :

TypeError: i.min is undefined[Learn More] Chart.min.js:14:18390
determineDataLimits
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:14:18390
update
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:13:2110
n
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:12:23263
[26]</e.exports/o.each
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:12:8324
update
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:12:24692
updateLayout
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:11:30363
update
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:11:30126
[23]</e.exports/t.Controller
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:11:27625
t
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:12:22144
dspChrt3

Alors que Chrome affiche cette erreur :

Uncaught TypeError: Cannot read property 'call' of undefined
    at a.determineDataLimits (Chart.min.js:14)
    at a.update (Chart.min.js:13)
    at n (Chart.min.js:12)
    at Object.o.each (Chart.min.js:12)
    at Object.update (Chart.min.js:12)
    at t.Controller.updateLayout (Chart.min.js:11)
    at t.Controller.update (Chart.min.js:11)
    at new t.Controller (Chart.min.js:11)
    at new t (Chart.min.js:12)
    at dspChrt3 (chart3.php:30)

Voici un extrait de code où j'ai essayé d'ajouter des valeurs de tableau en code dur :

        var time_Array = ["2018-12-07 15:45:17", "2018-12-07 15:30:17", "2018-12-07 15:15:16", "2018-12-07 15:00:17", "2018-12-07 14:45:16", "2018-12-07 14:30:17", "2018-12-07 14:15:17", "2018-12-07 14:00:17", "2018-12-07 13:45:17", "2018-12-07 13:30:16", "2018-12-07 13:15:17", "2018-12-07 16:00:17"];
        var meas_value_Array = [121, 121, 121, 121, 121, 121, 121, 121, 121, 121, 121, 121];

        //console.log(time_Array);
        //console.log(meas_value_Array);

        var ctx = document.getElementById ('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
        type: 'line',
        data: {
        labels: time_Array,
        datasets: [{
        label: 'Humidity',
        data: meas_value_Array,
        backgroundColor: "rgba(255,153,0,0.4)"
        }]
        },

            options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }],
                xAxes: [{
                    type: 'time',
                    time: {
                        unit: 'minute',
                        displayFormats: {
                            second: 'h:MM:SS',
                            minute: 'h:MM',
                            hour: 'hA',
                            day: 'MMM D',
                            month: 'YYYY MMM',
                            year: 'YYYY'
                        },                            
                    },
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'value'
                    }                        
                }]                    
            }
        }
    });

<script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

<html>
<meta charset="utf-8">
<script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

<body>
<canvas id="myChart"></canvas>

</body>
</html>

Voici l'ensemble de mon code JS :

   var Device_Data;
   var temperature, meas_value;

   function dspChrt3(Device_Data) { 
        //console.log(Device_Data);

        var time_Array = [];
        var meas_value_Array = [];

       for(var i=0; i<Device_Data.length; i++) {
            time_Array.push(Device_Data[i].date_time);
            meas_value_Array.push(Device_Data[i].meas_value);
            }

        console.log(Device_Data[0].date_time);
        console.log(Device_Data[1].meas_value);
        date_time = Device_Data[0].date_time;
        meas_value = Device_Data[1].meas_value;
        time_Array.shift();
        time_Array.push(date_time);
        meas_value_Array.shift();
        meas_value_Array.push(meas_value);

        //console.log(time_Array);
        //console.log(meas_value_Array);

        var ctx = document.getElementById ('myChart11').getContext('2d');
        var myChart = new Chart(ctx, {
        type: 'line',
        data: {
        labels: time_Array,
        datasets: [{
        label: 'Humidity',
        data: meas_value_Array,
        backgroundColor: "rgba(255,153,0,0.4)"
        }]
        },

            options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }],
                xAxes: [{
                    type: 'time',
                    time: {
                        unit: 'minute',
                        displayFormats: {
                            second: 'h:MM:SS',
                            minute: 'h:MM',
                            hour: 'hA',
                            day: 'MMM D',
                            month: 'YYYY MMM',
                            year: 'YYYY'
                        },                            
                    },
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'value'
                    }                        
                }]                    
            }
        }
    });
    }

Answer 1

Si je vous ai bien compris, vous voulez simplement que l'axe des x soit une date, donc 2018-12-07 15:45:17. J'ai réussi à obtenir cela. Voici l'ensemble du code que j'ai. Je n'ai pas utilisé chart.js avant et je n'ai pas eu beaucoup de temps pour regarder correctement mais regardez les displayFormats et changez ce que vous voulez. J'espère que cela vous aidera.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.js"></script>

<body>
<canvas id="myChart" width="400" height="400"></canvas>

<script>
$(document).ready(function(){
        var time_Array = ["2018-12-07 15:45:17", "2018-12-07 15:30:17", "2018-12-07 15:15:16", "2018-12-07 15:00:17", "2018-12-07 14:45:16", "2018-12-07 14:30:17", "2018-12-07 14:15:17", "2018-12-07 14:00:17", "2018-12-07 13:45:17", "2018-12-07 13:30:16", "2018-12-07 13:15:17", "2018-12-07 16:00:17"];
        var meas_value_Array = [121, 121, 121, 121, 121, 121, 121, 121, 121, 121, 121, 121];

        //console.log(time_Array);
        //console.log(meas_value_Array);

        var ctx = document.getElementById ('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
        type: 'line',
        data: {
        labels: time_Array,
        datasets: [{
        label: 'Humidity',
        data: meas_value_Array,
        backgroundColor: "rgba(255,153,0,0.4)"
        }]
        },

            options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }],
                xAxes: [{
                    type: 'time',
                    time: {
                        parser: 'YYYY-MM-DD HH:mm:ss',
                        unit: 'minute',
                        displayFormats: {
                            'minute': 'YYYY-MM-DD HH:mm:ss',
                            'hour': 'YYYY-MM-DD HH:mm:ss'
                        }
                    },
                    ticks: {
                        source: 'data'
                    }
                }]                    
            }
        }
    });
});
</script>

</body>
</html>