HTML5 Graph

I started this project after I heard about the <canvas> tag that was included in the HTML5 spec. Since I wanted to learn more about HTML5 and the new things in it, I decided to focus on this particular tag and use it as a learning experience.


An example of the graph. See more examples »

If you don’t know anything about the <canvas> tag, it’s basically a blank slate that you can use to draw and display pretty much anything you want. Since JavaScript is used to define what is displayed, if you’re wanting to learn a bit more about JavaScript and future web topics (like I did), this is a great place to start.

If you want to try the graph out on your own site, or to just play around with, click the download button below to grab the source file:

Download cv_graph.js.zip (3kb)

How to use the graph

If you’ve ever worked with jQuery plugins, the way the graph works will be pretty familiar to you. However, please note: This does not require jQuery or any other JavaScript library to work.

Step 1: Adding the scripts

To load the script, you’ll need to add in a couple of lines to the top of your site’s code, inside the <head> tag, like this:

<script type="text/javascript" src="js/cv_graph.js"></script>
<script type="text/javascript">
window.onload = function() {
g_graph = new Graph(
{
'id': "firstgraph",
'strokeStyle': "#819C58",
'fillStyle': "rgba(64,128,0,0.25)",
'call': function(){return ( Math.floor(Math.random()*50 + 25));}
});
}
</script>

A couple of notes about the code:

  • Be sure to change the src attribute on the first line so that it links to cv_graph.js.
  • ‘id’: The id of the <canvas> tag that the graph will load in to.
  • ‘strokeStyle’: The color of the graph’s line.
  • ‘fillStyle’: The fill color of the graph’s line.
  • ‘call’: Function that is loaded to produce the number that will be displayed. The one above picks a random number between 25 and 75.

There are many more options that you can add to the graph to stylize it the way you want, but for this demonstration I’m just going to keep it pretty simple.

Step 2: Creating the canvas

Now the code will be loaded, so place a <canvas> anywhere on your page. Make sure you set the width and height attributes, and give it an id. Here’s an example:

<canvas id="firstgraph" width="600" height="200"></canvas>

After you have these two steps done, load up the page and see it work! Obviously, this will not work in Internet Explorer (yet!), so you’re going to have to use a modern web browser to experience this awesomeness.

One last note

For you guys who like to dig through the source, know that the graph can take static data instead of a constant stream of values. Also, it’s pretty easy to hook it up to server scripts so you can get different information. For example: I was able to create a graph that grabbed the local temperature every 30 minutes from a php script.

I plan on writing a blog post that will cover the more advanced features of the graph so that everyone can use them without having to read through the source code. Expect to see it soon eventually.

As always, feel free to comment below!

14 Comments

  1. Darian Shimy
    #

    Great post and cool library. Thanks!

    Reply

  2. Erik and Brad
    #

    As Wheaton Academy alums, we appreciate this post, and our work project may benefit from it

    Reply

  3. asdf
    #

    thanks

    Reply

  4. Nicely done!
    #

    I’m really amazed by what you designed. I replaced the random values generated by those generated by my system. It works great. Congrats! HTML 5 is very promising and need people like you to exploit it. Keep it up!

    Reply

  5. Rohit Srivastava
    #

    amazed by you sir.
    i want to draw line in slow-motion of values & stop after darw
    can you please help me sir .
    Thank You

    Reply

    • Chris
      #

      Hey,

      I’m not sure what you mean exactly by drawing the graph in slow motion, but you can stop the graph from drawing by using this:

      [graphid].toggleDraw();

      Hope it helps!

      Reply

  6. JS
    #

    Thanks for the library, I’ll try it at my website.

    Reply

  7. mayo
    #

    please i need to feed a data from a .xml file is that possible and what if i have a data stream from a sensor? and also is t possible to zoom in and out?

    Reply

    • Chris
      #

      The script won’t read xml data on its own, so you’ll have to format it into an array beforehand. Here’s an example of how you can add static data to the graph:

      g_graph = new Graph({ ‘id’: “graph”, ‘data’: [1,2,3,4,5,6,7,8,9,10] });

      Replace the 1,2,3, etc with the data from the xml. It’s not possible to zoom in or out by default, although if you sent the graph new grid sizes I think you could fake it. Best of luck if that’s what you want to do. :)

      Reply

  8. joseph
    #

    i want to make a line graph which will be drawn aftergetting the vales from the user plz help me

    Reply

  9. Aditya
    #

    Hello Chris,

    Can I label the x and y-axis of the graph? If yes, can you tell me how ?

    Thanks,
    Aditya

    Reply

    • Chris
      #

      Aditya, I’m sorry but the script does not draw out any sort of labeling. If you want to add it you’ll have to do it through your own methods (positioned elements or a background image).

      Reply

  10. Keval
    #

    I wanted to include values on the x axis and the y axis. Is that possible like normal graphs do. So in that case the x-axis values must be moved along with the graph.

    Reply

  11. Tweets that mention HTML5 Graph « Chris Valleskey -- Topsy.com
    #

    [...] This post was mentioned on Twitter by cvalleskey, cvalleskey. cvalleskey said: New project! HTML5 Graph – http://dssurl.com/VA [...]

Leave a Reply