YUI 3.x Home -

YUI Library Examples: Charts: Define a Chart's Axes and Series

Charts: Define a Chart's Axes and Series

This example shows how to explicitly define the axes and series for a Chart.

View example in new window.

Defining the axes and series for a Chart instance

As we have seen from previous examples, the Chart class allows you to create and customize multiple chart types with very little code. Sometimes you'll want more control over the Chart. Suppose you want to place your value axis on the right or your need different series types in the same chart. Charts allows you to explicitly define your series and axes objects. You can either declare an axis or series directly or define them with an object literal and allow the Chart instance to build them for you. In this example, we are going to define our axes and series with object literals. This will allow us to place our value axis on the right and build a chart with columns and lines.

  1. YUI().use('charts', function (Y) 
  2. { 
  3.     //dataProvider source
  4.     var myDataValues = [ 
  5.         {date:"1/1/2010", miscellaneous:2000, expenses:3700, revenue:2200}, 
  6.         {date:"2/1/2010", miscellaneous:5000, expenses:9100, revenue:100}, 
  7.         {date:"3/1/2010", miscellaneous:4000, expenses:1900, revenue:1500}, 
  8.         {date:"4/1/2010", miscellaneous:3000, expenses:3900, revenue:2800}, 
  9.         {date:"5/1/2010", miscellaneous:500, expenses:7000, revenue:2650},
  10.         {date:"6/1/2010", miscellaneous:3000, expenses:4700, revenue:1200} 
  11.     ];
  12.  
  13.     //Define our axes for the chart.
  14.     var myAxes = {
  15.         financials:{
  16.             keys:["miscellaneous", "revenue", "expenses"],
  17.             position:"right",
  18.             type:"numeric",
  19.             styles:{
  20.                 majorTicks:{
  21.                     display: "none"
  22.                 }
  23.             }
  24.         },
  25.         dateRange:{
  26.             keys:["date"],
  27.             position:"bottom",
  28.             type:"category",
  29.             styles:{
  30.                 majorTicks:{
  31.                     display: "none"
  32.                 },
  33.                 label: {
  34.                     rotation:-45,
  35.                     margin:{top:5}
  36.                 }
  37.             }
  38.         }
  39.     };
  40.  
  41.     //define the series 
  42.     var seriesCollection = [
  43.      {
  44.             type:"column",
  45.             xAxis:"dateRange",
  46.             yAxis:"financials",
  47.             xKey:"date",
  48.             yKey:"miscellaneous",
  49.             xDisplayName:"Date",
  50.             yDisplayName:"Miscellaneous",
  51.             styles: {
  52.                 border: {
  53.                     weight: 1,
  54.                     color: "#58006e"
  55.                 },
  56.                 over: {
  57.                     fill: {
  58.                         alpha: 0.7
  59.                     }
  60.                 }
  61.             }
  62.         },
  63.         {
  64.             type:"column",
  65.             xAxis:"dateRange",
  66.             yAxis:"financials",
  67.             xKey:"date",
  68.             yKey:"expenses",
  69.             yDisplayName:"Expenses",
  70.             styles: {
  71.                 marker:{
  72.                     fill: {
  73.                         color: "#e0ddd0" 
  74.                     },
  75.                     border: {
  76.                         weight:"1",
  77.                         color: "#cbc8ba"
  78.                     },
  79.                     over: {
  80.                         fill: {
  81.                             alpha: 0.7
  82.                         }
  83.                     }
  84.                 }
  85.             }
  86.         },
  87.         {
  88.             type:"combo",
  89.             xAxis:"dateRange",
  90.             yAxis:"financials",
  91.             xKey:"date",
  92.             yKey:"revenue",
  93.             xDisplayName:"Date",
  94.             yDisplayName:"Deductions",
  95.                 line: {
  96.                     color: "#ff7200"
  97.                 },
  98.             marker: {
  99.                 fill: {
  100.                     color: "#ff9f3b"
  101.                 },
  102.                 border: {
  103.                     color: "#ff7200",
  104.                     weight: 1
  105.                 },
  106.                 over: {
  107.                     width: 12,
  108.                     height: 12
  109.                 },
  110.                 width:9,
  111.                 height:9
  112.             }
  113.         }
  114.     ];
  115.  
  116.     //instantiate the chart
  117.     var myChart = new Y.Chart({
  118.                         dataProvider:myDataValues, 
  119.                         axes:myAxes, 
  120.                         seriesCollection:seriesCollection, 
  121.                         horizontalGridlines: true,
  122.                         verticalGridlines: true,
  123.                         render:"#mychart"
  124.                     });
  125. });
YUI().use('charts', function (Y) 
{ 
    //dataProvider source
    var myDataValues = [ 
        {date:"1/1/2010", miscellaneous:2000, expenses:3700, revenue:2200}, 
        {date:"2/1/2010", miscellaneous:5000, expenses:9100, revenue:100}, 
        {date:"3/1/2010", miscellaneous:4000, expenses:1900, revenue:1500}, 
        {date:"4/1/2010", miscellaneous:3000, expenses:3900, revenue:2800}, 
        {date:"5/1/2010", miscellaneous:500, expenses:7000, revenue:2650},
        {date:"6/1/2010", miscellaneous:3000, expenses:4700, revenue:1200} 
    ];
 
    //Define our axes for the chart.
    var myAxes = {
        financials:{
            keys:["miscellaneous", "revenue", "expenses"],
            position:"right",
            type:"numeric",
            styles:{
                majorTicks:{
                    display: "none"
                }
            }
        },
        dateRange:{
            keys:["date"],
            position:"bottom",
            type:"category",
            styles:{
                majorTicks:{
                    display: "none"
                },
                label: {
                    rotation:-45,
                    margin:{top:5}
                }
            }
        }
    };
 
    //define the series 
    var seriesCollection = [
     {
            type:"column",
            xAxis:"dateRange",
            yAxis:"financials",
            xKey:"date",
            yKey:"miscellaneous",
            xDisplayName:"Date",
            yDisplayName:"Miscellaneous",
            styles: {
                border: {
                    weight: 1,
                    color: "#58006e"
                },
                over: {
                    fill: {
                        alpha: 0.7
                    }
                }
            }
        },
        {
            type:"column",
            xAxis:"dateRange",
            yAxis:"financials",
            xKey:"date",
            yKey:"expenses",
            yDisplayName:"Expenses",
            styles: {
                marker:{
                    fill: {
                        color: "#e0ddd0" 
                    },
                    border: {
                        weight:"1",
                        color: "#cbc8ba"
                    },
                    over: {
                        fill: {
                            alpha: 0.7
                        }
                    }
                }
            }
        },
        {
            type:"combo",
            xAxis:"dateRange",
            yAxis:"financials",
            xKey:"date",
            yKey:"revenue",
            xDisplayName:"Date",
            yDisplayName:"Deductions",
                line: {
                    color: "#ff7200"
                },
            marker: {
                fill: {
                    color: "#ff9f3b"
                },
                border: {
                    color: "#ff7200",
                    weight: 1
                },
                over: {
                    width: 12,
                    height: 12
                },
                width:9,
                height:9
            }
        }
    ];
 
    //instantiate the chart
    var myChart = new Y.Chart({
                        dataProvider:myDataValues, 
                        axes:myAxes, 
                        seriesCollection:seriesCollection, 
                        horizontalGridlines: true,
                        verticalGridlines: true,
                        render:"#mychart"
                    });
});

More Charts Resources:

Copyright © 2011 Yahoo! Inc. All rights reserved.

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