Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Using HTML5 to Create Charts and Graphs

DZone's Guide to

Using HTML5 to Create Charts and Graphs

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

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 Demo

Downloadable 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/

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}