WEB ENGINEERING

Archive for the ‘HTML 5.0’ Category

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

Processing.js is an open programming language for people who want to program images, animation, and interactions for the web without using Flash or Java applets.

Processing.js uses Javascript to draw shapes and manipulate images on the HTML5 Canvas element.

Processing.js can be used to:

  1. Visualizing data
  2. Creating user-interfaces
  3. Developing web-based games

Processing.js is explicitly developed for browsers that support the HTML5 <Canvas> element.

Processing.js runs in Firefox, Safari, Opera and Chrome but will not be supported in Internet Explorer until Mircosoft catch up with ISSUE 15.

Click here to find out one of the reasons to tell you why Internet Explorer suck.

History

The Processing language was created by Ben Fry and Casey Reas. It evolved from ideas explored in the Aesthetics and Computation Group at the MIT Media Lab and was originally intended to be used in a Java run-time environment.

PLAY HTML 5.0 GAME: GALACTIC INBOX

A Pure Javascript and HTML 5.0 Game inspired by Gmail.

DOWNLOAD EXAMPLES

QUICK START


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

Join 49 other followers

What I am Upto Now

Follow Me On Twitter

Blog Stats

  • 71,384 hits

Live Traffic

My Paintings

Guess Who is She

Magnet

Party Goer

Holi

Propose

More Photos
%d bloggers like this: