After downloading, extract the zipped folder.
You will get a web page named as default.html in the extracted folder. Open this file in your favourite browser.
When page will be opened in the browser, you will get home page for RGraph.
After clicking on link you will get the all list of possible charts in RGraph. Click on your desired chart. You will get the design, code and required file to draw that chart.
How to use ?
After extracting the zipped folder, you have downloaded, you can rename it or use as it is. Put this folder in your root/home directory of your project/website.
From the list of chart you have seen, select the desired chart and click on it. It will get a page showing code and where should it be used.
See the required JavaScript file required to draw desired chart. Put that code in your header tag with full path.
<script src="RGraph/libraries/RGraph.common.core.js"></script>
<script src="RGraph/libraries/RGraph.bar.js"></script>
Now draw the chart at your required position on website. Put the following code at desired position in your coding :-
<canvas id="cvs" width="650" height="300">
[No canvas support]
</canvas>
You can adjust the size of chart by changing the width and height of canvas.
Now put the following JavaScript code anywhere in your page that draws the chart.
<script>
var gutterLeft = 120,
gutterRight = 25,
gutterTop = 45,
gutterBottom = 125,
hmargin = 15,
ymax = 35,
data = [
// If you don't need a third dataset take out this FIRST
// dataset and replace it with the word: null
// null, // [12,16,10,12,13,15,16]
[5,16,10,12,13,15,16],
[20,21,24,23,18,19,20],
[35,34,32,28,26,35,34]
],
colors = [
'Gradient(#696:#0f0:#0f0)',
'Gradient(#966:#f00:#f00)',
'Gradient(#669:blue:blue)'
],
labels = ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'];
var bar = new RGraph.Bar({
id: 'cvs',
data: data[2],
options: {
textAccessible: true,
variant: '3d',
variantThreedYaxis: false,
variantThreedXaxis: false,
strokestyle: 'rgba(0,0,0,0)',
colors: [colors[2]],
shadow: true,
shadowOffsetx: 10,
//backgroundGrid: false,
backgroundGridColor: '#ccc',
backgroundGridAutofitNumhlines: 5,
backgroundGridAutofitNumvlines: 14,
scaleZerostart: true,
axisColor: '#ddd',
ylabels: false,
gutterBottom: gutterBottom,
gutterTop: gutterTop,
gutterLeft: gutterLeft,
gutterRight: gutterRight,
hmargin: hmargin,
ymax: ymax,
noaxes: true
}
}).draw();
var bar2 = new RGraph.Bar({
id: 'cvs',
data: data[1],
options: {
textAccessible: true,
variant: '3d',
variantThreedYaxis: false,
variantThreedXaxis: false,
strokestyle: 'rgba(0,0,0,0)',
colors: [colors[1]],
shadow: true,
shadowOffsetx: 10,
shadowColor: 'rgba(0,0,0,0.5)',
backgroundGrid: false,
axisColor: '#ddd',
ylabels: !data[0] ? true : false,
labels: !data[0] ? labels : [],
gutterBottom: gutterBottom - 10,
gutterTop: gutterTop + 10,
gutterLeft: gutterLeft - 20,
gutterRight: gutterRight + 20,
hmargin: hmargin,
ymax: ymax,
noaxes: true
}
}).draw();
if (data[0]) {
var bar = new RGraph.Bar({
id: 'cvs',
data: data[0],
options: {
textAccessible: true,
variant: '3d',
variantThreedYaxis: false,
variantThreedXaxis: false,
strokestyle: 'rgba(0,0,0,0)',
colors: [colors[0]],
labels: labels,
shadow: true,
shadowOffsetx: 10,
shadowColor: 'rgba(0,0,0,0.5)',
backgroundGrid: false,
axisColor: '#ddd',
unitsPost: 'km',
gutterTop: gutterTop + 20,
gutterBottom: gutterBottom - 20,
gutterLeft: gutterLeft - 40,
gutterRight: gutterRight + 40,
hmargin: hmargin,
ymax: ymax,
noaxes: true,
scaleZerostart: true
}
}).draw();
}
</script>
After that you will get the result on your webpage like -
You can use the dynamic values also in data and labels as a variable to show the graph
based on database values or any dynamic values.
Like above example you can get many type of chart and graphs using RGraph.
