# 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.

Searches over time by query type
Search capacity by query type
Searches 260
Capacity usage by query
Capacity usage by query
search capacity by user
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>