mardi 2 avril 2019

Maintain correct distance between points in the X-Axis

I am trying to use ChartJS to draw a chart showing different statuses (On/Off) of a device during a specific time period.

The X-Axis represents the date and time, and the Y-Axis represents the status (1-On, 0-Off).

My only problem is that the distance between 2 subsequent points on X-Axis is constant and not presenting the "real" distance between the two date-times.

For example, the distance between a point, and another point which is a second later is the same as the distance between a point and another point which is a day later.

Here is the code:

        var ctx = document.getElementById('myChart').getContext('2d');
    var chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'line',

        // The data for our dataset
        data: {
            labels: [
                new Date("2019-03-31T17:41:02.517839+00:00"),new Date("2019-03-31T17:41:13.969037+00:00"),new Date("2019-03-31T17:41:22.568130+00:00"),new Date("2019-03-31T17:41:23.568130+00:00"),new Date("2019-03-31T17:41:34.010461+00:00"),new Date("2019-03-31T17:41:35.010461+00:00"),new Date("2019-03-31T17:41:55.353745+00:00"),new Date("2019-03-31T17:41:56.353745+00:00"),new Date("2019-03-31T17:42:04.254075+00:00"),new Date("2019-03-31T17:42:05.254075+00:00"),new Date("2019-03-31T17:42:15.552743+00:00"),new Date("2019-03-31T17:42:25.306603+00:00"),new Date("2019-03-31T17:42:26.306603+00:00"),new Date("2019-03-31T17:43:13.747931+00:00"),new Date("2019-03-31T17:43:14.747931+00:00"),new Date("2019-03-31T18:03:46.567253+00:00"),new Date("2019-03-31T18:03:47.567253+00:00"),new Date("2019-03-31T18:30:38.945956+00:00"),new Date("2019-03-31T18:30:39.945956+00:00"),new Date("2019-03-31T18:45:10.718018+00:00"),new Date("2019-03-31T18:45:11.718018+00:00"),new Date("2019-03-31T19:51:24.369067+00:00"),new Date("2019-03-31T19:51:25.369067+00:00"),new Date("2019-03-31T19:53:40.861770+00:00"),new Date("2019-03-31T19:53:41.861770+00:00"),
            ],
            datasets: [{
                label: 'Activity',
                backgroundColor: 'rgba(30,140,50,0.5)',
                borderColor: 'rgba(30,140,50,0.5)',
                data: [
                1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 
]
            }]
        },

        // Configuration options go here
        options: {
            scales: {
                xAxes: [{
                    display: false,
                }],
                yAxes: [{
                    display: false,
                }],
            },
            elements: {
                line: {
                    tension: 0
                }
            },
        }

and here is how it looks like: enter image description here

Can you please help with that?

Thanks!




Aucun commentaire:

Enregistrer un commentaire