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 - http://sheet.zoho.com

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

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License. All source code is released under a BSD License unless otherwise specified.

9 comments | Show all comments only the last 5 are shown


August 4, 2008
Jay Jakosky said:

What about the Google API for graphing objects?


August 4, 2008
Zach said:

@Jay We love the Google API here at Juice but I thought it was too difficult for a non-technical person to set-up and update.


September 4, 2008
derek said:

I used your table as a simple example of reordering tables so the 3s make an approximate diagonal across the grid. The article describing the method is at my blog here:

http://i-ocean.blogspot.com/2008/09/reorderable-tables.html


September 26, 2008
Ivan Ortega said:

How about XML/SWF Charts http://maani.us/xml_charts/ , overall not very difficult to use, just need a little xml knowledge.


September 30, 2008
Henry Baker said:

You might need to mention this site which has nice GUI for Google
chart api:
http://www.webchartwizard.com
I think that they are just using JavaScript.

Your name

Email (optional, will not be shared)

Type the word "juice" (required to confuse the spammers)

Your comment


Add a comment





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 are superior 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.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License. All source code is released under a BSD License unless otherwise specified.

10 comments | Show all comments only the last 5 are shown


July 15, 2008
Andrew said:

I noticed Seth's advice includes using animation. I think this is in contradiction to his goal of being "vivid and truthful" in a presentation. Animation certainly can make things vivid since we (humans) are a highly visual species. But animation does not necessarily lead to truth. I read a paper recently that indicated that the misapplication of animation can lead observers to a false causal mechanism because of our propensity for visual thinking. Since marketing is persuasion, and persuasion is somewhere between truth and lies, then Seth is correct in that animation is a marketing tool (just don't mix it with knowledge discovery purposes).


July 15, 2008
Mike Hayden said:

I proudly consider myself firmly planted in Godin's "data presentation purists" category and I had to take a deep breath before allowing myself near my keyboard after reading this post.

Why on earth would anyone in "marketing" care about being "truthful" in a presentation?

I think Tufte is on the right track. Let the story tellers have their PowerPoint presentations and leave well crafted information presentations to the people who would like to have the necessary details available to them when a decision needs to be made. I always assume my audience falls into the later category.


July 16, 2008
Madan said:

The sad truth is that most people seem to prefer pie charts. Why I can't explain (perhaps it's related to median IQ or that nobody really wants to have to think), but that's been my experience. In my own orginization I've tried mightily to help educate the people who distribute key reports to use bar/column charts, but the net result of this effort has been null. Enter Sisyphus...


July 19, 2008
Robbin Steif said:

Well, a poor craftsman may blame his tools, and didn't you blame Powerpoint about 18 months ago, and write him a letter, telling him you weren't going to use him, and what a lousy thanksgiving it must have been for Powerpoint with his poor sister, MSWord, who has troubles of her own, now that people use Google Docs too? Which was one of the most fabulous ways of presenting information (the letter), even if it wasn't numeric.


September 28, 2008
Fazal Majid said:

I flipped the bozo bit on Godin a long time ago and instructed my RSS feed reader to discard any article mentioning him, which is why I did not see this post when it came out.

His recommendations pertain to marketing presentations, where logic, truth, objectivity or rational thinking are not just superfluous, but actively discouraged as they interfere with the task at hand, i.e. shilling for whatever Godin is shilling for at the moment (usually, Seth Godin himself).

Your name

Email (optional, will not be shared)

Type the word "juice" (required to confuse the spammers)

Your comment


Add a comment





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

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) Fusion Charts

Here’s the Open Flash Charts 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.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License. All source code is released under a BSD License unless otherwise specified.

11 comments | Show all comments only the last 5 are shown


June 5, 2008
Pete said:

Dov, you might want to check out the new google visualization api instead of charts:

http://code.google.com/apis/visualization/documentation/gallery/annotatedtimeline.html
http://code.google.com/apis/visualization/documentation/gallery/columnchart.html

From the docs: "Data Policy: All code and data are processed and rendered in the browser. No data is sent to any server."


June 5, 2008
Fong said:

Pete,

thus that mean i can download the api and use them offline? This will provide an added sense of security, wheather it's justifiable or not


June 9, 2008
suman said:

How to control the context menu (right click disable on chart).

Off course i made modifications to open-flash-chart.as file but how to compile that file to get the desired output?
Any one please help me in this regard.


June 19, 2008
mb said:

Suman,

You'll probably have better luck posting your question in the Open Flash Chart support forum. It's hosted on Sourceforge, at this URL:

http://sourceforge.net/forum/forum.php?forum_id=716572


June 25, 2008
tulip25 said:

hey Guys,Look what i have got <a href="http://visifire.com"> visifire</a> an amazing charting component quality of charts are better than Flash chart's.offered under open source powered by silverlight

Your name

Email (optional, will not be shared)

Type the word "juice" (required to confuse the spammers)

Your comment


Add a comment





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.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License. All source code is released under a BSD License unless otherwise specified.

19 comments | Show all comments only the last 5 are shown


May 14, 2008
Sal said:

As promised, I posted an excel chart of the same graph. You can find the link near the top of the page.


May 15, 2008
Jose Hernandez said:

I have an alternative post on a dynamic Excel bumpchart that combines charts with the cell grid. You can donwload it at http://sites.google.com/a/visual-catalyst.com/info_displays/Home/tufte_example_bumpchart.xls?attredirects=0

This display works for all versions of Excel. I'm working on a how to that describes how you can extend this type of chart.


May 31, 2008
Christof said:

Excellent work. I'm impressed!


July 2, 2008
John said:

awesome - using it right now. More Tufte style charting programs please!


September 1, 2008
Andrew said:

Can you do a chart with more than two columns?

Your name

Email (optional, will not be shared)

Type the word "juice" (required to confuse the spammers)

Your comment


Add a comment





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.

Amazon.com: 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.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License. All source code is released under a BSD License unless otherwise specified.

0 comments | Add a comment

Your name

Email (optional, will not be shared)

Type the word "juice" (required to confuse the spammers)

Your comment