Example: Dual Axes Chart

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.

CSS

#mychart {
    margin:10px 10px 10px 10px;
    width:90%;
    max-width: 800px;
    height:400px;
}

HTML

<div id="mychart"></div>

JavaScript

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"
                        });
});