Here we have three Pie charts that have been configured to look like gauges showing percentages. They're regular Pie charts with two colours but then a big black circle is added over the top which makes them look like donut charts (somewhat). And finally the text is added to the center in the draw event.
<script src="RGraph.svg.common.core.js"></script> <script src="RGraph.svg.hbar.js"></script> <script src="RGraph.svg.pie.js"></script>Put this where you want the chart to show up:
<style>
div#meters{
position: relative;
background-color: black;
height: 425px;
}
div#meters div {
float: left;
width: 300px;
height: 300px;
}
div#chart-container4,
div#chart-container5,
div#chart-container6 {
position: absolute !important;
left: 0 !important;
top: 280px !important;
width: 900px !important;
height: 70px !important;
}
div#chart-container5 {top: 310px !important;}
div#chart-container6 {top: 340px !important;}
</style>
<div id="meters">
<div id="chart-container1"></div>
<div id="chart-container2"></div>
<div id="chart-container3"></div>
<div id="chart-container4"></div>
</div>
This is the code that generates the chart:
<script>
pie1 = new RGraph.SVG.Pie({
id: 'chart-container1',
data: [15,85],
options: {
colors: ['red', 'transparent'],
donut: true,
donutWidth: 20
}
}).on('draw', function (obj)
{
RGraph.SVG.create({
svg: obj.svg,
type: 'circle',
parent: obj.layers.background1,
attr: {
cx: obj.centerx,
cy: obj.centery,
r: obj.radius,
fill: 'gray'
}
});
RGraph.SVG.create({
svg: obj.svg,
type: 'circle',
parent: obj.layers.background1,
attr: {
cx: obj.centerx,
cy: obj.centery,
r: obj.radius - obj.properties.donutWidth,
fill: 'black'
}
});
// Add the text label
RGraph.SVG.text({
object: obj,
parent: obj.svg.all,
text: obj.data[0] + '%',
x: obj.centerx,
y: obj.centery,
halign: 'center',
valign: 'center',
size: 45,
bold: true,
color: '#999'
});
// Add the text label of the name
RGraph.SVG.text({
object: obj,
parent: obj.svg.all,
text: 'Charles',
x: obj.centerx,
y: obj.centery + 20,
halign: 'center',
valign: 'top',
size: 16,
bold: true,
color: '#999'
});
}).roundRobin({frames: 45});
new RGraph.SVG.Pie({
id: 'chart-container2',
data: [50,50],
options: {
colors: ['red', 'transparent'],
donut: true,
donutWidth: 20
}
}).on('draw', function (obj)
{
RGraph.SVG.create({
svg: obj.svg,
type: 'circle',
parent: obj.layers.background1,
attr: {
cx: obj.centerx,
cy: obj.centery,
r: obj.radius,
fill: 'gray'
}
});
RGraph.SVG.create({
svg: obj.svg,
type: 'circle',
parent: obj.layers.background1,
attr: {
cx: obj.centerx,
cy: obj.centery,
r: obj.radius - obj.properties.donutWidth,
fill: 'black'
}
});
// Add the text label
RGraph.SVG.text({
object: obj,
parent: obj.svg.all,
text: obj.data[0] + '%',
x: obj.centerx,
y: obj.centery,
halign: 'center',
valign: 'center',
size: 45,
bold: true,
color: '#999'
});
// Add the text label of the name
RGraph.SVG.text({
object: obj,
parent: obj.svg.all,
text: 'Ricky',
x: obj.centerx,
y: obj.centery + 20,
halign: 'center',
valign: 'top',
size: 16,
bold: true,
color: '#999'
});
}).roundRobin({frames: 45});
new RGraph.SVG.Pie({
id: 'chart-container3',
data: [42,58],
options: {
colors: ['red', 'transparent'],
donut: true,
donutWidth: 20
}
}).on('draw', function (obj)
{
RGraph.SVG.create({
svg: obj.svg,
type: 'circle',
parent: obj.layers.background1,
attr: {
cx: obj.centerx,
cy: obj.centery,
r: obj.radius,
fill: 'gray'
}
});
RGraph.SVG.create({
svg: obj.svg,
type: 'circle',
parent: obj.layers.background1,
attr: {
cx: obj.centerx,
cy: obj.centery,
r: obj.radius - obj.properties.donutWidth,
fill: 'black'
}
});
// Add the text label of the value
RGraph.SVG.text({
object: obj,
parent: obj.svg.all,
text: obj.data[0] + '%',
x: obj.centerx,
y: obj.centery,
halign: 'center',
valign: 'center',
size: 45,
bold: true,
color: '#999'
});
// Add the text label of the name
RGraph.SVG.text({
object: obj,
parent: obj.svg.all,
text: 'Freddy',
x: obj.centerx,
y: obj.centery + 20,
halign: 'center',
valign: 'top',
size: 16,
bold: true,
color: '#999'
});
}).roundRobin({frames: 45});
// The configuration for the red bars
conf = {
xaxis: false,
xaxisScale: false,
xaxisMax: 100,
xaxisLabels: false,
yaxis: false,
colors: ['red'],
gutterTop: 40,
gutterBottom: 5,
backgroundGrid: false
};
// Gray backgrounds for the progress bars
new RGraph.SVG.HBar({id: 'chart-container4', data: [100], options: conf}).on('beforedraw', function (obj) {var prop = obj.properties;prop.colors = ['gray'];prop.title = 'Overall 16%';prop.titleSize = 22;prop.titleColor = '#666';prop.titleBold = true;}).draw();
new RGraph.SVG.HBar({id: 'chart-container5', data: [100], options: conf}).on('beforedraw', function (obj) {obj.properties.colors = ['gray']}).draw();
new RGraph.SVG.HBar({id: 'chart-container6', data: [100], options: conf}).on('beforedraw', function (obj) {obj.properties.colors = ['gray']}).draw();
// The red bars
new RGraph.SVG.HBar({id: 'chart-container4', data: [16], options: conf}).grow();
new RGraph.SVG.HBar({id: 'chart-container5', data: [88], options: conf}).grow();
new RGraph.SVG.HBar({id: 'chart-container6', data: [74], options: conf}).grow();
</script>