2431f6aca1be7f7a136c5df34022e3f902490075Tripp<style scoped>

2431f6aca1be7f7a136c5df34022e3f902490075Tripp#mychart {

2431f6aca1be7f7a136c5df34022e3f902490075Tripp margin:10px 10px 10px 10px;

2431f6aca1be7f7a136c5df34022e3f902490075Tripp width:90%;

2431f6aca1be7f7a136c5df34022e3f902490075Tripp max-width: 800px;

2431f6aca1be7f7a136c5df34022e3f902490075Tripp height:400px;

2431f6aca1be7f7a136c5df34022e3f902490075Tripp}

2431f6aca1be7f7a136c5df34022e3f902490075Tripp</style>

2431f6aca1be7f7a136c5df34022e3f902490075Tripp<div class="intro">

d676c69348c891c2a261a6dbd4f450ddb2e312f3Tripp<p>This example shows how to create a `Chart` with multiple value axes.</p>

2431f6aca1be7f7a136c5df34022e3f902490075Tripp</div>

2431f6aca1be7f7a136c5df34022e3f902490075Tripp<div class="example">

2431f6aca1be7f7a136c5df34022e3f902490075Tripp{{>charts-dualaxes-source}}

2431f6aca1be7f7a136c5df34022e3f902490075Tripp</div>

2431f6aca1be7f7a136c5df34022e3f902490075Tripp<h3>Creating a `Chart` with multiple axes.</h3>

2431f6aca1be7f7a136c5df34022e3f902490075Tripp

2431f6aca1be7f7a136c5df34022e3f902490075Tripp

2431f6aca1be7f7a136c5df34022e3f902490075Tripp<p>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

2431f6aca1be7f7a136c5df34022e3f902490075Tripp`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.</p>

2431f6aca1be7f7a136c5df34022e3f902490075Tripp

2431f6aca1be7f7a136c5df34022e3f902490075Tripp```

2431f6aca1be7f7a136c5df34022e3f902490075TrippYUI().use('charts', function (Y)

2431f6aca1be7f7a136c5df34022e3f902490075Tripp{

2431f6aca1be7f7a136c5df34022e3f902490075Tripp var myDataValues = [

2431f6aca1be7f7a136c5df34022e3f902490075Tripp {month:"January", internetSales: 110000, percentOfRevenue: 25},

2431f6aca1be7f7a136c5df34022e3f902490075Tripp {month:"February", internetSales: 333500, percentOfRevenue: 28},

2431f6aca1be7f7a136c5df34022e3f902490075Tripp {month:"March", internetSales: 90500, percentOfRevenue: 15},

2431f6aca1be7f7a136c5df34022e3f902490075Tripp {month:"April", internetSales: 255550, percentOfRevenue: 21},

2431f6aca1be7f7a136c5df34022e3f902490075Tripp {month:"May", internetSales: 445000, percentOfRevenue: 33},

2431f6aca1be7f7a136c5df34022e3f902490075Tripp {month:"June", internetSales: 580000, percentOfRevenue: 38}

2431f6aca1be7f7a136c5df34022e3f902490075Tripp ];

2431f6aca1be7f7a136c5df34022e3f902490075Tripp

2431f6aca1be7f7a136c5df34022e3f902490075Tripp //Define axes and assign keys

2431f6aca1be7f7a136c5df34022e3f902490075Tripp var myAxes = {

2431f6aca1be7f7a136c5df34022e3f902490075Tripp percentage: {

2431f6aca1be7f7a136c5df34022e3f902490075Tripp type:"numeric",

2431f6aca1be7f7a136c5df34022e3f902490075Tripp position:"right",

2431f6aca1be7f7a136c5df34022e3f902490075Tripp keys:["percentOfRevenue"],

2431f6aca1be7f7a136c5df34022e3f902490075Tripp labelFormat: {suffix:"%"}

2431f6aca1be7f7a136c5df34022e3f902490075Tripp },

2431f6aca1be7f7a136c5df34022e3f902490075Tripp sales: {

2431f6aca1be7f7a136c5df34022e3f902490075Tripp type:"numeric",

2431f6aca1be7f7a136c5df34022e3f902490075Tripp position:"left",

2431f6aca1be7f7a136c5df34022e3f902490075Tripp keys:["internetSales"],

2431f6aca1be7f7a136c5df34022e3f902490075Tripp labelFormat: {

2431f6aca1be7f7a136c5df34022e3f902490075Tripp prefix:"$",

2431f6aca1be7f7a136c5df34022e3f902490075Tripp thousandsSeparator:","

2431f6aca1be7f7a136c5df34022e3f902490075Tripp }

2431f6aca1be7f7a136c5df34022e3f902490075Tripp }

2431f6aca1be7f7a136c5df34022e3f902490075Tripp };

2431f6aca1be7f7a136c5df34022e3f902490075Tripp

2431f6aca1be7f7a136c5df34022e3f902490075Tripp //Define a series collection so that we can assign nice display names

2431f6aca1be7f7a136c5df34022e3f902490075Tripp var mySeries = [

2431f6aca1be7f7a136c5df34022e3f902490075Tripp {type:"combo", yKey:"internetSales", yDisplayName:"Internet Sales", xDisplayName:"Month"},

2431f6aca1be7f7a136c5df34022e3f902490075Tripp {type:"combo", yKey:"percentOfRevenue", yDisplayName:"Percent of Total Revenue", xDisplayName:"Month"}

2431f6aca1be7f7a136c5df34022e3f902490075Tripp ];

2431f6aca1be7f7a136c5df34022e3f902490075Tripp

2431f6aca1be7f7a136c5df34022e3f902490075Tripp var mychart = new Y.Chart({

2431f6aca1be7f7a136c5df34022e3f902490075Tripp dataProvider:myDataValues,

2431f6aca1be7f7a136c5df34022e3f902490075Tripp categoryKey:"month",

2431f6aca1be7f7a136c5df34022e3f902490075Tripp axes:myAxes,

2431f6aca1be7f7a136c5df34022e3f902490075Tripp seriesCollection:mySeries,

2431f6aca1be7f7a136c5df34022e3f902490075Tripp render:"#mychart"

2431f6aca1be7f7a136c5df34022e3f902490075Tripp });

2431f6aca1be7f7a136c5df34022e3f902490075Tripp});

2431f6aca1be7f7a136c5df34022e3f902490075Tripp```