RGraph for all type of Graphs and Charts

Given example is for pie chart..

RGraph creates interactive charts using HTML 'canvas tag' and javascript. RGraph is a HTML5 charts library that uses the HTML5 canvas tag to draw the charts. Using the canvas tag, RGraph creates these HTML charts inside the web browser using JavaScript.

How To Use :-

• Go to the link http://www.rgraph.net/download to download the javascript files for charts.
• Now open the downloaded directory and copy the javascript files from the 'RGraph/libraries'. Keep in mind, there are so many javascript files for drawing different type of graphs. Only copy the needed files. For eg. If you want to draw pie chart, only copy the file 'RGraph.pie.js'.
  keep the files into the project with other js files. For rails 2.x 'public/javascript' directory.
• Now include the javascripts into your layout file like this

  <%= javascript_include_tag "RGraph.pie" %>

• There are other javascripts which sets different type of functionality in the pie chart. So also copy these files and include them to layout

  <%= javascript_include_tag "RGraph.common.dynamic" %>
  <%= javascript_include_tag "RGraph.common.tooltips" %>

  
  

  <%= javascript_include_tag "RGraph.common.key" %>

  <%= javascript_include_tag "RGraph.common.effects" %>
  <%= javascript_include_tag "RGraph.common.core" %>

• Now in the HTML file just write the code given below

  <canvas width="550" height="350" id="pie" style=" margin-left: 38px; margin-top: 23px; cursor: default;" class="animated rotateIn"></canvas>

• Write the following javascript in js or html page

  data4 = [1,12,45,45,78]
  names = ['ricky', 'tam', 'victoria', 'mike', 'jenifer'var pie = new RGraph.Pie('pie', data4);
  pie.Set('chart.colors', ['rgb(255,0,0)', 'rgb(0,0,255)', 'rgb(0,100,0)', 'rgb(255,215,0)', '         rgb(255,20,147)', 'rgb(148,0,211)', 'rgb(255,0,0)', 'rgb(165,42,42)', 'rgb(30,144,255)',   'rgb(184,134,11)', 'rgb(188,143,143)', 'rgb(244,164,96)']);
   pie.Set('chart.strokestyle', 'white');
   pie.Set('chart.linewidth', 3);
   pie.Set('chart.shadow', true);
   pie.Set('chart.shadow.blur', 3); 
   pie.Set('chart.tooltips.coords.page', true);
   pie.Set('chart.tooltips', names);
   pie.Set('chart.tooltips.event', 'onmousemove');
   pie.onclick = function (e, shape)
   {
     // Onclick function on the pie chart slice . Write functionality here
   }
    pie.canvas.onmouseout = function (e)
    {
      RGraph.HideTooltip();
      RGraph.Redraw();
    }
    for (var i=0; i<data4.length; ++i) { 
       pie.Get('chart.labels')[i] = pie.Get('chart.labels')[i] + ', ' + data4[i];
    }
    pie.Draw();
  }

     pie.Set('chart.labels', names);