Chart.js line graph change x axis seperation

Question

I am currently creating a system to read data from a mysql database in json format and display this data in a chart.js line graph. The values will be inserted into the database when they are received from the transmitter every minute. The data values in the format are DateTimeOfRecording (mysql DATETIME), Temperature and humidity. I have managed to get the graph to display the data.

However, the graphical seperation between timestamps is the same, no matter what the time difference is between them. Is there any way of scaling them so that, for example, if recording of the data is missed, then a gap will be created in the chart, instead of the next value being placed directly after?

This is my javascript file for creating the chart:

$(document).ready(function(){
$.ajax({
    url : "http://"+self.location.host+"/chartjs/tests/ChartDataTest.php",
    type : "GET",
    success : function(data){
        console.log(data);
        var Temperature = [];
        var RecordingDateTime = [];
        var Humidity = [];
        for(var i in data)
        {
            RecordingDateTime.push(data[i].RecordingDateTime);
            Temperature.push(data[i].Temperature);
            Humidity.push(data[i].Humidity);
        }

        var chartdata = 
        {
            labels: RecordingDateTime,
            datasets:
            [
                {
                    label: "Temperature",
                    fill: false,
                    lineTension: 0.1,
                    backgroundColor: "rgba(230, 0, 0, 0.75)",
                    borderColor: "rgba(230, 0, 0, 1)",
                    pointHoverBackgroundColor: "rgba(230, 0, 0, 1)",
                    pointHoverBorderColor: "rgba(230, 0, 0, 1)",
                    data: Temperature
                },
                {
                    label: "Humidity",
                    fill: false,
                    lineTension: 0.1,
                    backgroundColor: "rgba(59, 89, 152, 0.75)",
                    borderColor: "rgba(59, 89, 152, 1)",
                    pointHoverBackgroundColor: "rgba(59, 89, 152, 1)",
                    pointHoverBorderColor: "rgba(59, 89, 152, 1)",
                    data: Humidity
                }

            ]
        };

        var ctx = $("#mycanvas");
        var LineGraph = new Chart(ctx,
        {
            type: 'line',
            data: chartdata
        });
    },
    error : function(data)
    {

    }
});

});

peter.swallow peter.swallow · Accepted Answer · 2017-06-15T14:11:34

I think you need to specify your x-axis as using the type of time.

Try something like this...

var ctx = $("#mycanvas");
        var LineGraph = new Chart(ctx,
        {
            type: 'line',
            data: chartdata,
            options: {
               scales: {
                   xAxes: [
                     {
                        type: "time",
                        time: {
                           format: timeFormat,
                           round: 'minute',
                        }
                     }],
               },
            }
        });

Chart.js line graph change x axis seperation

1 Answers