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:

Simple example of RGraph Radar chart


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


at

1 comment: