Mobile-Web-App: RGraph

Showing posts with label RGraph. Show all posts

Tuesday, May 22, 2012

Sample of RGraph LED Grids

<!DOCTYPE html >
<html>
<head>
 <title>RGraph LED Grids</title>
 <script src="http://www.rgraph.net/libraries/RGraph.common.core.js" ></script>
 <script src="http://www.rgraph.net/libraries/RGraph.led.js" ></script>
 
 <script>
  window.onload = function ()
  { var led = new RGraph.LED('led_canvas', 'Mobile-Web-App');
   led.Set('chart.light', '#0F0');
   led.Draw();
  }
 </script>

</head>
<body>
<h1>Mobile-Web-App: LED Grids</h1>
<canvas id="led_canvas" width="450" height="100">
Sorry! Canvas not supported on your browser.
</canvas>

</body>
</html>

Reference: RGraph LED Grid documentation

Monday, May 21, 2012

Simple example of RGraph 3D bar chart

<!DOCTYPE html >
<html>
<head>
 <title>RGraph 3D Bar chart example</title>
 <script src="http://www.rgraph.net/libraries/RGraph.common.core.js" ></script>
 <script src="http://www.rgraph.net/libraries/RGraph.common.dynamic.js" ></script>
 <script src="http://www.rgraph.net/libraries/RGraph.bar.js" ></script>
 
 <script>
  window.onload = function ()
  {     var barchart = new RGraph.Bar(
     'barchart_canvas', [[17], [13], [12], [11], [3], [2], [2], [2], [2], [2]]);
    barchart.Set('chart.colors', ['#0000FF']); 
    barchart.Set('chart.labels', 
     ['US', 'China', 'Russia', 'Netherlands', 'Ukraine', 
     'Germany', 'United Kingdom', 'South Korea', 'Denmark', 'Brazil']);
    barchart.Set('chart.ymax', 20);
    barchart.Set('chart.ylabels.count', 5);
    barchart.Set('chart.gutter.left', 35);
    barchart.Set('chart.variant', '3d');
    barchart.Set('chart.strokestyle', 'rgba(0,0,0,0.1)');
    barchart.Set('chart.scale.round', true);
    barchart.Set('chart.text.angle', 15);
    barchart.Set('chart.text.size', 6);
    barchart.Draw();
  }
 </script>

</head>
<body>
<h1>Mobile-Web-App: RGraph 3D Bar Chart</h1>
<canvas id="barchart_canvas" width="450" height="300">
Sorry! Canvas not supported on your browser.
</canvas>

</body>
</html>

Reference: RGraph Bar charts documentation

Friday, May 18, 2012

Simple example of RGraph Radar chart

RGraph is a charts library that uses Javascript and HTML5 to draw and supports over twenty different types of charts. Using the new HTML5 canvas tag, RGraph creates these charts inside the web browser using Javascript, meaning quicker pages and less web server load. This leads to smaller page sizes, lower costs and faster websites - everybody wins!

RGraph Radar charts example:

<!DOCTYPE html>
<html>
<head>
<title>RGraph Radar charts example</title>
<script src="http://www.rgraph.net/libraries/RGraph.common.core.js" ></script>
<script src="http://www.rgraph.net/libraries/RGraph.common.context.js" ></script>
<script src="http://www.rgraph.net/libraries/RGraph.common.dynamic.js" ></script>
<script src="http://www.rgraph.net/libraries/RGraph.common.tooltips.js" ></script>
<script src="http://www.rgraph.net/libraries/RGraph.common.key.js" ></script>
<script src="http://www.rgraph.net/libraries/RGraph.radar.js" ></script>

<script>
window.onload = function ()
{
 var radar = new RGraph.Radar('radar_canvas', [10,9,6,6,8,7,7]);
 radar.Set('chart.strokestyle', 'black');
 radar.Set('chart.colors.alpha', 0.5);
 radar.Set('chart.colors', ['blue']);
 radar.Set('chart.key', ['Radar Chart Data']);
 radar.Set('chart.labels', ['Sun', 'Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat']);
 radar.Draw();
}
</script>

</head>
<body>
<h1>Mobile-Web-App: RGraph Radar charts example</h1>

<canvas id="radar_canvas" width="450" height="300">
Sorry! Canvas not supported on your browser.
</canvas>

</body>
</html>