Stiern

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

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.

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

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

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.

25 comments

Leave one yourself

  1. We 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.

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

  3. Inside the Webb

    October 25, 2009 at 4:54 pm

    My favorite way has to be dynamically through PHP, it gives you so much control you never thought you’d have.

    1. Yeah, Joe wrote a comment about right below. It is a great resource!

    1. Those are pretty cool! It seems you can do a lot with both of them. Thanks, Joe!

  4. Perfect timing. Have been recently discussing adding dynamic charts to a site for a new client. Flot looks like a great tool.

  5. This 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 :)

  6. …or you could use PHP, or you could use MooTools, or pure JavaScript… Just two main options? Really?

    1. Ha 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!

Trackbacks

  1. [...] 5 Cool Ways to Add Graphs to Your Website 5 façons d’ajouter des graphiques sur votre site [...]

  2. [...] 12. 5 Cool Ways to Add Graphs to Your Website [...]

  3. [...] 5 Cool Ways to Add Graphs to Your Website 5 façons d’ajouter des graphiques sur votre site [...]

  4. Favorites from the Feeds #08 | meshdairy

    October 29, 2009 at 8:42 am

    [...] 12. 5 Cool Ways to Add Graphs to Your Website [...]

  5. Favorites from the Feeds #08 | Master Design

    October 28, 2009 at 10:33 am

    [...] 12. 5 Cool Ways to Add Graphs to Your Website [...]

  6. [...] 5 Cool Ways to Add Graphs to Your Website | Stiern.com (tags: jquery charts visualization webdesign) [...]

  7. [...] 12. 5 Cool Ways to Add Graphs to Your Website [...]

  8. Favorites from the Feeds #08 : BeginnerPC

    October 24, 2009 at 6:12 pm

    [...] 12. 5 Cool Ways to Add Graphs to Your Website [...]

  9. [...] 12. 5 Cool Ways to Add Graphs to Your Website [...]

  10. [...] 5 Cool Ways to Add Graphs to Your Website 5 façons d'ajouter des graphiques sur votre site [...]

  11. [...] 5 Cool Ways to Add Graphs to Your Website | Stiern.com (tags: jquery webdev) [...]

  12. [...] This post was mentioned on Twitter by Samuli Hakoniemi and chasesagum, Peter S. Høgenhaug. Peter S. Høgenhaug said: New blog post at Stiern.com: 5 Cool Ways to Add Graphs to Your Website – http://bit.ly/nZOp1. Please share :) [...]