1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly<style scoped>
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly margin:10px 10px 10px 10px;
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly max-width: 800px;
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly height:400px;
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly<div class="intro">
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly<p>This example shows how to create a `Chart` with multiple value axes.</p>
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly<div class="example">
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly{{>charts-dualaxes-source}}
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly<h3>Creating a `Chart` with multiple axes.</h3>
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly<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
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly`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>
b96d996309309541dc72ee198c96c06e1b16bbfeJenny DonnellyYUI().use('charts', function (Y)
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly var myDataValues = [
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly {month:"January", internetSales: 110000, percentOfRevenue: 25},
23ff6653cdedaef9f44c605d3bc665856a784e5cDerek Gathright {month:"February", internetSales: 333500, percentOfRevenue: 28},
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly {month:"March", internetSales: 90500, percentOfRevenue: 15},
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly {month:"April", internetSales: 255550, percentOfRevenue: 21},
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly {month:"May", internetSales: 445000, percentOfRevenue: 33},
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly {month:"June", internetSales: 580000, percentOfRevenue: 38}
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly //Define axes and assign keys
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly var myAxes = {
23ff6653cdedaef9f44c605d3bc665856a784e5cDerek Gathright percentage: {
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly type:"numeric",
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly position:"right",
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly keys:["percentOfRevenue"],
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly labelFormat: {suffix:"%"}
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly type:"numeric",
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly position:"left",
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly keys:["internetSales"],
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly labelFormat: {
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly thousandsSeparator:","
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly //Define a series collection so that we can assign nice display names
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly var mySeries = [
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly {type:"combo", yKey:"internetSales", yDisplayName:"Internet Sales", xDisplayName:"Month"},
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly {type:"combo", yKey:"percentOfRevenue", yDisplayName:"Percent of Total Revenue", xDisplayName:"Month"}
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly var mychart = new Y.Chart({
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly dataProvider:myDataValues,
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly categoryKey:"month",
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly seriesCollection:mySeries,
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly render:"#mychart"