A thin set of VProgress bars
This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.vprogress.js"></script>
Put this where you want the chart to show up:
<canvas id="cvs" width="600" height="400" style="background-color: black"">
[No canvas support]
</canvas>
This is the code that generates the chart:
<script>
new RGraph.VProgress({
id: 'cvs',
min: 0,
max: 100,
value: 16.66,
options: {
tickmarksOuter: false,
colors: ['#68C7FE'],
marginRight: 540,
colorsStrokeOuter: 'rgba(0,0,0,0)',
backgroundColor: '#666'
}
}).draw();
new RGraph.VProgress({
id: 'cvs',
min: 0,
max: 100,
value: 33.33,
options: {
tickmarksOuter: false,
colors: ['#4BB3D3'],
marginLeft: 120,
marginRight: 445,
colorsStrokeOuter: 'rgba(0,0,0,0)',
backgroundColor: '#666'
}
}).draw();
new RGraph.VProgress({
id: 'cvs',
min: 0,
max: 100,
value: 50,
options: {
tickmarksOuter: false,
colors: ['#4BB3D3'],
marginLeft: 210,
marginRight: 355,
colorsStrokeOuter: 'rgba(0,0,0,0)',
backgroundColor: '#666'
}
}).draw();
new RGraph.VProgress({
id: 'cvs',
min: 0,
max: 100,
value: 66.66,
options: {
tickmarksOuter: false,
colors: ['#86AA65'],
marginLeft: 300,
marginRight: 270,
colorsStrokeOuter: 'rgba(0,0,0,0)',
backgroundColor: '#666'
}
}).draw();
new RGraph.VProgress({
id: 'cvs',
min: 0,
max: 100,
value: 82.33,
options: {
tickmarksOuter: false,
colors: ['#EDA637'],
marginLeft: 390,
marginRight: 180,
colorsStrokeOuter: 'rgba(0,0,0,0)',
backgroundColor: '#666'
}
}).draw();
new RGraph.VProgress({
id: 'cvs',
min: 0,
max: 100,
value: 100,
options: {
tickmarksOuter: false,
colors: ['#D94C4B'],
marginLeft: 470,
marginRight: 100,
colorsStrokeOuter: 'rgba(0,0,0,0)',
backgroundColor: '#666'
}
}).draw();
</script>