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
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<style scoped>
2431f6aca1be7f7a136c5df34022e3f902490075Tripp margin:10px 10px 10px 10px;
2431f6aca1be7f7a136c5df34022e3f902490075Tripp max-width: 800px;
2431f6aca1be7f7a136c5df34022e3f902490075Tripp height:400px;
2431f6aca1be7f7a136c5df34022e3f902490075Tripp.fields label {
2431f6aca1be7f7a136c5df34022e3f902490075Tripp font-weight:bold;
2431f6aca1be7f7a136c5df34022e3f902490075Tripp display:block;
2431f6aca1be7f7a136c5df34022e3f902490075Tripp float:left;
2431f6aca1be7f7a136c5df34022e3f902490075Tripp border-top:1px solid #aaa;
2431f6aca1be7f7a136c5df34022e3f902490075Tripp padding:10px;
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<div class="intro">
d676c69348c891c2a261a6dbd4f450ddb2e312f3Tripp<p>This example shows how to access `Chart` instance's value axis after the `Chart` has rendered.</p>
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<div class="example">
2431f6aca1be7f7a136c5df34022e3f902490075Tripp{{>charts-axisupdate-source}}
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<h3>Access and Update a `Chart` Instance's Axis.</h3>
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<p>Often times, you will need to update a chart after it has been rendered. This example demonstrates how to access and update an axis. Specifically, we'll update the rotation and color of
2431f6aca1be7f7a136c5df34022e3f902490075Trippthe axis labels.</p>
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<p>A `Chart` instance's axes can be accessed through the `getAxisByKey` method. This method takes the axis' key identifier as an argument. If you have explicitly set your
2431f6aca1be7f7a136c5df34022e3f902490075Trippaxis through the `axes` attribute, you will know the key identifier. If not, the default key identifier for the value axis is "values" and the default key identifier for the category
2431f6aca1be7f7a136c5df34022e3f902490075Trippaxis is `category`. Once you have a reference for the axis, you can update all of its public attributes.</p>
2431f6aca1be7f7a136c5df34022e3f902490075TrippYUI().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"],
2431f6aca1be7f7a136c5df34022e3f902490075Tripp position:"bottom",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp type:"category",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp majorTicks:{
2431f6aca1be7f7a136c5df34022e3f902490075Tripp display: "none"
2431f6aca1be7f7a136c5df34022e3f902490075Tripp rotation:-45,
2431f6aca1be7f7a136c5df34022e3f902490075Tripp margin:{top:5}
2431f6aca1be7f7a136c5df34022e3f902490075Tripp //instantiate the chart
2431f6aca1be7f7a136c5df34022e3f902490075Tripp var myChart = new Y.Chart({
2431f6aca1be7f7a136c5df34022e3f902490075Tripp type:"column",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp categoryKey:"date",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp dataProvider:myDataValues,
2431f6aca1be7f7a136c5df34022e3f902490075Tripp axes:myAxes,
2431f6aca1be7f7a136c5df34022e3f902490075Tripp horizontalGridlines: true,
2431f6aca1be7f7a136c5df34022e3f902490075Tripp verticalGridlines: true,
2431f6aca1be7f7a136c5df34022e3f902490075Tripp render:"#mychart"
2431f6aca1be7f7a136c5df34022e3f902490075Tripp //Click handler
2431f6aca1be7f7a136c5df34022e3f902490075Tripp Y.on("click", function(e) {
d676c69348c891c2a261a6dbd4f450ddb2e312f3Tripp var axisName = Y.one("#axisSelector").get("value"),
d676c69348c891c2a261a6dbd4f450ddb2e312f3Tripp rotation = parseFloat(Y.one("#rotation").get("value")),
2431f6aca1be7f7a136c5df34022e3f902490075Tripp label = null,
2431f6aca1be7f7a136c5df34022e3f902490075Tripp if(axisName)
2431f6aca1be7f7a136c5df34022e3f902490075Tripp axis = myChart.getAxisByKey(axisName);
2431f6aca1be7f7a136c5df34022e3f902490075Tripp if(!isNaN(rotation))
2431f6aca1be7f7a136c5df34022e3f902490075Tripp label = {rotation:rotation};
2431f6aca1be7f7a136c5df34022e3f902490075Tripp label = {};
2431f6aca1be7f7a136c5df34022e3f902490075Tripp axis.set("styles", {label:label});
2431f6aca1be7f7a136c5df34022e3f902490075Tripp }, "#updateAxis");