YUI pie chart example

January 16th, 2008. Tagged: images, JavaScript, yui

If case you haven't noticed - YUI Charts hit the streets.

As with everything new, it's best shown and understood by example. So here's the simplest example of using a pie chart. Basically I took the example from the YUI page, changed all the paths to point to yahooapis.com (where YUI is hosted for free) and stripped everything that could be stripped (there's even no html or head tags, but turned out the body tag is required). The result is a short html with all dependencies satisfied.

OK, so here's the example, grab, paste, customize:

Tell your friends about this post: Facebook, Twitter, Google+

10 Responses

  1. Hi,
    Your example was a 2 minute tutorial to have develop your YUI chart. Thanks for that. I have been trying a thing with this chart since long, can I change the color of the different bars that come in YAHOO.widget.ColumnChart just like in PieChart it comes on in its own, and can I govern these various colors? ( Can i decide the various colors in PieChart)… do you have any idea on that?

    Thanks a lot in anticipation.


  2. Hi Hemant,

    I haven’t played with the colors, but seems possible.
    Example: http://developer.yahoo.com/yui/examples/charts/charts-skins.html
    APIs: http://developer.yahoo.com/yui/docs/YAHOO.widget.Chart.html#method_setSeriesStyles

  3. Hey stoyan,
    Thanks for the prompt reply. Actually I am looking to have different colors in the same series, the charts-skin example illustrates how to change colors for bar chart when there is a comparison along the yAxis. But I was looking to achieve something different colors for “sales of beef”(example in the charts-skins.html page) for different months.


  4. just curious. i’m trying to setup a pie chart myself atm, buit somehow….

    nothing works. i had to fix some scrip0t includes (eg, i added the 2.6.0 above the 2.4.1), i don’t get any errors in my error console, but this silly pie won’t show :

  5. hi,
    I am looking for exploded 3d pi chart using yui. Is it feasible? or any source available?



  6. Thane: How are you passing the information into the chart? If it’s JSON make sure that you’ve got the syntax. There’s a JSON validator online that you can use.

    Shyam: Currently as far as I’m aware there is no support for 3D charts but if you know anything about flash/flex you could attempt to modify the chart.swf that they provide you with in order to render pie charts in 3D (by altering the grpahics etc)

    Hermant: I’m not sure why you would want different colours for the same data item in different months (surely this would make it harder to extract meaningful data?).

    One possible way around it would be to use stacked columns. If you have 2 stacked columns, one blue, one green you can alter the colour of the bar by making one of the bars 0. E.g if you make column1 = 0 then all bar content will be green and if column2 = 0 then column will be blue.

    Hope this helps a bit……

  7. H,

    Can we change the color scheme of the pie charts displayed using YUI pie-chart utility ?

    Thanks in advance.

  8. Question.

    I see the chart but none of the labels on your site. I copied the view source code and pasted it into an html page on my computer. It doesn’t show up at all. I tried chrome and ie 7. Any ideas?

    Also I heard the libraires for these are downloadable. A big reason I’m checking this out is because the google chart apis have to hit google which is not secure if your trying to brighten up info with a chart on your intranet.

    thanks in advance.

  9. 看了大家的回复,我也有类似的问题,就是更改PieChart的不同饼图区域的颜色,并加上3d 效果,发现swfObject有实现的例子,由于我是使用prototype.js + yui Piechart 无法使用PieChart. series: [{style:{colors:[0x00ff00, 0xFF8C40, 0xFFDB59, 0x8DC63F, 0xFFFFFF]}}],

    see: http://yuilibrary.com/forum/viewtopic.php?f=89&t=1618&hilit=PieChart

    如那位有解决方法,谢谢告诉我, glt_beyond@126.com

  10. Hi Bryon,

    I think you have a problem with ‘generatedata.php’. Make sure you have that file present in your local system.

Leave a Reply