How do I show null values on my Line chart? - Official RGraph support forum

How do I show null values on my Line chart?

Posted by Joachim at 18:53 on 16th August 2021
searched but could not find a solution for this: How could I setup a line chart wich has null values in its data. The resulting line should not handle null values as it were nummber "0" but rather show a gap and/or connect to the next no-null value.

Posted by Richard at 21:43 on 16th August 2021
In your data, instead of using zero, you can use the word null. Like this:

new RGraph.Line({
    id: 'cvs',
    data: [5,4,6,8,null,4,8,5,2,null,null,8,4,6],
    options: {
        title: 'A Line chart with null values'

In the download ( ) there's a demo page which demonstrates a Line chart with null values called demos/line-null-values.html

Keep in mind this though: If you have the following data:

[4, null, 7, null, null, 9]

You won't see anything displayed on your chart. This is because for a line to be drawn you need at least two consecutive, non-null points, and this dataset doesn't have that.

Posted by Joachim at 13:40 on 17th August 2021
Thanks for your reply - to clarify my question: If you have null-values in your data, the line will draw gaps for null-values - e.g. with [1, 4, null, 7, 6, 7, 9] you will have a gap between points 4 and 7 and no connection between 4 and 7. I wonder how I could set my chart that all defined no-null values are connected.

Posted by Richard at 19:02 on 17th August 2021
There's no option for that but by adding some ondraw event code you can add the connectors. like this:

Don't ask me how it works though - I'm not 100% sure! It's not too bad though - only 40ish lines and you could put it in a library file I guess.

Posted by Joachim at 10:27 on 18th August 2021
Thank for your response I've tried the ondraw event - it worked (but supports only one datagroup). Would be nice to have similar solutions e.g. use an option like "spanGap" which would allow connections across single or multiple null values.

Posted by Richard at 17:01 on 18th August 2021
I'll update the example for multiple datasets. And I'll look at adding an option for this so you don't need the ondraw function.

Currently updating the Sheets connector because Google has updated their API so it's nice and broken. How nice.

Posted by Richard at 12:21 on 20th August 2021
Ok the example CodePen is now updated for multiple datasets:

Posted by Joachim at 13:34 on 20th August 2021

thank you for your effort! Solution works fine sofar. But I'd like to keep the color of the lines (instead of grey). if I omit "grey" - both lines get the second color of the colors-array. Is it possible to change this?

Posted by Richard at 14:47 on 20th August 2021
In the code change this:

    'b m % % l % % s gray',
    obj.coords2[datasetIdx][start][0], obj.coords2[datasetIdx][start][1],
    obj.coords2[datasetIdx][end][0], obj.coords2[datasetIdx][end][1],

To this:

    'b m % % l % % s %',
    obj.coords2[datasetIdx][start][0], obj.coords2[datasetIdx][start][1],
    obj.coords2[datasetIdx][end][0], obj.coords2[datasetIdx][end][1],[datasetIdx]

I think that that should do it.

Posted by Joachim at 16:32 on 20th August 2021

thanks! This works fine. One last question how do I set the linewidth for the span lines? Tried adding "[datasetIdx]" but has no effect.

Posted by Joachim at 16:42 on 20th August 2021

I think I fixed the linewidt used:
obj.context.lineWidth = obj.getLineWidth(0);

Posted by Richard at 16:59 on 20th August 2021
That would work, or you could incorporate into the path function call like this:

    'b lw % m % % l % % s %',
    obj.coords2[datasetIdx][start][0], obj.coords2[datasetIdx][start][1],
    obj.coords2[datasetIdx][end][0], obj.coords2[datasetIdx][end][1],[datasetIdx]

Posted by Richard at 17:03 on 20th August 2021
PS. I've updated the pen with the linewidth change:

Posted by Richard at 10:08 on 22nd August 2021
I've taken a liking to this, so I'll look at incorporating this into the main Line chart for version 6.03.

Posted by Richard at 22:16 on 23rd August 2021
This is now incorporated into the (canvas) Line chart. There's the following three properties:

nullBridge         (false)
nullBridgeLinewidth (null)
nullBridgeColors    (null) // Can be a string or an array of strings
nullBridgeLinedash ([5,5])

SVG Line chart to follow.

Posted by Joachim at 15:37 on 18th September 2021

Thank for your response. I've testet it. It works fine but I ran into a (little) problem until I found that you changed the option-name from "nullBridgeLinedash" to "nullBridgeDashArray". Anyway thanks a lot!    

[Replies are now closed]