Comments on: Automatic conversion from simple, accessible data tables to YUI Charts http://yuiblog.com/blog/2008/01/17/tables-and-charts/ News and Artilces about Designing and Developing with Yahoo! Libraries. Fri, 18 Jul 2008 20:48:47 +0000 http://wordpress.org/?v=2.3.3 By: Веб-обзор #10 - бизнес, бизнес, немного РНР, совсем немного PostgreSQL и архитектуры Flickr и Google на русском. | Alpha-Beta-Release Blog http://yuiblog.com/blog/2008/01/17/tables-and-charts/#comment-301728 Веб-обзор #10 - бизнес, бизнес, немного РНР, совсем немного PostgreSQL и архитектуры Flickr и Google на русском. | Alpha-Beta-Release Blog Sun, 10 Feb 2008 10:54:20 +0000 http://yuiblog.com/blog/2008/01/17/tables-and-charts/#comment-301728 [...] Automatic conversion from simple, accessible data tables to YUI Charts - для разработчиков, использующих AJAX и нуждающихся в отображении различных табличных данных, описывается простой способ, как при помощи библиотеки Yahoo User Interface (YUI) создать приложение, строящее графики по исходным табличным данным. Кстати, многие популярные фреймворки уже имеют в своём арсенале компоненты для рисования графиков, некоторые даже замахиваются на трёхмерные диаграммы (Dojo Toolkit), а Google недавно предоставил свой сервис построения графиков, так что, видимо, рынок вполне готов принять новый подход, когда данные это не только и не столько сухие данные в таблицах, но и красочные диаграммы. [...] […] Automatic conversion from simple, accessible data tables to YUI Charts - для разработчиков, использующих AJAX и нуждающихся в отображении различных табличных данных, описывается простой способ, как при помощи библиотеки Yahoo User Interface (YUI) создать приложение, строящее графики по исходным табличным данным. Кстати, многие популярные фреймворки уже имеют в своём арсенале компоненты для рисования графиков, некоторые даже замахиваются на трёхмерные диаграммы (Dojo Toolkit), а Google недавно предоставил свой сервис построения графиков, так что, видимо, рынок вполне готов принять новый подход, когда данные это не только и не столько сухие данные в таблицах, но и красочные диаграммы. […]

]]>
By: Javascript News » Blog Archive » Canvas Pie Chart from datatable http://yuiblog.com/blog/2008/01/17/tables-and-charts/#comment-298611 Javascript News » Blog Archive » Canvas Pie Chart from datatable Tue, 05 Feb 2008 19:10:13 +0000 http://yuiblog.com/blog/2008/01/17/tables-and-charts/#comment-298611 [...] I played with Google charts and porting the idea of generating charts from accessible table data over to YUI charts Stoyan Stevanof had to use the same idea to generate his own, home-made Canvas-driven [...] […] I played with Google charts and porting the idea of generating charts from accessible table data over to YUI charts Stoyan Stevanof had to use the same idea to generate his own, home-made Canvas-driven […]

]]>
By: Ajaxian » Canvas Pie Chart from datatable http://yuiblog.com/blog/2008/01/17/tables-and-charts/#comment-298584 Ajaxian » Canvas Pie Chart from datatable Tue, 05 Feb 2008 18:24:56 +0000 http://yuiblog.com/blog/2008/01/17/tables-and-charts/#comment-298584 [...] I played with Google charts and porting the idea of generating charts from accessible table data over to YUI charts Stoyan Stevanof had to use the same idea to generate his own, home-made Canvas-driven [...] […] I played with Google charts and porting the idea of generating charts from accessible table data over to YUI charts Stoyan Stevanof had to use the same idea to generate his own, home-made Canvas-driven […]

]]>
By: Eric Miraglia http://yuiblog.com/blog/2008/01/17/tables-and-charts/#comment-291760 Eric Miraglia Mon, 28 Jan 2008 18:55:36 +0000 http://yuiblog.com/blog/2008/01/17/tables-and-charts/#comment-291760 @Fred -- The chart will be the size of the containing element, so just instantiate the chart in a 200x200 div. -Eric @Fred — The chart will be the size of the containing element, so just instantiate the chart in a 200×200 div. -Eric

]]>
By: Fred http://yuiblog.com/blog/2008/01/17/tables-and-charts/#comment-291685 Fred Mon, 28 Jan 2008 16:30:40 +0000 http://yuiblog.com/blog/2008/01/17/tables-and-charts/#comment-291685 Hey, this is cool! But, how i make to do the chart with dimension 200x200? Thx! Hey, this is cool!
But, how i make to do the chart with dimension 200×200?

Thx!

]]>
By: James http://yuiblog.com/blog/2008/01/17/tables-and-charts/#comment-288478 James Wed, 23 Jan 2008 14:50:15 +0000 http://yuiblog.com/blog/2008/01/17/tables-and-charts/#comment-288478 Josh - Thanks, I'd only quickly looked at print preview in FF... Josh - Thanks, I’d only quickly looked at print preview in FF…

]]>
By: 2 Links Today (2008-01-21) http://yuiblog.com/blog/2008/01/17/tables-and-charts/#comment-287291 2 Links Today (2008-01-21) Mon, 21 Jan 2008 15:21:37 +0000 http://yuiblog.com/blog/2008/01/17/tables-and-charts/#comment-287291 [...] Automatic conversion from simple, accessible data tables to YUI Charts » Yahoo! User Interface Blog [...] […] Automatic conversion from simple, accessible data tables to YUI Charts » Yahoo! User Interface Blog […]

]]>
By: Andrew http://yuiblog.com/blog/2008/01/17/tables-and-charts/#comment-284609 Andrew Fri, 18 Jan 2008 04:35:21 +0000 http://yuiblog.com/blog/2008/01/17/tables-and-charts/#comment-284609 This is impressive, but designers should be very careful with how they use pie charts, which are typically the <b>worst</b> format for presenting comparative data. Pie charts are sort of the friendly doofuses of the graph world, they seem very approachable and clear, but don't really offer any solid insight. It's very hard to accurately compare the wedge shapes in pies, because humans aren't that good at determining angle sizes or angular area. If you were just looking at the pie chart above, could you tell what the difference between Lynx and Opera is easily and accurately? (That's not quite fair, since the pie chart's not actually labelled.) Most importantly, can you easily tell that Opera represents 6x Lynx? If you can't tell simply by looking at the graph (not the data table), it's not a useful visualization. Wikipedia's got <a href="http://en.wikipedia.org/wiki/Pie_chart#Discussion_on_use" rel="nofollow">a terrific example</a> of this problem. The examples of pie charts in <a href="http://code.google.com/apis/chart/#pie_charts" rel="nofollow">Google's Chart API</a> impart literally no information at all other than "some things make up some other thing." Also, this particular dataset doesn't need to show how much a given browser represents out of 100%. It's probably obvious that if MSIE is about a quarter of the chart (and there's no way to know this without manually doing the math--the chart doesn't tell you if it's 25%, 28%, or what) that it's out of some total. This chart just says that it's "out of 100%", but not 100% of <i>what</i>. If you were comparing multiple datasets against each other, than the total might matter: for instance browser use by men vs. browser use by women. Even then, it's probably unimportant. A good rule of thumb is that any pie chart almost certainly would be better as a plain vertical bar graph. It's easy to visually compare the relative sizes of various rectangles, plus a bar chart would give you a place to put labels or ticks which would clarify this data a lot. Finally: if you only have one column of numbers to compare, the original plain data table is the most effective presentation of them! Let the numbers speak for themselves. I'd love to see this rewritten to show how to generate bar charts, perhaps with some datasets that really merited visualizations. This is impressive, but designers should be very careful with how they use pie charts, which are typically the worst format for presenting comparative data. Pie charts are sort of the friendly doofuses of the graph world, they seem very approachable and clear, but don’t really offer any solid insight.

It’s very hard to accurately compare the wedge shapes in pies, because humans aren’t that good at determining angle sizes or angular area. If you were just looking at the pie chart above, could you tell what the difference between Lynx and Opera is easily and accurately? (That’s not quite fair, since the pie chart’s not actually labelled.) Most importantly, can you easily tell that Opera represents 6x Lynx? If you can’t tell simply by looking at the graph (not the data table), it’s not a useful visualization. Wikipedia’s got a terrific example of this problem. The examples of pie charts in Google’s Chart API impart literally no information at all other than “some things make up some other thing.”

Also, this particular dataset doesn’t need to show how much a given browser represents out of 100%. It’s probably obvious that if MSIE is about a quarter of the chart (and there’s no way to know this without manually doing the math–the chart doesn’t tell you if it’s 25%, 28%, or what) that it’s out of some total. This chart just says that it’s “out of 100%”, but not 100% of what. If you were comparing multiple datasets against each other, than the total might matter: for instance browser use by men vs. browser use by women. Even then, it’s probably unimportant.

A good rule of thumb is that any pie chart almost certainly would be better as a plain vertical bar graph. It’s easy to visually compare the relative sizes of various rectangles, plus a bar chart would give you a place to put labels or ticks which would clarify this data a lot. Finally: if you only have one column of numbers to compare, the original plain data table is the most effective presentation of them! Let the numbers speak for themselves.

I’d love to see this rewritten to show how to generate bar charts, perhaps with some datasets that really merited visualizations.

]]>
By: Josh Tynjala http://yuiblog.com/blog/2008/01/17/tables-and-charts/#comment-284467 Josh Tynjala Thu, 17 Jan 2008 22:35:05 +0000 http://yuiblog.com/blog/2008/01/17/tables-and-charts/#comment-284467 James, the charts are printable, at least from a quick test I just did in Firefox. It appears that they do not show up in Print Preview, but I was able to successfully print Christian's <a href="http://yuiblog.com/assets/charttable/chartsexample.html" rel="nofollow">YUI Charts from Data Tables</a> example page. James, the charts are printable, at least from a quick test I just did in Firefox. It appears that they do not show up in Print Preview, but I was able to successfully print Christian’s YUI Charts from Data Tables example page.

]]>
By: Cody Frew http://yuiblog.com/blog/2008/01/17/tables-and-charts/#comment-284466 Cody Frew Thu, 17 Jan 2008 22:31:55 +0000 http://yuiblog.com/blog/2008/01/17/tables-and-charts/#comment-284466 great stuff. Is there anyway to modify how the charts display? For instance, could I have control of the colors used to render the pie-pieces? Thanks for the tutorial! great stuff. Is there anyway to modify how the charts display? For instance, could I have control of the colors used to render the pie-pieces?

Thanks for the tutorial!

]]>