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