5 Cool Ways to Add Graphs to Your Website
Graphs, charts and diagrams can be used to visually describe data. Visualizing data is very important, as it helps the reader to understand the data even better. And even though some people might prefer viewing data in a table, I think we are many who feel more comfortable in viewing data graphically. Fortunately for us, there are several ways you can implement data into a graph on a website.
Basically, you have two main options; You can use Flash, or you can use jQuery. What you prefer is entirely up to you, but I’d like to show you some of the possibilities within each technology.
Open Flash Chart
An example of a bar chart made with Open Flash Chart
Open Flash Chart is—as the name states—a Flash chart. If you run a WordPress blog, you might know it from the WordPress.com Stats Plugin. It is open source, and there are lots of customization options. You can make almost any kind of chart you can imagine, and it’s fairly easy to setup if you just follow the tutorials on the Open Flash Chart website. With the new Open Flash Chart 2, you can even use it with jQuery and save your graphs as images. To see examples, and to read the tutorials, visit the Open Flash Chart website.
Flot
An example of a Flot graph
Next up is Flot, a jQuery based method for implementing graphs. It is hosted at Google Code, and it works in all the major browsers (including IE6). It comes with a great bunch of examples, but the documentation could be better. The output of Flot will be a static image.
jQuery Visualize Plugin
An example of the jQuery Visualize Plugin.
This jQuery plugin helps you implement dynamic charts into your website without using Flash. Using the HTML5 canvas element it is possible to create great-looking charts without using even images. There’s a very thorough tutorial at the site that helps you set it all up. Also, it works in every major browser.
jQuery SVG
An example of a bar graph made using jQuery SVG
This is yet another jQuery plugin called jQuery SVG. It uses SVG, a language “for describing two-dimensional graphics in XML”. SVG is supported in most browsers. Actually, it is not only a graphing plugin. You can use it to create advanced graphics on your website such as text paths. Still, for graphs it is very usable.
Google Chart API
An example of a map chart made with Google Chart API
The last method is Google’s own Chart API. It is very simple, and all you get is static images. But the static images are cool. You can easily create world maps with selected countries colored in your choice of color. As with almost every Google project, the documentation is awesome. You’ll get some very fine looking graphs with little effort, and everything is customizable.
Conclusion
Now to the big question: Which method is the best? I don’t know. I guess it’s all about taste and what you need it for. But similar for the five mentioned methods is that you have some very great, free resources that easily lets you implement graphs into your website.
[...]
Alex Sage
November 7, 2011 at 6:23 pmWe have recently released this 100% javascript graphing library Active Graphs and Charts
http://www.jpowered.com/graph_chart_collection/
Full cross browser support including IE 6.0, 7.0, 8.0, Chrome, Firefox, Safari and Opera.
amafar
December 16, 2010 at 9:01 am“It is very simple, and all you get is static images. But the static images are cool. You can easily create world maps with selected countries colored in your choice of color. As with almost every Google project, the documentation is awesome. You’ll get some very fine looking graphs with little effort, and everything is customizable.”
Can more?
Inside the Webb
October 25, 2009 at 4:54 pmMy favorite way has to be dynamically through PHP, it gives you so much control you never thought you’d have.
Mike Krus
October 25, 2009 at 9:23 amHave you come across this?
http://raphaeljs.com/
Peter
October 25, 2009 at 9:52 amYeah, Joe wrote a comment about right below. It is a great resource!
Joe Mako
October 25, 2009 at 1:51 amtwo others you may consider:
http://vis.stanford.edu/protovis/ex/
and
http://raphaeljs.com/
Peter
October 25, 2009 at 9:51 amThose are pretty cool! It seems you can do a lot with both of them. Thanks, Joe!
John Pitchers
October 19, 2009 at 4:06 pmPerfect timing. Have been recently discussing adding dynamic charts to a site for a new client. Flot looks like a great tool.
Kate
October 19, 2009 at 9:34 amThis is surely for more advanced users than me. I use Animated Chart prog, it’s commercial but really very easy to use. And the most important for me – I don’t need programming knowledge to make flash chart with it. Still, thank for posting, maybe one day I’ll get into these tricky things
Rejpal
October 19, 2009 at 8:46 am…or you could use PHP, or you could use MooTools, or pure JavaScript… Just two main options? Really?
Peter
October 19, 2009 at 8:58 amHa ha, I see your point! I’m sorry about that. I actually didn’t know that you could create graphs with pure CSS, and I didn’t bring MooTools in because I only use jQuery myself, but that’s of course not the way to do it, I see now. Thanks!