charts/docs/charts-dualaxes.mustache

	charts-dualaxes.mustache revision 2431f6aca1be7f7a136c5df34022e3f902490075
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync<style scoped>
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync#mychart {
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync    margin:10px 10px 10px 10px;
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync    width:90%;
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync    max-width: 800px;
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync    height:400px;
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync}
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync</style>
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync<div class="intro">
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsyncThis example shows how to create a `Chart` with multiple value axes.
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync</div>
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync<div class="example">
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync{{>charts-dualaxes-source}}
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync</div>
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync<h3>Creating a `Chart` with multiple axes.</h3>
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync<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
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync`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>
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync```
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsyncYUI().use('charts', function (Y)
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync{
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync    var myDataValues = [
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync        {month:"January", internetSales: 110000, percentOfRevenue: 25},
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync        {month:"February", internetSales: 333500, percentOfRevenue: 28},
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync        {month:"March", internetSales: 90500, percentOfRevenue: 15},
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync        {month:"April", internetSales: 255550, percentOfRevenue: 21},
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync        {month:"May", internetSales: 445000, percentOfRevenue: 33},
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync        {month:"June", internetSales: 580000, percentOfRevenue: 38}
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync    ];
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync    //Define axes and assign keys
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync    var myAxes = {
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync        percentage: {
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync            type:"numeric",
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync            position:"right",
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync            keys:["percentOfRevenue"],
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync            labelFormat: {suffix:"%"}
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync        },
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync        sales: {
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync            type:"numeric",
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync            position:"left",
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync            keys:["internetSales"],
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync            labelFormat: {
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync                prefix:"$",
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync                thousandsSeparator:","
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync            }
4fd606d1f5abe38e1f42c38de1d2e895166bd0f4vboxsync        }
    };

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