RGraph with Javascript and JQuery

13:20

Kavitha Rani

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>

Output:-

In RGraph Jscript file is drawing automatically in canvas all we need to import the rGraph files and declare canvas.

RGraph Pie Chart Example:-
All you need to import Following files

-----------
-----------
$(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