Two SVG HBar charts styled to look like a Horizontal Progress bar
This goes in the documents header:
<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.common.tooltips.js"></script>
<script src="RGraph.svg.bar.js"></script>
Put this where you want the chart to show up:
<div style="padding: 15px">
<div style="width: 450px; height: 120px" id="chart-container"></div>
</div>
This is the code that generates the chart:
<script>
new RGraph.SVG.HBar({
id: 'chart-container',
data: [10],
options: {
colors: ['#eee'],
gutterLeft: 15,
gutterRight: 15,
backgroundGrid: false,
vmargin: 10,
xaxis: false,
yaxis: false,
strokestyle: '#ccc',
linewidth: .5
}
}).draw();
new RGraph.SVG.HBar({
id: 'chart-container',
data: [7],
options: {
xaxisMax: 10,
shadow: true,
shadowOffsetx: 1,
shadowOffsety: 1,
shadowBlur: 1,
title: 'Results of the weekends competition',
titleColor: '#666',
colors: ['Gradient(#fcc:red)'],
colorsSequential: true,
backgroundGrid: false,
tooltips: ['Monday was an average day'],
gutterLeft: 15,
gutterRight: 15,
vmargin: 15,
xaxis: false,
yaxis: false
}
}).grow();
</script>
« Back