How to get chart from data points (arrays) with inconsistent time intervals and chart.js?

I would like to display time based line charts with chart.js. The data is send via websocket as JSON:

{"sid":"eg.room06.temperatures.temp_1|avg|48h|now|100","series":[[1493198415233,21.4],[1493199364487,22.49],[1493201144363,21.97],[1493202824105,22.17],[1493204564473,22.38],[1493206324305,23.22],[1493208065142,23.39],[1493209786437,23.29],[1493211467193,23.05],[1493213248115,22.96],[1493214948390,23.08],[1493216828460,23.56],[1493268170194,19.03],[1493268589754,20.64],[1493270209957,20.4],[1493271949853,20.63],[1493273729827,20.92],[1493275649936,21.33],[1493277149966,21.57],[1493279129695,21.72],[1493280629731,22.23],[1493282310040,22.83],[1493284229704,22.82],[1493285930008,22.96],[1493287629860,22.7],[1493289330698,22.77],[1493290970948,23.15],[1493292690815,23.34],[1493294530805,23.53],[1493296151043,23.73],[1493298111710,23.74],[1493299651839,23.91],[1493301471857,24.15],[1493303152125,24.16],[1493304932038,24.03],[1493306652867,23.94],[1493356934754,20.26],[1493358474848,20.55],[1493360075050,21.08],[1493361834946,21.6],[1493363614864,21.99],[1493365434873,22.31],[1493367055112,22.75],[1493368855114,23.0],[1493370754724,23.08],[1493371055130,23.125],[1493371215233,23.125]],"cmd":"series"}

At first JSON.parse is used to get the required data. Within a loop the x- and y-values get separated.

var obj = JSON.parse(evt.data);
var timeIntX = [];
var valueY = [];
for (var i=0; i < obj.series.length; i++) {
    var valPair = obj.series[i];
    timeIntX.push(valPair[0]);
    valueY.push(valPair[1]);
}

timeIntX (epoch format):

1493199182012,1493199364487,1493201144363,1493202824105,1493204564473,1493206324305,1493208065142,1493209786437,1493211467193,1493213248115,1493214948390,1493216828460,1493268170194,1493268589754,1493270209957,1493271949853,1493273729827,1493275649936,1493277149966,1493279129695,1493280629731,1493282310040,1493284229704,1493285930008,1493287629860,1493289330698,1493290970948,1493292690815,1493294530805,1493296151043,1493298111710,1493299651839,1493301471857,1493303152125,1493304932038,1493306652867,1493356934754,1493358474848,1493360075050,1493361834946,1493363614864,1493365434873,1493367055112,1493368855114,1493370754724,1493371854699,1493371982012

valueY:

21.66,22.49,21.97,22.17,22.38,23.22,23.39,23.29,23.05,22.96,23.08,23.56,19.03,20.64,20.4,20.63,20.92,21.33,21.57,21.72,22.23,22.83,22.82,22.96,22.7,22.77,23.15,23.34,23.53,23.73,23.74,23.91,24.15,24.16,24.03,23.94,20.26,20.55,21.08,21.6,21.99,22.31,22.75,23,23.14,23.25,23.25

Now these arrays serve as X- and Y-data for the chart.

var ctx = document.getElementById("myChart");

var myLineChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: timeIntX,
        datasets: [
        {
            label: "Temperatur Zimmer 1006",
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(75,192,192,0.4)",
            borderColor: "rgba(75,192,192,1)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(75,192,192,1)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(75,192,192,1)",
            pointHoverBorderColor: "rgba(220,220,220,1)",
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
            data: valueY,
            spanGaps: true,
        }]
    }
});

As script source I included Chart.js, moment.js and jquery.js. The following code exists in the html body:

<canvas id="myChart" width="300" height="100"></canvas>

The chart is displayed, but because of the different time intervals the data is not correctly scaled. I know that there is the time scale option (see Documentation) but after a lot of tries I still don’t know how to use it right.

Please ask if you need additional information. It would be great if you could help me.

Thank you in advance for your answer!

Answer

I now found out how to solve my problem. The main issue was the construction of the array. Below you can see my new code. The raw data stay the same.

var obj = JSON.parse(evt.data);
var plotData = [];
for (var i=0; i < obj.series.length; i++) {
    plotData.push({'x': obj.series[i][0], 'y': obj.series[i][1]});
}

The following code shows the initialization of the chart. In the documentation you find the data formatting under Scatter Line Charts.

var chartData = {
    datasets: [{
        borderColor: 'orange',
        label: 'time chart',
        data: plotData,
        lineTension: 0.1,
    }]
};

var ctx = document.getElementById("myChart").getContext("2d");

window.myLineChart = new Chart(ctx, {
    type: 'line',
    data: chartData,
    options: {
        title: { 
            display: true,
            text: "series1",
            fontSize: 30
        },
        scales: {
            xAxes: [{
                type: 'time',
                time: {
                    tooltipFormat: 'h:mm:ss a'
                }
            }]
        }
    },
});

This setup works for me. Don´t forget the tag in your HTML code and the reference to jquery.js, moment.js and chart.js.

I hope this answer can save some time.

Advertisement

Answer