2

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,
sharkyenergy
  • 3,842
  • 10
  • 46
  • 97

1 Answers1

1

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.

Josh Kelley
  • 56,064
  • 19
  • 146
  • 246
  • thank you for your answer, if i get it right, (first time for me coding in js) i would use the scriptable options to detect if the distance is higher than 1 minute, and if so set the style fo that line to invisibel? – sharkyenergy Apr 24 '23 at 12:13
  • @sharkyenergy - Yes. – Josh Kelley Apr 24 '23 at 12:57
  • i updated the question with my current code following your advice, but i am having difficulties reading the date from the X axis with p0 and p1. mind having a look? – sharkyenergy Apr 24 '23 at 13:17
  • @sharkyenergy - I noticed you're missing a `)` in your `rgb`. Otherwise, it's somewhat difficult to say what's going on without knowing the format of the data that's being output by your Flask app. Can you put together an example at codesandbox.io or CodePen (using [this template](https://codepen.io/leelenaleee/pen/WNyJXEe)), with some hard-coded data, to demonstrate? – Josh Kelley Apr 24 '23 at 13:21
  • here you go.. https://codepen.io/sharkyenergy/pen/VwEpPbE – sharkyenergy Apr 24 '23 at 13:50
  • 1
    I solved it by getting the values with this: `const value = ctx.chart.data.labels[ctx.p0DataIndex]; const nextvalue = ctx.chart.data.labels[ctx.p1DataIndex];` Thanks for your help! – sharkyenergy Apr 24 '23 at 14:20