+
+This example shows how to create a Chart with multiple value axes.
+
+
+
+
+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"
+ });
+});
+
+