This is a demo of an SVG Bar chart that has been configured to act as a
progress bar and which is fetching the value by making use of the AJAX
getNumber()
function. The getNumber()
function
is an easy way to fetch
a single value from your server (and which is given to you as a true
JavaScript number - not a string.
<script src="RGraph.svg.common.core.js"></script> <script src="RGraph.svg.common.ajax.js"></script> <script src="RGraph.svg.bar.js"></script>Put this where you want the chart to show up:
<div style="width: 100px; height: 300px" id="chart-container"></div>This is the code that generates the chart:
<script> RGraph.SVG.AJAX.getNumber('/getdata.html', function (num) { // This bar chart becomes the background new RGraph.SVG.Bar({ id: 'chart-container', data: [100], options: { marginLeft: 45, colors: ['#ddd'], backgroundGrid: false, xaxis: false, yaxis: false, yaxisScale: false, yaxisScaleMax: 100, shadow: true, shadowOpacity: .1 } }).draw(); var bar = new RGraph.SVG.Bar({ id: 'chart-container', data: [num], options: { marginLeft: 45, colors: ['Gradient(red:#fcc)'], backgroundGrid: false, xaxis: false, yaxis: false, yaxisScaleMax: 100, marginInner: 8 } }).grow(); }); </script>