An adjustable SVG Gauge chart
This goes in the documents header:
<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.gauge.js"></script>
Put this where you want the chart to show up:
<div style="width: 300px; height: 300px" id="chart-container"></div>
This is the code that generates the chart:
<script>
new RGraph.SVG.Gauge({
id: 'chart-container',
innerMin:0,
innerMax:100,
outerMin:0,
outerMax:50,
value: 78,
options: {
adjustable: true,
labelsIngraphUnitsPost: '%',
labelsIngraphSize: '16',
labelsIngraphBold: true,
centerpinRadius: 10,
labelsIngraphDecimals: 1
}
}).draw();
</script>