A predominantly Line chart based status dashboard

This is a darker dashboard which shows multiple Line charts and a Pie chart (which uses the donut option). Lots of both code and CSS for this demo as it goes far beyond the normal one chart demos.

This goes in the documents header:

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

Put this where you want the chart to show up:

<style>
    div#cc1,
    div#cc2 {
        width: 295px;
        height: 200px;
        background-color: black;
        float:left;
    }
    div#cc3 {
        width: 190px;
        height: 200px;
        background-color: black;
        float:left;
        position: relative;
    }

    div#cc3 span:nth-child(2) {
        display: inline-block;
        position: relative;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        font-size: 40pt;
        color: #02BDD0;
    }
    
    div#cc4 {
        width: 195px;
        height: 200px;
        background-color: black;
        float:left;
    }
    
    div#cc5,
    div#cc6 {
        width: 490px;
        height: 200px;
        background-color: black;
        float:left;
    }
    
    div#cc1,
    div#cc2,
    div#cc3,
    div#cc4,
    div#cc5,
    div#cc6 {
        float: left;
    }
    
    div span:nth-child(1) {
        color: #ccc;
        font-size: 10pt;
        position: absolute;
        top: 0;
        left: 5px;
    }
</style>

This is the code that generates the chart:

<script>
    l1 = new RGraph.SVG.Line({
        id: 'cc1',
        data: [
            [0,8,0,0,8,0,2,8,0,0,8,1,0,6],
            [null,null,null,null,null,null,null,null,null,null,null,null,null,5],
            [15,13,12,15,13,13,15,12.5,13,14,13,12,16,17],
            [null,null,null,null,null,null,null,null,null,null,null,null,null,null]
        ],
        options: {
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            filled: true,
            linewidth: 2,
            colors: ['#C2BBCD','rgba(0,0,0,0)','#EFB875'],
            filledColors: ['#9894AD','red','#C8924C'],
            filledOpacity: 0.85,
            filledAccumulative: true,
            gutterLeft: 25,
            gutterRight: 5,
            gutterTop: 35,
            gutterBottom: 30,
            xaxis: false,
            yaxis: false,
            textColor: '#aaa',
            textSize: 8,
            key: ['searchapi','scheduled search','interactive search'],
            keyColors: ['#C2BBCD','red','#EFB875'],
            keyOffsety: 180,
            keyTextBackground: 'rgba(0,0,0,0)',
            keyTextColor: '#ccc',
            xaxisLabels: [
                '', '10:48',
                '', '10:50',
                '', '10:52',
                '', '10:54',
                '', '10:56',
                '', '10:58',
                ''
            ]
        }
    }).draw();



    l2 = new RGraph.SVG.Line({
        id: 'cc2',
        data: [
        
            [40,8,0,0,0,0,0,0,0,0,0,0,0,28],
            [4,8,1,1,5,0,1,5,0,0,5,0,0,4],
            [0,0,0,1,5,0,0,0,0,0,0,0,0,0]
        ],
        options: {
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            filled: true,
            linewidth: 2,
            colors: [],
            filledColors: ['#8DB26C','green','#CB6800'],
            filledOpacity: 0.85,
            filledAccumulative: true,
            gutterLeft: 23,
            gutterRight: 5,
            gutterTop: 35,
            gutterBottom: 30,
            xaxis: false,
            yaxis: false,
            textColor: '#aaa',
            textSize: 8,
            key: ['searchapi','scheduled search','interactive search'],
            keyColors: ['#8DB26C','green','#CB6800'],
            keyOffsety: 180,
            keyTextBackground: 'rgba(0,0,0,0)',
            keyTextColor: '#ccc',
            yaxisUnitsPost: 'k',
            yaxisLabelsCount:3,
            xaxisLabels: [
                '', '10:48',
                '', '10:50',
                '', '10:52',
                '', '10:54',
                '', '10:56',
                '', '10:58',
                ''
            ]
        }
    }).draw();



    p1 = new RGraph.SVG.Pie({
        id: 'cc4',
        data: [70, 5,22,3],
        options: {
            colors: ['green','#a00','#CB6800','#00a'],
            donut: true,
            donutWidth: 20
        }
    }).draw();




    l5 = new RGraph.SVG.Line({
        id: 'cc5',
        data: [
            [0,9,0,0,8,0,2,8,0,0,8,1,0,6],
            [6,6,8,5,6,8,6,7,8,9,7,6,8,5],
            [1,1,1,1,1,1,1,1,1,1,1,1,1,1],
            [1,1,1,1,1,1,1,1,1,1,1,1,1,1],
            [2,2,2,2,2,2,2,2,2,2,2,2,2,2],
            [1,1,1,1,1,1,1,1,1,1,1,1,1,1],
            [2,2,2,2,2,2,2,2,2,2,2,2,2,2],
            [1,1,1,1,1,1,1,1,1,1,1,1,1,1]
        ],
        options: {
            yaxisMax: 20,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            filled: true,
            linewidth: 2,
            colors: ['#0a0','#aa0','#00a','transparent','transparent','transparent','transparent','transparent'],
            filledColors: ['#278419','#CA9B53','#A390AE','#B71700','#2D929E','#126293','#8AB269'],
            filledOpacity: 0.85,
            filledAccumulative: true,
            gutterLeft: 25,
            gutterRight: 5,
            gutterTop: 35,
            gutterBottom: 30,
            xaxis: false,
            yaxis: false,
            textColor: '#aaa',
            textSize: 8,
            key: ['searchapi','scheduled search','interactive search'],
            keyColors: ['#C2BBCD','red','#EFB875'],
            keyOffsety: 180,
            keyTextBackground: 'rgba(0,0,0,0)',
            keyTextColor: '#ccc',
            xaxisLabels: [
                '', '10:48',
                '', '10:50',
                '', '10:52',
                '', '10:54',
                '', '10:56',
                '', '10:58',
                ''
            ]
        }
    }).draw();




    l6 = new RGraph.SVG.Line({
        id: 'cc6',
        data: [
        
            [4,10,0,0,0,0,0,0,0,0,0,0,0,28],
            [40,8,1,1,5,0,1,5,0,0,5,0,0,4],
            [0,0,0,1,5,0,0,0,0,0,0,0,0,0]
        ],
        options: {
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            filled: true,
            linewidth: 2,
            colors: [],
            filledColors: ['#8DB26C','#5A3180','#CB6800'],
            filledOpacity: 0.85,
            filledAccumulative: true,
            gutterLeft: 23,
            gutterRight: 5,
            gutterTop: 35,
            gutterBottom: 30,
            xaxis: false,
            yaxis: false,
            textColor: '#aaa',
            textSize: 8,
            key: ['searchapi','scheduled search','interactive search'],
            keyColors: ['#8DB26C','green','#CB6800'],
            keyOffsety: 180,
            keyTextBackground: 'rgba(0,0,0,0)',
            keyTextColor: '#ccc',
            yaxisUnitsPost: 'k',
            yaxisLabelsCount:3,
            xaxisLabels: [
                '', '10:48',
                '', '10:50',
                '', '10:52',
                '', '10:54',
                '', '10:56',
                '', '10:58',
                ''
            ]
        }
    }).draw();
</script>