HTML5 Canvas Graphing Solutions Every Web Developers Must Know

Monday, January 31st, 2011 · WDA Editor · 23 Comments

HTML5 Canvas Graphing Solutions Every Web Developers Must Know

Canvas element as part of HTML5 has been creating a buzz all throughout the web standards community since its introduction, mainly because there are underlying question regarding its capability to change the
future of the web. But for some, it is an opportunity to them to start already on experimenting and developing a application that is based on HTML5.

HTML5 Canvas elements provide an important role for developing drawing objects dynamically such as visualizing information or data in a graph. With HTML5 canvas element it is easily to draw a two dimensional objects or drawing with the help of Javascript. Of course, these would work on any web hosting of your choice

For today’s post we’ve collected amazing library, demos and experiments that uses HTML5 canvas element that produces a charting and graphing solutions. We also added links for further readings and a step by step HTML5 tutorials on creating charts and graphs.

If you have a HTML5 graphs examples or spotted a HTML5 graphs that is not included on our list, feel free to put it on our comment section below.

Don’t forget to subscribe to our RSS-feed and follow us on Twitter — for recent updates.

You may also want to read the related posts below.

1. Visualize

- Visualize uses a technique with the use of Javascript to get contents or data from a well-structured HTML table, and generate it with the use of native HTML5 canvas drawing ability to transform them into a chart or graph visualization.

2. 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.

3. iGrapher

- iGrapher is a free web-based financial market visualisation tool for charting, analysis and prediction of different stock, currency and commodity markets. It uses canvas to draw the graphs of financial data.

4. Function Plotter

- A function plotter application is created by Ed Mackey, which plots 2D maths functions on to a graph using canvas.

5. Building HTML5 Canvas Bar Graph

- Simple test for building a bar chart using HTML5 Canvas element and Javascript.

6. HTML5 Graph Slider

- A dynamic graph viewer that can accept data via javascript and update the graphs on the fly.

7. Graph.tk

- Graph.tk is an online and open-source graphing utillity. It runs in any modern browser that supports the canvas element. It plots functions, and displays them with style.

8. Ticker Plot

- Ticker plot is an opensource project that uses the canvas element for plotting the charts of ticker symbols and mouse events on canvas for panning and drawing trendlines.

9. HumbleFinance

- Similar to the Google Finance Flash charting tool, HumbleFinance is a opensource project which uses HTML5 canvas element to generate data.

10. Charting HTML5

- A quick HTML5 canvas experiment to see what it offers for rendering charts.

11. Graphr

- Graphr is a JavaScript calculator with the basic features every graphing calculator should have.This script was written by Richard Ye, using HTML5 and the canvas element.

12. Snazzy Animated Pie Chart with HTML5 and jQuery

- An interactive pie chart using the latest HTML5 technologies, with a pretty nifty animated effects using nothing but JavaScript, CSS, and a small sprinkling of maths!

13. AwesomeJS

- AwesomeChartJS is a simple Javascript library that can be used to create charts based on the HTML 5 canvas element.

14. jsGraph

- jsGraph is a portable & lightweight javascript library for rendering charts and graphs using only javascript and HTML5.

15. Facebook Privacy

- A charting infographic developed in Prototype.js and uses a HTML5 canvas to draw the data.

16. ASK KEN

- ASK KEN™ is sort of a Node-Link diagram that allows to visually navigate through interconnected topics provided by the Freebase Service. It takes advantage of the latest HTML5 features by using the canvas element for drawing.

17. CanvasXpress

- CanvasXpress is a javascript library based on the canvas tag implemented in HTML5. It is a cross browser compatible library and works with all major browsers.

18. ZingChart

- If OpenSoure or Free version charts is not enough to your project needs you can ZingChart, first charting library that renders charts and graphs in both HTML5 canvas and Flash.

1. Canvas Cheat Sheet

The ultimate HTML5 Canvas element cheat sheet in PDF and PNG format.

2. How to draw with HTML5 Canvas

Explore the ins and outs of Canvas with Think Vitamin’s article. Demonstrating what is possible with examples and links.

3. Mozilla Canvas Tutorial

Explore HTML5 canvas with the given examples.

4. HTML5 Canvas: The Basics

Step-by-step explanation getting started with HTML5 Canvas element.

5. W3Schools HTML5 Canvas

W3Schools thorough explanation regarding HTML5 Canvas with basic examples.

6. HTML5, Flex and Silverlight Charts: A Test of Performance

A must read blog on testing the performance of HTML5 charts vs. Flex charts vs. Silverlight charts.

7. HTML5 Canvas Element Guide

A perfect guide on using HTML5 canvas element.

8. 5 Clever Uses of the Canvas Tag

5 Great HTML5 canvas tag implementations that are being used today on various websites and web apps.

9. Canvas Demos

A showcase of applications, games, tools, and tutorials that uses HTML5 canvas tag. It is great source of inspiration

Step-by-Step Tutorials on Creating Charts and Graphs

About the author

WDA Editor

The team here at Web Designer Aid committed to share best design resources across web. Visit our other website HTML5 Beauty - A gallery of best html5 websites. Don’t forget to subscribe to our RSS-feed and follow us on Twitter — for recent updates.

Comments
Trackbacks

23 Comments

Maicon Sobczak

02.03.2011

Reply

Great compilation for study. Unfortunately only few browsers understand the canvas elemento, so is only for study for now.
- WebdesignerAid's Editorial
  
  02.06.2011
  
  Reply
  
  Hi Maicon,
  
  Yep, we agree with you. But we do hope that in the future ALL browsers will understand the canvas element, not only canvas but the HTML5 itself.
- Ash
  
  03.27.2011
  
  Reply
  
  I’d disagree and say the canvas element runs on most browsers. To get around the limitation of it not being availabe on Internet Explorer 6, just use Explorer Canvas.
  
  Reference:
  http://excanvas.sourceforge.net/
Andy Brummer

02.06.2011

Reply

You left out
flot: http://code.google.com/p/flot/
and
Infoviz: http://thejit.org/
- WebdesignerAid's Editorial
  
  02.06.2011
  
  Reply
  
  Thanks Andy, correct us if we are wrong, but we think that the two are in javascript and jquery.
  
  But it’s nice suggestion, maybe we could have another round-up for Javascript and jQuery graphing solutions.
  - David Eads
    
    02.08.2011
    
    Reply
    
    Flot and Infoviz are both Canvas-based. Flot, like many others, use the excanvas library, to provide backwards compatibility with IE at the expense of speed. Dunno about Infoviz. Both definitely belong in this discussion — probably ahead of many of the other tools in the round-up. Flot is certainly more robust than Visualize, for example.
Simon

02.08.2011

Reply

Some nice examples but you missed out a seriously powerful graphing solution: Highcharts [http://www.highcharts.com]. In browsers it renders the graphs using SVG and in IE as VML so is pretty much cross browser as well as having an attractive UX.
Love to see this tool get more credit.
David Eads

02.08.2011

Reply

I’d also point out jqPlot (http://www.jqplot.com) by Chris Leonello, which is a plotting library written in Javascript. For work, I evaluated a TON of Javascript based charting tools, and found jqPlot to be the most robust, best architected, best-maintained (Chris is one of the nicest small project maintainers I’ve run across), best-looking jQuery-based charting library. I wrote a jQuery plugin (http://bitbucket.org/eads/tablechart) to provide the table-scraping behavior of the Visualize plugin (#1 on this list) in conjunction with jqPlot. It supports tables-as-series, columns-as-series, and configurable scraping and parsing for more advanced needs.
- WebdesignerAid's Editorial
  
  02.09.2011
  
  Reply
  
  Hi David,
  
  jqPlot is indeed one of the best plotting library to look out! And your Tablechart plugin is an excellent one!
  
  Thanks for sharing!
Brett Widmann

03.15.2011

Reply

This was really helpful! Thank you for the resources.
Nick

05.19.2011

Reply

HTML5 is great, but what irks me about it is the insistence from management and creative people that this is a replacement for Flash. No it isn’t. Frankly i blame Steve Jobs, his big douchey mouth and his overrated cell phone for severely damaging Flash’s well deserved and long fought for reputation. With HTML5 I’m expected to write 10 times as much code for 1/16 the functionality and it’s doesn’t work on IE. Apple should offer a public apology for the misinformation about HTML5 they have created, and promise the Adobe developers footrubs for life.
- Web design geek
  
  06.28.2011
  
  Reply
  
  I disagree. HTML5 + jQuery + Javascript can replace nearly everything Flash is most known for in the long run. Only graphically intense functions still require Flash, but once WebGL finally gets supported by all major browsers this too should no longer be a problem and WebGL will in fact have superior performance.
  
  Anyway, Flash has always been a piece of crap and while I’m not a fan of Steve Jobs either I support his decision to take the risk of dissing Adobe by not adopting Flash on his (indeed overrated) cell phone. Yes, Javascript based solutions require more code than Flash based solutions, but as more open source frameworks and libraries get developed they will do the grunt work for you so you can focus only on the important code.
  
  Also, while eg. the Canvas tag (imo the msot important HTML5 feature) is not supported by IE, there are libraries that translate the Canvas code to VML, Silverlight or Flash and thus make it available in IE as well. Sure, it’s more slow than on other browsers but at least it works and can serve as a temporary solution until Microsoft gets its act together and implements the Canvas tag in its crappy browser.
  - WebdesignerAid's Editorial
    
    07.19.2011
    
    Reply
    
    @webdesignergeek, Thanks for the feedback!
Alexey

06.22.2011

Reply

It’s realy cool!
Eric Rowell

08.20.2011

Reply

Oh no, you’ve forgotten http://www.html5canvastutorials.com which covers everything related to canvas!
Alexander

09.23.2011

Reply

Another cool chart you can find here http://plutov.by/post/cube_chart
dive

10.11.2011

Reply

Is a great resources for obtain charts
Maryland Robert

12.06.2011

Reply

I am absolutely amazed at what has been done with canvas and html5! It is really a shame there are so few graphing libraries of this quality for server side languages. All of the most interesting graphing and charting libraries are some combination of javascript and html!
HTML5 Charts

04.24.2012

Reply

HTML5 supported charts and graphs are really interactive and having lot of advantages. The HTML5 technology has improved codes, improved semantics, consistent, easy accessibility, geo-location support and many more. HTML5 is really only best realized with the use of CSS 3 and JavaScript. JavaScript, in particular, has quickly emerged as one of the best ways to help render great looking effects, animations and contents (could be the charts and charting components as well) etc. With browsers implementing more HTML5 features across platforms and devices, developers are starting to integrate many of the new features and frameworks into their web apps, websites and web designs.
jim.wu

04.30.2012

Reply

The HTML5 specification contains a broad set of technologies at varying degrees of adoption and implementation. W3C encourages people to use the technologies (and actively calls for implementation during the Candidate Recommendation period) and provide feedback to the Working Groups in order to improve specification quality.
Andre

08.30.2012

Reply

Another one to add to the list I’m a huge fan of, d3.js:

http://d3js.org/
- Andre
  
  08.30.2012
  
  Reply
  
  Oh wait, I think these are SVG powered, my bad
Kyle

11.23.2012

Reply

What if I preferred to make static gif charts? How to do that?