Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chartjs time plot xAxis shows year 1970

I am trying to plot a series of measurements (indexed by timestamps). When I try to plot example date the xaxis ranges from 1970 until 2018, although the data only exists in 2018-12.

What setting does scale the xaxis correctly?

document.addEventListener("DOMContentLoaded", function(event) {
    var ctx = document.getElementById("plot").getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ["Value"],
            datasets: [{
                'label': 'Value',
                'data': [
                    {t: '2018-12-01T12:00:00', y: 100},
                    {t: '2018-12-02T12:00:00', y: 90},
                    {t: '2018-12-03T12:00:00', y: 85},
                    {t: '2018-12-04T12:00:00', y: 86},
                    {t: '2018-12-05T12:00:00', y: 77},
                    {t: '2018-12-06T12:00:00', y: 73},
                    {t: '2018-12-07T12:00:00', y: 72},
                    {t: '2018-12-08T12:00:00', y: 70},
                    {t: '2018-12-15T12:00:00', y: 71},
                    {t: '2018-12-16T12:00:00', y: 72},
                    {t: '2018-12-17T12:00:00', y: 69},
                    ],
                'fill': false,
            }],
        },
        options: {
            responsive: true,
            title: {
                display: true,
                text: 'foobar',
            },
            scales: {
                xAxes: [{
                    type: 'time',
                    display: true,
                    time: {
                        parser: "YYYY-MM-DDTHH:mm:ss",
                    },
                }]
            },
        },
    });
});
like image 427
DangerRanger Avatar asked Dec 02 '18 17:12

DangerRanger


Video Answer


2 Answers

type: 'time',
display: true,
time: {
    parser: "YYYY-MM-DDTHH:mm:ss",
},

You can add in scale > xAxes > time according to ChartJS And you can use also add time format of MomentJS

type: 'time',
display: true,
distribution: 'series',
time: {
    unit:"year",
    displayFormats:{year:'YYYY'},
    min:'1970' ,
    max:'2018',
}
like image 164
Abdullah Ockba Avatar answered Oct 10 '22 20:10

Abdullah Ockba


I don't know if this will help you, but when I tried to add a date "2017/02/29", the x-axis also goes back to 1970, because there were only 28 days in Feb 2017!

like image 1
user11672711 Avatar answered Oct 10 '22 18:10

user11672711