Charts, Graphs, and Diagrams!
Thanks to those who make Doctype possible!
Graphing Roundup
Google Charts API
Our first option comes from Google. The Google Charts API let's you dynamically create charts just by creating urls that contain the chart data and options. The url points to Google's servers, and returns an image with your chart. Because Google Charts are all based on images, it means you don't have to have any special plugins or even have javascript enabled. The charts will be available from any browser that can render images and reach Google.com. The Google Charts API offers line, bar, and pie charts, Venn diagrams, scatter plots, radar charts, meters, and even QR codes.
gRaphaël
UPDATE: gRaphaël actually uses SVG and not the canvas tag. Sorry for the confusion!
gRaphaël is a solution that uses Javascript and the canvas tag to draw the charts. Don't worry about IE's lack of canvas tag support, almost all javascript/canvas based charting solutions include a hack to make them work in IE. gRaphaël offers Pie, Line, Bar, and Dot charts. While it may not have the greatest number of graph types and styling options, we like gRaphaël because it is built on the Raphaël Javascript library, which offers an easy to use API for drawing on the canvas.
gRaphaël—Charting JavaScript Library / Raphaël—JavaScript Library
HighCharts
One of the libraries that has been getting a lot of attention lately is the HighCharts library. And with good reason, HighCharts offers line, scatter, area, bar, and pie charts, and can combine several types into one chart. It features chart animations, multiple themes, and tons of options for both the layout and style of the graphs.
HighCharts is free for NonCommercial use, but for commercial websites, a single site license is 80 dollars.
Ajax.org Charting Elements
The last solution we look at is the charting components of the Ajax.org javascript library. Now, while it's very cool and advanced, it has trouble in some browsers. I could not get the Ajax.org website, which is written in the ajax.org library, to load correctly in Internet Explorer 6. It does have some amazing 3D graphs that are worth checking out.
Graph Design Tips
General Notes
Make sure you're using graphs to simplify information, rather than overcomplicate it. Additionally, before you start looking at graphs, make sure you have more than one dimension of data to represent.
Color
Color in graphs should serve a purpose, and color for decorative purposes should be avoided. Also, because colors in graphs are so close together, you should be conscious of how they play off one another. A great tool for examining the interrelationships between colors is Kulur, from Adobe. You can use Kulur to find nice, pre-made color palettes, or you can create your own.
Kulur, a web-based color tool from Adobe
Backgrounds
Don't do it! Backgrounds are almost always too distracting to be used in any kind of graph. Subtle gradients and shadows are probably OK though.
Graph Types
There are an infinite number of ways to visualize data, but here are some quick tips:
- Think in terms of dimensions. This will help you choose the simplest graph possible.
- Don't use a pie chart if your data adds up to more than 100%. This sounds silly, but it can happen if you're dealing with overlapping groups. For example, I bet the percentage of the population that like cookies overlaps quite a bit with the percentage that enjoys birthday cake.
- When showing a trend over time, a line graph is best. A bar graph can work too, but a line graph helps you interpolate the data, because there are lines between each data point.
Data visualization is a huge topic, but if you really want to learn the subject in depth, I highly recommend The Visual Display of Quantitative Information by Edward Tufte.
