A dynamically updating filled range chart with a threshold

This chart is very similar to the regular scrolling Line chart but is a filled range chart with a threshold set.

Update: It now has also been updated (September 2018) so that there's a gradient cover to the canvas - meaning that the canvas fades on the left hand side to white, Which, rather conveniently, is the same as the background color.

<script src="RGraph.common.core.js"></script>
<script src="RGraph.line.js"></script>

<style>
    #cvs-container {
        display:inline-block;
        position: relative;
    }

    #cvs-gradient-cover {
        position: absolute;
        width: 100%;
        height: 100%;
        display: inline-block;
        background-image: linear-gradient(90deg, white,rgba(255,0,0,0) 450px);
        top: 0; left: 0;
    }
</style>

<div id="cvs-container">
    <canvas id="cvs" width="1000" height="250">[No canvas support]</canvas>
    <div id="cvs-gradient-cover"></div>
</div>