WEB ENGINEERING

Graphs on HTML 5.0 Canvas using RGRAPH canvas graph library

Posted on: September 19, 2010

RGRAPH

RGraph is a HTML5 canvas graph library.

It uses features that became available in HTML5 (specifically, the CANVAS tag) to produce a wide variety of graph types: bar chart, bi-polar chart (also known as an age frequency chart), donut chart, funnel chart, gantt chart, horizontal bar chart, LED display, line graph, meter, odometer, pie chart, progress bar, rose chart, scatter graph and traditional radar chart.

RGraph is covered by the RGraph License. Free for non-commercial purpose.

HTML5 introduces a new HTML element – the CANVAS tag. This tag allows for two dimensional drawing easily using Javascript. This makes it perfect for producing graphs.

Because Javascript runs on your user’s computer, none of the stress on your server normally associated with producing graphs.

Browser support

Since the graphs are produced using HTML5 features (the new canvas tag), client support is currently:

  • Mozilla Firefox 3.0+
  • Google Chrome 1+
  • Apple Safari 3+
  • Opera 9.5+
  • Microsoft Internet Explorer 8+ (see note)
  • iPhone (text support from iOS v4+)

NOTE: Download the Rgraph html 5.0 canvas libraries form here, and place the files in libraries folder in the same directory where the html or php file is.

HTML Only Example


<!DOCTYPE html>
<html>
<head>
<title>RGraph: HTML5 canvas graph library - a basic example</title>
<script src="libraries/RGraph.common.core.js" ></script>
<script src="libraries/RGraph.bar.js" ></script>
</head>
<body>
<h1>RGraph: HTML5 canvas graph library - A basic example</h1>
<!-- This is the canvas that the graph is drawn on -->
<canvas id="myBar" width="1000" height="250">[No canvas support]</canvas>

<!--This creates and displays the graph.
We can call this from the window.onload event,
allowing you to put it in your pages header. -->
<script>
window.onload = function ()
{
var bar = new RGraph.Bar('myBar', [12,13,16,15,16,19,19,12,23,16,13,24]);
bar.Set('chart.colors', ['red']);
bar.Set('chart.title', 'A basic graph (big, but basic)');
bar.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May',
    'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
bar.Draw();
}
</script>
</body>
</html>


PHP Only Example


<?php
// This simply makes a string out of the array of data
$myData = join(',', array(78,16,26,23,25,51,34,64,84,84));
// This prints out the required HTML markup
print('<script src="RGraph.common.core.js"></script>' . "\n");
print('<script src="RGraph.line.js"></script>' . "\n\n");
print('<canvas width="600" height="200"></canvas>' . "\n\n");
print('<script>' . "\n");
print('    var data = [' . $myData . '];' . "\n");
print('    var line = new RGraph.Line("myCanvasTag", data);' . "\n");
print('    line.Set("chart.labels", ["Feb", "Mar", "Apr", "May", "Jun",
    "Jul", "Aug", "Sep", "Oct", "Nov"]);' . "\n");
print('    line.Draw();' . "\n");
print('</script>');
?>


PHP and MySQL Database

This PHP code provides you with your data in a single string – $data_string, which you can then print in the correct place to use in your graph.

SQL: create database called rgraph_sampledb and create following table on it.

CREATE TABLE `rgraph_sampledb`.`votes` (`candidate` VARCHAR( 20 )
NOT NULL ,`totalVotes` INT( 20 ) NOT NULL) ENGINE = MYISAM ;

INSERT INTO `rgraph_sampledb`.`votes` (`candidate` ,`totalVotes`)
VALUES ('candidate1', '20');

INSERT INTO `rgraph_sampledb`.`votes` (`candidate` ,`totalVotes`)
VALUES ('candidate2', '30');

INSERT INTO `rgraph_sampledb`.`votes` (`candidate` ,`totalVotes`)
VALUES ('candidate3', '40');

PHP


<?php

$hostname = 'localhost';
$username = 'root';
$password = 'sa';
$database = 'rgraph_sampledb';

$connection = mysql_connect($hostname, $username, $password);
mysql_select_db($database);

//result stores total votes casted
//result2 stores candidates list

$result = mysql_query('SELECT totalVotes FROM votes');
$result2 = mysql_query('SELECT candidate FROM votes');

if ($result) {
while ($row = mysql_fetch_row($result)) {
$data[] = $row[0];
}

// Now you can aggregate all the data into one string
$data_string = '[' . implode(',', $data) . ']';
} else {
print(mysql_error());
}

print("<h2>Data from rgraph_sampledb database</h2>");

//get number of votes in data_string
print($data_string);
if ($result2) {
while ($row = mysql_fetch_row($result2)) {
$data2[] = $row[0];
}

// Now you can aggregate all the data into one string
$data_string2 = '[' . implode(',', $data2) . ']';
} else {
print(mysql_error());
}

//get candidate names in data_string2
print($data_string2);

// This prints out the required HTML markup
print("<h2>Data rendered on HTML 5 canvas</h2>");

print("<br />");

print('<script src="libraries/RGraph.common.core.js"></script>' . "\n");
print('<script src="libraries/RGraph.bar.js"></script>' . "\n\n");
print('<script src="libraries/RGraph.common.tooltips.js" ></script>'
. "\n");
print('<script src="libraries/RGraph.common.annotate.js" ></script>'
. "\n");
print('<canvas id="myCanvasTag" width="300" height="200"></canvas>'
. "\n\n");
print('<script>' . "\n");
print('var data = [' . $data_string . '];' . "\n");
print('var bar = new RGraph.Bar("myCanvasTag", data);' . "\n");
print('bar.Set("chart.title", "Voting Results" );' . "\n");
print('bar.Set("chart.shadow", true); ' ."\n");
print('bar.Set("chart.shadow.blur", 5);' ."\n");
print('bar.Set("chart.shadow.color", "#aaa")' ."\n");
print('bar.Set("chart.shadow.offsety", -3);' ."\n");
print('bar.Set("chart.colors", ["#FF7B21"]); ' ."\n");
print('bar.Set("chart.annotatable", true);' . "\n");
print('bar.Set("chart.labels", ["Candidate1","Candidate2","Candidate3"]);'
. "\n");
print('bar.Set("chart.tooltips", ["tt","bb"]);' . "\n");
print('bar.Draw();' . "\n");
print('</script>');

?>

FINAL OUTPUT

 

Click here for more Samples and Demos

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 50 other followers

What I am Upto Now

Follow Me On Twitter

Blog Stats

  • 69,006 hits

Live Traffic

My Paintings

Guess Who is She

Magnet

Party Goer

Holi

Propose

More Photos
%d bloggers like this: