Importing RGraph Files:-
Rgraph is
the new plugin for drawing Bar chart, Pie chart and etc… Type of Charts. It is
free to use in anywhere. This is designed using Jscript files. All you need to download
the script files and import it to your program (anywhere used in Javascript).
CLICK HERE TO DOWNLOAD (681KB)
You can
Import all Library files using Below Syntax
<script
src='../ RGraph/libraries/RGraph.bar.js' type='text/javascript'></script>
you can
Import needed files only, for example if you want only pie char you need to
import only
<script
src='../ RGraph/libraries/ RGraph.pie.js' type='text/javascript'></script>
and you can
use many features from that js file
Pie Chart Example:-
Canvas:-
Canvas is the new feature in HTML5
technology, If you are using canvas you can draw anything there like circle, rectangle
and also you can do animation.
<html>
<head><title>My
canvas Example</title></head>
<body>
<canvas
id="canvas_id" width="350" height="400"
style="border:2px solid #d1d2d5;">
Your browser
does not support the HTML5 canvas tag.</canvas>
</body>
</html>
Drawing a image to canvas:-
<canvas id="myCanvas2" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas2");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas2");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
Output:-
RGraph Pie Chart Example:-
All you need to import Following files
<script src="../../RChart/libraries/RGraph.pie.js" type="text/javascript"></script>
-----------
$(window).load(function (){
draw_barchart();
});
----------- -----------
<script>
function draw_barchart()
{
var joe= new RGraph.Pie('myCanvas2', [4, 6, 2, 8,1])
joe.Set('colors', ['Gradient(green:red)', 'Gradient(white:red)', 'Gradient(white:green)', 'Gradient(white:blue)', 'Gradient(gray:blue)'])
joe.Set('tooltips', ['Merbin','Joe', 'Franklin', 'Jose', 'Ajith'])
joe.Set('labels.axes', '')
joe.Set('background.grid.spokes', 8)
joe.Set('background.axes', false)
joe.Set('colors.sequential', true)
joe.Set('margin', 5)
joe.Set('key.colors', ['Gradient(green:red)', 'Gradient(white:red)', 'Gradient(white:green)', 'Gradient(white:blue)', 'Gradient(gray:blue)'])
joe.Set('key.position.x', 15)
joe.Set('key.position.y', 5)
joe.Set("chart.tooltips.highlight", true);
joe.Set('key', ['Merbin', 'Joe', 'Franklin', 'Jose', 'Ajith'])
joe.Set('shadow', true)
joe.Set('key.color.shape', 'circle')
joe.Set('spline', true)
joe.Set('gutter.top', 100)
joe.Draw();
}
</script>
<script src="../../RChart/libraries/RGraph.common.tooltips.js"
type="text/javascript"></script>
<script src="../../RChart/libraries/RGraph.common.key.js"
type="text/javascript"></script>
<script src="../../RChart/libraries/RGraph.common.dynamic.js"
type="text/javascript"></script>
----------------------
$(window).load(function (){
draw_barchart();
});
----------- -----------
<script>
function draw_barchart()
{
var joe= new RGraph.Pie('myCanvas2', [4, 6, 2, 8,1])
joe.Set('colors', ['Gradient(green:red)', 'Gradient(white:red)', 'Gradient(white:green)', 'Gradient(white:blue)', 'Gradient(gray:blue)'])
joe.Set('tooltips', ['Merbin','Joe', 'Franklin', 'Jose', 'Ajith'])
joe.Set('labels.axes', '')
joe.Set('background.grid.spokes', 8)
joe.Set('background.axes', false)
joe.Set('colors.sequential', true)
joe.Set('margin', 5)
joe.Set('key.colors', ['Gradient(green:red)', 'Gradient(white:red)', 'Gradient(white:green)', 'Gradient(white:blue)', 'Gradient(gray:blue)'])
joe.Set('key.position.x', 15)
joe.Set('key.position.y', 5)
joe.Set("chart.tooltips.highlight", true);
joe.Set('key', ['Merbin', 'Joe', 'Franklin', 'Jose', 'Ajith'])
joe.Set('shadow', true)
joe.Set('key.color.shape', 'circle')
joe.Set('spline', true)
joe.Set('gutter.top', 100)
joe.Draw();
}
</script>
Output:-
Advertisement
php and MYSQL. please thank you
ReplyDelete