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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<style scoped>
2431f6aca1be7f7a136c5df34022e3f902490075Tripp margin:10px 10px 10px 10px;
2431f6aca1be7f7a136c5df34022e3f902490075Tripp max-width: 800px;
2431f6aca1be7f7a136c5df34022e3f902490075Tripp height:400px;
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<div class="intro">
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<p>This example shows how to explicitly define the axes and series for a `Chart`.</p>
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<div class="example">
2431f6aca1be7f7a136c5df34022e3f902490075Tripp{{>charts-objectstyles-source}}
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<h3>Defining the axes and series for a `Chart` instance</h3>
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<p>As we have seen from previous examples, the `Chart` class allows you to create and customize multiple chart types with very little code. Sometimes you'll want more control
2431f6aca1be7f7a136c5df34022e3f902490075Trippover the `Chart`. Suppose you want to place your value axis on the right or you need different series types in the same chart. Charts allows you to explicitly define your series and axes objects. You can either declare
2431f6aca1be7f7a136c5df34022e3f902490075Trippan axis or series directly or define them with an object literal and allow the `Chart` instance to build them for you. In this example, we are going to define our axes and series with
2431f6aca1be7f7a136c5df34022e3f902490075Trippobject literals. This will allow us to place our value axis on the right and build a chart with columns and lines.</p>
d676c69348c891c2a261a6dbd4f450ddb2e312f3TrippYUI().use('charts', function (Y)
2431f6aca1be7f7a136c5df34022e3f902490075Tripp //dataProvider source
2431f6aca1be7f7a136c5df34022e3f902490075Tripp var myDataValues = [
2431f6aca1be7f7a136c5df34022e3f902490075Tripp {date:"1/1/2010", miscellaneous:2000, expenses:3700, revenue:2200},
2431f6aca1be7f7a136c5df34022e3f902490075Tripp {date:"2/1/2010", miscellaneous:5000, expenses:9100, revenue:100},
2431f6aca1be7f7a136c5df34022e3f902490075Tripp {date:"3/1/2010", miscellaneous:4000, expenses:1900, revenue:1500},
2431f6aca1be7f7a136c5df34022e3f902490075Tripp {date:"4/1/2010", miscellaneous:3000, expenses:3900, revenue:2800},
2431f6aca1be7f7a136c5df34022e3f902490075Tripp {date:"5/1/2010", miscellaneous:500, expenses:7000, revenue:2650},
2431f6aca1be7f7a136c5df34022e3f902490075Tripp {date:"6/1/2010", miscellaneous:3000, expenses:4700, revenue:1200}
2431f6aca1be7f7a136c5df34022e3f902490075Tripp //Define our axes for the chart.
2431f6aca1be7f7a136c5df34022e3f902490075Tripp var myAxes = {
2431f6aca1be7f7a136c5df34022e3f902490075Tripp financials:{
2431f6aca1be7f7a136c5df34022e3f902490075Tripp keys:["miscellaneous", "revenue", "expenses"],
2431f6aca1be7f7a136c5df34022e3f902490075Tripp position:"right",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp type:"numeric",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp majorTicks:{
2431f6aca1be7f7a136c5df34022e3f902490075Tripp display: "none"
2431f6aca1be7f7a136c5df34022e3f902490075Tripp dateRange:{
2431f6aca1be7f7a136c5df34022e3f902490075Tripp keys:["date"],
d676c69348c891c2a261a6dbd4f450ddb2e312f3Tripp position:"bottom",
d676c69348c891c2a261a6dbd4f450ddb2e312f3Tripp type:"category",
d676c69348c891c2a261a6dbd4f450ddb2e312f3Tripp majorTicks:{
2431f6aca1be7f7a136c5df34022e3f902490075Tripp display: "none"
2431f6aca1be7f7a136c5df34022e3f902490075Tripp rotation:-45,
2431f6aca1be7f7a136c5df34022e3f902490075Tripp margin:{top:5}
2431f6aca1be7f7a136c5df34022e3f902490075Tripp //define the series
2431f6aca1be7f7a136c5df34022e3f902490075Tripp var seriesCollection = [
2431f6aca1be7f7a136c5df34022e3f902490075Tripp type:"column",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp xAxis:"dateRange",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp yAxis:"financials",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp xKey:"date",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp yKey:"miscellaneous",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp xDisplayName:"Date",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp yDisplayName:"Miscellaneous",
var myChart = new Y.Chart({