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.
<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: 25, 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>