AllInWorld99 provides a reference manual covering many aspects of web programming, including technologies such as HTML, XHTML, CSS, XML, JavaScript, PHP, ASP, SQL,FLASH, jQuery, java, for loop, switch case, if, if else, for...of, for...in, for...each,while loop, blogger tips, blogger meta tag generator, blogger tricks, blogger pagination, client side script, html code editor, javascript editor with instant output, css editor, online html editor, materialize css tutorial, materialize css dropdown list,break, continue statement, label,array, json, get day and month dropdown list using c# code, CSS button,protect cd or pendrive from virus, cordova, android example, html and css to make android app, html code play,telerik show hide column, Transparent image convertor, copy to clipboard using javascript without using any swf file, simple animation using css, SQL etc. AllInWorld99 presents thousands of code examples (accompanied with source code) which can be copied/downloaded independantly. By using the online editor provided,readers can edit the examples and execute the code experimentally.





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).

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:-

RGraph Pie Chart


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:-



Your browser does not support the HTML5 canvas tag.

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


<script src="../../RChart/libraries/RGraph.pie.js" type="text/javascript"></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

0 comments:

Post a Comment

Notification

Total Pageviews