RGraph with missing data points

Trying to find a way to plot a continuous points but with missing data points

by Abeee Doe

HTML

<script src="https://www.rgraph.net/libraries/RGraph.common.core.js"></script>
<script src="https://www.rgraph.net/libraries/RGraph.common.dynamic.js"></script>
<script src="https://www.rgraph.net/libraries/RGraph.common.effects.js"></script>
<script src="https://www.rgraph.net/libraries/RGraph.common.key.js"></script>
<script src="https://www.rgraph.net/libraries/RGraph.common.tooltips.js"></script>
<script src="https://www.rgraph.net/libraries/RGraph.drawing.rect.js"></script>
<script src="https://www.rgraph.net/libraries/RGraph.line.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <canvas id='cvs1' width='900' height='300' style='border:solid 1pt red'>
        [No canvas support]
    </canvas>
    <hr>
    <canvas id='cvs2' width='900' height='300' style='border:solid 1pt blue'>
        [No canvas support]
    </canvas>

JavaScript

drawAll();

        $(window).resize(function() {
            drawAll();
        });

        function drawAll() {
            var x=150;
            var data = [[0, 50, 100, x, 200],[10,20,30,40,50]];
            drawChart('cvs1', data);

            x=null;
            var data = [[0, 50, 100, x, 200],[10,20,30,40,50]];
            drawChart('cvs2', data);
        }

        function drawChart(canvasId, data) {
            var canvas = document.getElementById(canvasId);
            RGraph.Reset(canvas);

            canvas.width  = $(window).width() * 0.9;
            var text_size = Math.min(10, ($(window).width() / 1000) * 20 );
            var linewidth = $(window).width() > 500 ? 2 : 1;
                linewidth = $(window).width() > 750 ? 3 : linewidth;

            var line = new RGraph.Line(canvasId, data);
            line.set('chart.text.size', text_size);
            line.Set('chart.background.barcolor1', 'rgba(255,255,255,1)');
            line.Set('chart.background.barcolor2', 'rgba(255,255,255,1)');
            line.Set('chart.background.grid.color', 'rgba(238,238,238,1)');
            line.Set('chart.colors', [ 'red',  'green',  'blue']);
            line.Set('chart.linewidth', 1);
            line.Set('chart.hmargin', 15);
            line.Set('chart.labels', ['Q1\n2017','Q2','Q3','Q4','Q1\n2018']);
            line.Set('chart.gutter.left',40);
            line.Set('chart.gutter.right',10);
            line.Set('chart.gutter.bottom',50);
            line.Set('chart.filled', true);
            line.Set('chart.filled.accumulative',true);
            line.Set('chart.key', ['ABC', 'DEF']);
            line.Set('chart.tickmarks.dot.color','white');
            line.Set('chart.backgroundGridAutofitNumvlines',data.length);
            line.Set('key.position','gutter'); // or graph
            line.Set('chart.ymin',0);
            line.Set('chart.ymax',250);
            line.Set('chart.numyticks',5);
            line.Set('chart.key.position.x',50);
     ...