Andrey Prikaznov 
Using HTML5 to Create Charts and Graphs
Email
The HTML5 Microzone is presented by DZone and Microsoft to bring you the most interesting and relevant content on emerging web standards. Experience all that the HTML5 Microzone has to offer on our homepage and check out the cutting edge web development tutorials on Script Junkie, Build My Pinned Site, and the HTML5 DevCenter.
Today I found an interesting library – flotr2: an opensource library for drawing HTML5 charts and graphs. It allows you to draw
charts in different formats such as:
- lines
- bars
- candles
- pies
- bubbles
Also, it doesn’t require any additional libraries such as jQuery or Prototype.
And finally – it has good compatibility with different browsers.
Here is our demo and a downloadable package:
Live DemoDownloadable Package
Ok, download the source files and lets start coding!
Step 1. HTML
Here is the markup of our final page:
index.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>HTML5 charts and graphs - using Flotr2 | Script Tutorials</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script src="js/flotr2.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="js/flashcanvas.js"></script>
<![endif]-->
</head>
<body>
<header>
<h2>HTML5 charts and graphs - using Flotr2</h2>
<a href="http://www.script-tutorials.com/html5-charts-and-graphs/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
</header>
<div id="container" class="container"></div>
<div class="controls">
<h3>Function:</h3>
<p>
<input type="radio" name="func" value="1" onclick="toggleFunc(1)" checked> sin
<input type="radio" name="func" value="2" onclick="toggleFunc(2)"> sin(1/x)
</p>
<h3>Visual mode:</h3>
<p>
<input type="radio" name="mode" value="1" onclick="toggleMode(1)" checked> #1
<input type="radio" name="mode" value="2" onclick="toggleMode(2)"> #2
<input type="radio" name="mode" value="3" onclick="toggleMode(3)"> #3
</p>
</div>
<script src="js/script.js"></script>
</body>
</html>
Step 2. CSS
Here are all the stylesheets:
css/main.css
/* page layout styles */
*{
margin:0;
padding:0;
}
body {
background-color:#eee;
color:#fff;
font:14px/1.3 Arial,sans-serif;
}
header {
background-color:#212121;
box-shadow: 0 -1px 2px #111111;
display:block;
height:70px;
position:relative;
width:100%;
z-index:100;
}
header h2{
font-size:22px;
font-weight:normal;
left:50%;
margin-left:-400px;
padding:22px 0;
position:absolute;
width:540px;
}
header a.stuts,a.stuts:visited{
border:none;
text-decoration:none;
color:#fcfcfc;
font-size:14px;
left:50%;
line-height:31px;
margin:23px 0 0 110px;
position:absolute;
top:0;
}
header .stuts span {
font-size:22px;
font-weight:bold;
margin-left:5px;
}
.container {
color: #000;
margin: 20px auto;
overflow: hidden;
position: relative;
width: 600px;
height: 400px;
}
.controls {
border: 1px dashed gray;
color: #000;
margin: 20px auto;
padding: 25px;
position: relative;
width: 550px;
}
.controls p {
margin-bottom: 10px;
}
.controls input {
margin-left: 10px;
}
Step 3. JS
js/flotr2.min.js and js/flashcanvas.js
Both
libraries are required and available in our package.
Next – our custom
file where I have implemented two different functions and three visual
modes for charts.
js/script.js
var container = document.getElementById('container');
var start = (new Date).getTime();
var data, graph, offset, i;
var mode = 1;
var fmode = 1; // 1- basic sin, 2 - sin(1/x)
// toggle mode
function toggleMode(i) {
mode = i;
}
// toggle func
function toggleFunc(i) {
fmode = i;
}
// Draw a sine curve at time t
function animateSine (t) {
data = [];
data2 = [];
// little offset between steps
offset = 2 * Math.PI * (t - start) / 10000;
if (fmode == 2 && offset > 15) {
start = t;
}
for (i = 0; i < 4 * Math.PI; i += 0.2) {
if (fmode == 1) {
data.push([i, Math.sin(i - offset)]);
data2.push([i, Math.sin(i*2 - offset)]);
} else if (fmode == 2) {
data.push([i, Math.sin(1/(i-offset))]);
// data2.push([i, Math.sin(1/(i*2-offset))]);
}
}
// prepare properties
var properties;
switch (mode) {
case 1:
properties = {
yaxis : {
max : 2,
min : -2
}
};
break;
case 2:
properties = {
yaxis : {
max : 2,
min : -2
},
bars: {
show: true,
horizontal: false,
shadowSize: 0,
barWidth: 0.5
}
};
break;
case 3:
properties = {
yaxis : {
max : 2,
min : -2
},
radar: {
show: true
},
grid: {
circular: true,
minorHorizontalLines: true
}
};
break;
case 4:
properties = {
yaxis : {
max : 2,
min : -2
},
bubbles: {
show: true,
baseRadius: 5
},
};
break;
}
// draw graph
if (fmode == 1) {
graph = Flotr.draw(container, [ data, data2 ], properties);
} else if (fmode == 2) {
graph = Flotr.draw(container, [ data ], properties);
}
// main loop
setTimeout(function () {
animateSine((new Date).getTime());
}, 50);
}
animateSine(start);
Full documentation for the flotr2 library is available here.
Conclusion
As usual, I hope
that today’s lesson was interesting for everyone. I welcome any questions or comments and
Good Luck!Source: http://www.script-tutorials.com/html5-charts-and-graphs/
Tags:
Published at DZone with permission of its author, Andrey Prikaznov.(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)
HTML5 is the most dramatic step in the evolution of web standards. It incorporates features such as geolocation, video playback and drag-and-drop. HTML5 allows developers to create rich internet applications without the need for third party APIs and browser plug-ins. Under the banner of HTML5, modern web standards such as CSS3, SVG, XHR2, WebSockets, IndexedDB, and AppCache are pushing the boundaries for what a browser can achieve using web standards. This Microzone is supported by Microsoft, and it will delve into the intricacies of using these new web technologies and teach you how to make your websites compatible with all of the modern browsers.
