Home » Tutorials

HTML5 charts and graphs

Image Tutorials
Author Reading 12 min Views 928 Published by Modified by

Today I have found one interesting library – flotr2. This is opensource library for drawing HTML5 charts and graphs. It allow to draw charts in different modes like: lines, bars, candles, pies, bubbles. More – it don’t require any extra libraries like jQuery or Prototype. And finally – it has good compatibility with different browsers. I have prepared our own demo for today’s lesson (using that library).

Here are our demo and downloadable package:

Contents
  1. Step 1. HTML
  2. index.html
  3. Step 2. CSS
  4. css/main.css
  5. Step 3. JS
  6. js/flotr2.min.js and js/flashcanvas.js
  7. js/script.js
  8. Conclusion
Live Demo
download in package

Ok, download the source files and lets start coding !

Step 1. HTML

This is markup of our final page. Here it is:

index.html

01 <!DOCTYPE html>
02 <html lang="en" >
03     <head>
04         <meta charset="utf-8" />
05         <title>HTML5 charts and graphs - using Flotr2 | Script Tutorials</title>
06         <link href="css/main.css" rel="stylesheet" type="text/css" />
07         <script src="js/flotr2.min.js"></script>
08         <!--[if lt IE 9]>
09         <script type="text/javascript" src="js/flashcanvas.js"></script>
10         <![endif]-->
11     </head>
12     <body>
13         <header>
14             <h2>HTML5 charts and graphs - using Flotr2</h2>
15             <a href="http://www.script-tutorials.com/html5-charts-and-graphs/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
16         </header>
17         <div id="container" class="container"></div>
18         <div class="controls">
19             <h3>Function:</h3>
20             <p>
21                 <input type="radio" name="func" value="1" onclick="toggleFunc(1)" checked> sin
22                 <input type="radio" name="func" value="2" onclick="toggleFunc(2)"> sin(1/x)
23             </p>
24             <h3>Visual mode:</h3>
25             <p>
26                 <input type="radio" name="mode" value="1" onclick="toggleMode(1)" checked> #1
27                 <input type="radio" name="mode" value="2" onclick="toggleMode(2)"> #2
28                 <input type="radio" name="mode" value="3" onclick="toggleMode(3)"> #3
29             </p>
30         </div>
31         <script src="js/script.js"></script>
32     </body>
33 </html>

Step 2. CSS

Here are all stylesheets (most of styles – just page layout styles, nothing especially)

css/main.css

01 /* page layout styles */
02 *{
03     margin:0;
04     padding:0;
05 }
06 body {
07     background-color:#eee;
08     color:#fff;
09     font:14px/1.3 Arial,sans-serif;
10 }
11 header {
12     background-color:#212121;
13     box-shadow: 0 -1px 2px #111111;
14     display:block;
15     height:70px;
16     position:relative;
17     width:100%;
18     z-index:100;
19 }
20 header h2{
21     font-size:22px;
22     font-weight:normal;
23     left:50%;
24     margin-left:-400px;
25     padding:22px 0;
26     position:absolute;
27     width:540px;
28 }
29 header a.stuts,a.stuts:visited{
30     border:none;
31     text-decoration:none;
32     color:#fcfcfc;
33     font-size:14px;
34     left:50%;
35     line-height:31px;
36     margin:23px 0 0 110px;
37     position:absolute;
38     top:0;
39 }
40 header .stuts span {
41     font-size:22px;
42     font-weight:bold;
43     margin-left:5px;
44 }
45 .container {
46     color: #000;
47     margin: 20px auto;
48     overflow: hidden;
49     position: relative;
50     width: 600px;
51     height: 400px;
52 }
53 .controls {
54     border: 1px dashed gray;
55     color: #000;
56     margin: 20px auto;
57     padding: 25px;
58     position: relative;
59     width: 550px;
60 }
61 .controls p {
62     margin-bottom: 10px;
63 }
64 .controls input {
65     margin-left: 10px;
66 }

Step 3. JS

js/flotr2.min.js and js/flashcanvas.js

Both libraries is 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

001 var container = document.getElementById('container');
002 var start = (new Date).getTime();
003 var data, graph, offset, i;
004
005 var mode = 1;
006 var fmode = 1; // 1- basic sin, 2 - sin(1/x)
007
008 // toggle mode
009 function toggleMode(i) {
010     mode = i;
011 }
012 // toggle func
013 function toggleFunc(i) {
014     fmode = i;
015 }
016
017 // Draw a sine curve at time t
018 function animateSine (t) {
019     data = [];
020     data2 = [];
021
022     // little offset between steps
023     offset = 2 * Math.PI * (t - start) / 10000;
024
025     if (fmode == 2 && offset > 15) {
026         start = t;
027     }
028
029     for (i = 0; i < 4 * Math.PI; i += 0.2) {
030         if (fmode == 1) {
031             data.push([i, Math.sin(i - offset)]);
032             data2.push([i, Math.sin(i*2 - offset)]);
033         } else if (fmode == 2) {
034             data.push([i, Math.sin(1/(i-offset))]);
035             // data2.push([i, Math.sin(1/(i*2-offset))]);
036         }
037     }
038
039     // prepare properties
040     var properties;
041     switch (mode) {
042         case 1:
043             properties = {
044                 yaxis : {
045                     max : 2,
046                     min : -2
047                 }
048             };
049             break;
050         case 2:
051             properties = {
052                 yaxis : {
053                     max : 2,
054                     min : -2
055                 },
056                 bars: {
057                     show: true,
058                     horizontal: false,
059                     shadowSize: 0,
060                     barWidth: 0.5
061                 }
062             };
063             break;
064         case 3:
065             properties = {
066                 yaxis : {
067                     max : 2,
068                     min : -2
069                 },
070                 radar: {
071                     show: true
072                 },
073                 grid: {
074                     circular: true,
075                     minorHorizontalLines: true
076                 }
077             };
078             break;
079         case 4:
080             properties = {
081                 yaxis : {
082                     max : 2,
083                     min : -2
084                 },
085                 bubbles: {
086                     show: true,
087                     baseRadius: 5
088                 },
089             };
090             break;
091     }
092
093     // draw graph
094     if (fmode == 1) {
095         graph = Flotr.draw(container, [ data, data2 ], properties);
096     } else if (fmode == 2) {
097         graph = Flotr.draw(container, [ data ], properties);
098     }
099
100     // main loop
101     setTimeout(function () {
102         animateSine((new Date).getTime());
103     }, 50);
104 }
105
106 animateSine(start);
Live Demo
download in package

Conclusion

Hope that today’s lesson was interesting for you as usual. We made another one nice html5 sample. I will be glad to see your thanks and comments. Good luck!

Rate article
© 2025 Script Tutorials