Chartjs-Loop to create lines for graph chartjs

by

0👍

You can play with it as you seem fit but this will get you started:

HTML

<div id="test" style="height:600px; width:600px;">
    <canvas id="lineChart" style="border: 1px solid black; margin: 25px 25px" height="300">Canvas</canvas>
</div>

JS

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

var newBar = {
    labels: [ '2018-02-27 11:33:35', '2018-02-27 11:34:23', '2018-02-27 11:37:25', '2018-02-27 11:37:58'],
    datasets: [{
        fill: false,
        label: 'Sensor 1',
        backgroundColor: "red",
        data: [22.4, 15.9, 32.5, null],
    },
    {       
        fill: false,
        label: 'Sensor 2',
        backgroundColor: "yellow",
        data: [ null, null, null, 2,1],
    },{
        fill: false,
        label: 'Sensor 3',
        backgroundColor: "blue",
        data: [ -2, 8.2, 18.5, 20.3, null],
    }],
}

var myChart = new Chart(ctx, {
    type: 'line',
    data: newBar,

    options:{ 
        scales: {
            yAxes: [{
                ticks: {
                    stepSize: 2
                }
            }]
        },
        title:{
            display: true,
            fontSize: 16,
            text: 'Temp over Time'
        }, 
    }
});

This should be enough to get you in the right direction.

Leave a comment