YUI 3.x Home -

YUI Library Examples: Charts: Dual Axes Chart

Charts: Dual Axes Chart

This example shows how to create a Chart with multiple value axes.

View example in new window.

Creating a Chart with multiple axes.

Multiple axes charts are useful for comparing trends in two or more data sets whose numeric range differs greatly. In this example, we'll create two NumericAxis through the axes attribute. By defining a separate axis for each key in our data provider, we can plot percentages and dollar sales on the same graph.

  1. YUI().use('charts', function (Y) 
  2. { 
  3.     var myDataValues = [ 
  4.         {month:"January", internetSales: 110000, percentOfRevenue: 25},
  5.         {month:"February", internetSales: 333500, percentOfRevenue: 28},
  6.         {month:"March", internetSales: 90500, percentOfRevenue: 15},
  7.         {month:"April", internetSales: 255550, percentOfRevenue: 21},
  8.         {month:"May", internetSales: 445000, percentOfRevenue: 33},
  9.         {month:"June", internetSales: 580000, percentOfRevenue: 38}
  10.     ];
  11.  
  12.     //Define axes and assign keys
  13.     var myAxes = {
  14.         percentage: {
  15.             type:"numeric",
  16.             position:"right",
  17.             keys:["percentOfRevenue"],
  18.             labelFormat: {suffix:"%"}
  19.         },
  20.         sales: {
  21.             type:"numeric",
  22.             position:"left",
  23.             keys:["internetSales"],
  24.             labelFormat: {
  25.                 prefix:"$",
  26.                 thousandsSeparator:","
  27.             }
  28.         }
  29.     };
  30.  
  31.     //Define a series collection so that we can assign nice display names
  32.     var mySeries = [
  33.         {type:"combo", yKey:"internetSales", yDisplayName:"Internet Sales", xDisplayName:"Month"},
  34.         {type:"combo", yKey:"percentOfRevenue", yDisplayName:"Percent of Total Revenue", xDisplayName:"Month"}
  35.     ];
  36.  
  37.     var mychart = new Y.Chart({
  38.                             dataProvider:myDataValues, 
  39.                             categoryKey:"month", 
  40.                             axes:myAxes, 
  41.                             seriesCollection:mySeries, 
  42.                             render:"#mychart"
  43.                         });
  44. });
YUI().use('charts', function (Y) 
{ 
    var myDataValues = [ 
        {month:"January", internetSales: 110000, percentOfRevenue: 25},
        {month:"February", internetSales: 333500, percentOfRevenue: 28},
        {month:"March", internetSales: 90500, percentOfRevenue: 15},
        {month:"April", internetSales: 255550, percentOfRevenue: 21},
        {month:"May", internetSales: 445000, percentOfRevenue: 33},
        {month:"June", internetSales: 580000, percentOfRevenue: 38}
    ];
 
    //Define axes and assign keys
    var myAxes = {
        percentage: {
            type:"numeric",
            position:"right",
            keys:["percentOfRevenue"],
            labelFormat: {suffix:"%"}
        },
        sales: {
            type:"numeric",
            position:"left",
            keys:["internetSales"],
            labelFormat: {
                prefix:"$",
                thousandsSeparator:","
            }
        }
    };
 
    //Define a series collection so that we can assign nice display names
    var mySeries = [
        {type:"combo", yKey:"internetSales", yDisplayName:"Internet Sales", xDisplayName:"Month"},
        {type:"combo", yKey:"percentOfRevenue", yDisplayName:"Percent of Total Revenue", xDisplayName:"Month"}
    ];
 
    var mychart = new Y.Chart({
                            dataProvider:myDataValues, 
                            categoryKey:"month", 
                            axes:myAxes, 
                            seriesCollection:mySeries, 
                            render:"#mychart"
                        });
});

More Charts Resources:

Copyright © 2011 Yahoo! Inc. All rights reserved.

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