Search code examples
javascriptnullchart.jsdatapoint

chartjs - Only connect dots if less than 1 minute apart

I have a chart with values that arrive at variable intervals. usually i have data point per second, but during a pause i could get no point at all for 20 minutes. or over a whole weekend.. here is a screenshot of my current chart:

enter image description here

what I would like to do, is to delete the connetion line between the points if the points are more than 1 minute apart. I could do it by inserting "null" values, but given that the data arrives every second I would have to add a lot of null values over multiple weekends..

is there an automated way to get to this result? i have been searching extensively without finding a proper solution. SpanGaps does not affect my data since there is no empty value in between. what i would need is the opposite of spanGaps.. sort of like "createGaps" that accpets an integer as max interval for the gap.

This is my current flask template code for the green line:

  var myChart = new Chart(ChartDateTime, {
    type: 'line',
    data: {
        labels: [{% for day in days %}'{{ day }}',{% endfor %}],
        datasets: [{
            label: 'Recognized',
            data: [{% for okCrate in recognized %}{{ okCrate }},{% endfor %}],
            backgroundColor: 'transparent',
            borderColor: '#abef14',
            borderWidth: 1,
            radius:2,
            lineTension: 0.1,
            spanGaps: false,
            pointBackgroundColor: '#abef14',
            yAxisID: 'y'
        },
        
       ...
       ...

Any help appreciated.

EDIT----------

Trying to implement the segment check as suggested by @Josh kelly, but looks like P0.x is a float and i am not able to figure out the date..

    function checkdist (ctx) {
            const value = ctx.p0.x;
            const nextvalue = ctx.p1.x;
            const diffInMs = new Date(nextvalue).getTime() - new Date(value).getTime();
            const diffInMinutes = Math.floor(diffInMs / 1000 / 60); // convert to minutes
            if (diffInMinutes > 1) {
                console.log(diffInMinutes);
                return 'rgb(0,0,0,0.2';
            }
            else
            {
                return;
            }
    }

and my segment code:

            segment:{                          
                    borderColor: ctx => checkdist(ctx),                                         
              
            },
            spanGaps: true,
Solution

  • I typically handle this by inserting null values wherever there should be a gap (as you mentioned). However, it looks like the segments option (one of Chart.js's scriptable options) should be able to do what you want. See here for an example.