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

by

2👍

✅

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.

Leave a comment