YUI 3.x Home -

YUI Library Examples: Charts: Pie Chart

Charts: Pie Chart

This example shows how to use Charts to create a Pie Chart.

Creating a Pie Chart.

The Chart class also allows you to create a Pie Chart. All you need to do is set the type attribute to "pie", define your categoryKey, seriesKey and seriesCollection.

  1. YUI().use('charts', function (Y)
  2. {
  3. // Create data
  4. var myDataValues = [
  5. {day:"Monday", taxes:2000},
  6. {day:"Tuesday", taxes:50},
  7. {day:"Wednesday", taxes:4000},
  8. {day:"Thursday", taxes:200},
  9. {day:"Friday", taxes:2000}
  10. ];
  11.  
  12. var pieGraph = new Y.Chart({
  13. render:"#mychart",
  14. categoryKey:"day",
  15. seriesKeys:["taxes"],
  16. dataProvider:myDataValues,
  17. type:"pie",
  18. seriesCollection:[
  19. {
  20. categoryKey:"day",
  21. valueKey:"taxes"
  22. }
  23. ]
  24. });
  25. });
YUI().use('charts', function (Y) 
{ 
    // Create data 
    var myDataValues = [
            {day:"Monday", taxes:2000}, 
            {day:"Tuesday", taxes:50}, 
            {day:"Wednesday", taxes:4000}, 
            {day:"Thursday", taxes:200}, 
            {day:"Friday", taxes:2000}
    ];				
 
    var pieGraph = new Y.Chart({
            render:"#mychart", 
            categoryKey:"day", 
            seriesKeys:["taxes"], 
            dataProvider:myDataValues, 
            type:"pie", 
            seriesCollection:[
                {
                    categoryKey:"day",
                    valueKey:"taxes"
                }
            ]
        });
});

Copyright © 2011 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings