Review: 5 Options for Embedding Charts in a Web Page

A few weeks ago, I received an e-mail from the folks at Widgenie asking for a blog review of their newly launched service. Widgenie targets non-technical people looking for an easy way to create and publish charts or data visualizations on the web. As I began looking it over, I wondered whether this problem had been solved elsewhere. It has. I’ve summarized my experiences with five services that can help you go from data table to web chart with ease.

I evaluated the services across three criteria:

  1. Data upload: simple process, options for file types, control after loading data, ease of updating data.
  2. Chart options: different chart types, control of labels, axes, ordering data, and formatting.
  3. Chart design: effective data presentation, absence of chart junk.

A few things I didn’t worry about, but might be worth considering:

  • Managing charts that you have created
  • Animation or interactivity of charts (usually this is more distracting than useful)
  • Easy registration process
  • Performance across all the chart types

I gave each service a score of 1 (poor) to 3 (great) for each criteria. Top performers are highlighted in green.

Embedded Charts Solutions

Unlike some of the other solutions, Google Spreadsheet with charts/gadgets isn’t primarily about creating data visualizations. Nevertheless, in a few simple steps, you can upload data, create a good looking chart, and publish for the web.

One key advantage to Google Spreadsheets is that you can easily change and manipulate the data online. The chart output is clean and practical. The chart options are basic, but when you select gadgets rather than charts, you have a lot more visualization options. I was disappointed that it didn’t offer many options for formatting, which is frustrating in an application that is beginning to feel like Excel.

Widgenie is exclusively targeted at the problem of embedding web charts. Overall, I found Widgenie easy to use. The process for loading data and creating “widgets” was straightforward and obvious, if a bit linear (e.g. once you create a widget, you can’t go back to change the chart type). Widgenie offers an above-average number of publishing options, including embedding your charts in iGoogle, Blogger, and Facebook.

Unfortunately, Widgenie offers a lot more sizzle than steak. Its bold marketing statements include:

“the all-powerful data visualizer”

“Take your data and transform it into visual information that can be shared with anyone, anywhere. Your wish is our command!”

“We combine all the power of an enterprise-level business intelligence platform and provide it in a convenient Web 2.0 widget.”

A few of the issues I ran into:

  • Relentless use of “animated” 3D charts—where animated means it moves as it is drawn on the screen, not that it shows changes over time in movie format (now that could be powerful).
  • The tag cloud visualization, the lone advanced widget option, colors the text rather than sizing it. That isn’t the way tag clouds typically work.
  • Finally, as you can see from the image below, I wasn’t able to present my data in order of months (though I loaded it that way). When the data is labeled as text, it automatically gets sorted alphabetically. Changing it to date/time made things even worse.

Editor’s note: We can’t even embed the widgenie widget in the page because a coding problem with the widget caused all the links on this page to turn red. This problem only occurs with certain browsers.

Swivel isn’t directly aimed at the embedding charts market, but still does a competent job of delivering this capability when you select the “post to blog” option. Swivel offers a beautiful data upload process, but failed in its attempted to auto-define the chart type. Like Widgenie, Swivel struggled with ordering my data the way I wanted it, and somehow lost the order of my original data load.

The charts are generally clean and easy to read, but they’ve made a strange commitment to vertical grid background which doesn’t work for a column chart.

Swivel Embedded Chart

Many Eyes is brought to us by the big-time data visualization thinkers at IBM. They know the right way to present data, and it shows.

Unlike the other services, the only way to get data into Many Eyes is by pasting into a text box. When it comes to visualizing the data, however, Many Eyes offers a myriad of options. Using it to create a simple column chart feels like taking a Ferrari to the grocery store. It is worth checking out the word tree, treemap, network diagram, and proper tag cloud.

Like Swivel, Many Eyes was designed as an online community for the visualization of public data sets, yet it pulls of web chart publishing with ease. The one negative is the "click to interact" feature on the chart.

Zoho Sheet is an online spreadsheet like Google Spreadsheets. I was ready to fall for this one. Like Google Spreadsheet, I simply dropped in my data and selected the create chart button. You’d swear you were in Excel as it walks through the steps to selecting and customizing a chart. But then this came out…

Zoho Sheet -

Fortunately, a Zoho’r explained in the comments how to change from this default view.

Godin Dumps on Bar Charts; Data Visualization Record Falls to 1 and 1

Seth Godin, well-known marketing guru, took a strong and misguided stand against bar charts1 in a recent blog post entitled “The three laws of great graphs”

Godin suggests that bar charts (and presumably other chart types like scatterplots, bubble charts, bullet charts, treemaps, etc.) give too much latitude for data confusion and ambiguity when used in presentations. In Godin’s view, a chart should make a single, clear point and leave no room for alternative conclusions.

“The only reason (did I mention only) to use a chart in a presentation is to make a point. If you want to prove some deep insight or give people textured data to draw their own conclusions, DON’T put it in a presentation.” “If the facts demand nuance, don’t use a graph, because you won’t get nuance, you’ll get confusion.”

Godin had hit on a similar point a while back when he critiqued Edward Tufte’s favorite infographic Napoleon’s March to Moscow.

“I think [Tufte] is completely out of his gourd and totally wrong. I think this is one of the worst graphs ever made…To make me take 15 minutes to study it doesn’t make sense.”

I agree that complex infographics aren’t an effective communication mechanism for many audiences, particularly if you are interested in telling a focused story.

Unfortunately, he uses this reasonable foundation as a jumping off point to claim that bar charts are overrated and unnecessary (he throws in a heinous 3D column chart for emphasis). “The problem with bar charts,” he says “is that they should either be line/area charts (when graphing a change over time, like unemployment rates) or they should be a simple pie chart”

That popping sound you hear is Stephen Few’s head bursting.

It is reasonable to argue that a value changing over time is often better suited to a line or area chart. But pie better than bar. Sorry, no can buy. He obviously got some flak after this first post:

“I stepped on the toes of many data presentation purists2 yesterday, so let me reiterate my point to make it crystal clear: In a presentation to non-scientists (or to bored scientists), the purpose of a chart or graph is to make one point, vividly. Tell a story and move on. If you can’t be both vivid and truthful, it doesn’t belong in your presentation.”

His follow-up post Bar graphs vs. Pie charts attempts to solidify his argument but ends up stepping in more goo. To make his point, he shows a effective pie chart versus an ineffective bar chart.

Godin Pie Chart
Godin Bar Chart

In a not so subtle sleight of hand, he has added another data series to the bar chart to show how it doesn’t make a single, clear point. As my colleague Pete likes to say, if my aunt had…

His argument appears to boil down to a belief that pie charts are so simple that it is impossible to deviate from his one-point-per-chart rule. Or put another way: presenters can’t be trusted to follow this rule, so best to take away anything dangerous. This parallels the misplaced anger people have toward PowerPoint. I wrote a post called A Poor Craftsman Blames His Tools.

That question aside, I reject his rejection of bar charts for a number of reasons:

  • There is a lot of evidence that bar charts aresuperior to pie charts even when showing simple data. Bar charts allow for better labeling and show relative size more effectively.
  • Pie charts are the most frequently mis-used charts in my experience. There seems to be an irresistible need to craft animated, 3D, shiny pies — all of which adds zero communication value.
  • Restricting data presentation to a few chart types limits your ability to communicate. Scatterplots, for example, can carry powerful and clear messages about relationships between variables.
  • If the data and message is super simple (as Godin would want), using a chart is likely a waste of pixels. In his pie chart above, the only message he wants to convey is that trolls rule. Why not simply state: “Trolls are the largest segment with 45% share” and leave out the chart.
  • Bar charts can show trends and magnitudes simultaneously. I don’t believe this has to be a liability in communication, nor should they always be separated. If I wanted to show that trolls are both the biggest segment and the fastest growing, breaking those facts into separate slides seems more distracting than useful. The points are tightly linked and supportive of each other.

1. The “bar” chart that Godin refers to is actually a column chart. I’ll use the term bar charts to refer to both bar and column charts in this post. However, the distinction between these two chart types is important as each chart is appropriate in different circumstances. For example, when there are a lot of categories, a (true) bar chart allows for much clearer labeling.

2. “Purists” seems to be used to label the objectors as a bunch of academics who don’t appreciate the realities of the business world. If you’re a loyal reader of our blog, you know that is a stick we prefer to use on others.

10 Minute Reviews: Open Flash Chart

We frequently get requests to review and write about analytics-related solutions. I’ve put off most of these requests because it sounded like a lot of work. Then I had an 4-hour-work-week-style epiphany: most new users only give a new product or service a few minutes before they make up their mind. Why can’t I make the same snap judgement and call it an expert opinion?

First up is Open Flash Charts, pointed out to us by Matt Bear. This is an open source project started by John Glazebrook to provide flash charts that can be embedded in web pages. I love John’s explanation for taking on this project:

“Once upon a time I had to deal with a company who sell flash charting components, their component had a bug that I needed fixing, so I emailed them about it asking when it’d be fixed. (Remember that I had paid real money for this software.) They were so incompetent, rude and obnoxious that after three or four weeks of emails I thought to myself “I could learn Flash and Actionscript and write my own charting component, release it as Open Source, host it on sourceforge and build up a community of helpful coders faster than they can fix a single bug.” And that is what I did. And that is why it is free. I guess the moral of the lesson is: don’t piss off your customers.”

Great lesson. Great attitude. There are a bunch of vendors in this space (Fusion Charts, AnyChart, ILOG, PHP/SWF Charts, amCharts, Corda) and the going price seems to start at $500 for a developer’s license up to $5,000 for an enterprise license. (Apparently that doesn’t always come with customer service.)

Fusion Charts

Open Flash Charts isn’t as flashy as any of these products, but that tends to be a good thing for charting components. Here’s a column chart from Fusion charts (notice how each bar is a separate color, for no good reason)

Open Flash Charts

Here’s the Open Flash Charts

Open Flash Charts does a number of things well:

  • It seems to be easy to implement. Basically, you just copy the Open Flash Chart SWF file into your web server, then start embedding flash charts into your HTML and point to either static or dynamic data on your server.
  • You can configure data labels, background, number formats, on-click events, tooltips, etc.
  • All the basic chart types are available (bar, line, area, pie, scatter).
  • The help forum seem both lively (multiple messages a day) and supportive (a generally polite tone with lots of code posted).

On the negative side, Open Flash Charts doesn’t totally succeed in terms of data visualization fundamentals. The default charts have some contrast issues, odd color choices, and a little excess chartjunk. And when the charts get some “pizzazz,” things get worse:

Pizzazz chart

I know… it is an open source project, so I should step up and fix the things I don’t like. I would, but I just ran out of my 10 minutes.

Tufte-Style Comparison Chart Generator

Last week, we shared a rendition of a Tufte graphic using just a few lines of Nodebox code. As our commenters pointed out, Python is great, but it may not be every business analyst’s carnal desire to learn a programming language just to generate some nifty graphs. I spent some time to push Chris’s Nodebox rendition into a PIL-based Windows tool that can generate the same sort of comparison graph from an Excel file on the fly.

The result is The Comparison Chart Generator 1.0. The installation instructions are relatively simple. Unzip the zip file, and run comparisionchartgenerator.exe.

Alternatively, we have a new excel chart that creates the same effect using only excel functionality. Download the Excel Tufte Line Chart here.

If you are using the Chart Generator, start with some data in an Excel (xls) or Comma Delimited (csv) format. The data for this graph has to be contained within the first sheet starting with cell A1, as in the following picture.

Excel Dialog

Select an input file. There are a couple example files bundled with the download.

Open File Dialog

After selecting a file, you’ll be prompted to modify a few of the basic options available for the chart.

Options Dialog

Finally, save the result as a jpeg.

Save File Dialog

Here is the same image found in Tufte’s textbook processed using the Comparison Chart Generator. It is generated using the csv example file bundled with the download.

Tufte-esque Chart by Comparison Chart Generator

Those of us who have undergone lasik eye-improvement surgery may still prefer the sharp crisp Nodebox results, but for the rest of us, this image looks pretty good. Let us know if this tool is useful. If there is enough of a positive response, we may consider expanding functionality for other fancy Tufte-esque charts.

If you do prefer Nodebox, I have an updated script here. This pushes the script up to 20 lines of code or so, but the extra 9 lines allow the labels to push themselves apart on their own. If you want to look at the source code for the Windows program, you can get it here. I used py2exe to compile it into an executable. The code, however, has not been thoroughly commented or cleaned as of yet, so edit it at your own risk.

Analytics Roundup: Google goodies v. MS Paint

YouTube—MS Paint by freeloveforum
Ah—MS Paint. The endless limitations. This spoof video pokes fun at the design team who made this application.

YouTube—Amazing Footage of MS Paint
Completely amazing step by step footage of the creation of a great image with (you won’t believe it) MS Paint - no kidding. This just goes to show that so many times it’s not the tool that enables or limits, but the skills of the user.

ColorSchemer | Instant color schemes for your Mac with ColorSchemer Studio OSX
Mac tool to properly select colors that look good together. Adds a new tool to base the scheme on a photo as well. Visualizing Data: Books: Ben Fry
Ben Fry is good.

google ridefinder
Shows paths of shuttles in New York City. It’s easy to pick up the outline of Manhattan.

daily FedEx plane network
Animation showing FedEx flight patterns over a 2 day period. It’s easy to visually pick out patterns from this (i.e. there’s no doubt where Memphis is).

Google new chart API
URL to plot charts and return the result as an image right in the browser.