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
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<style scoped>
2431f6aca1be7f7a136c5df34022e3f902490075Tripp#custom-doc { width: 95%; min-width: 950px; }
2431f6aca1be7f7a136c5df34022e3f902490075Tripp#pagetitle {background-image: url(../../assets/bg_hd.gif);}
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 a `Chart` instance's `seriesCollection` after the `Chart` has rendered.</p>
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<div class="example">
2431f6aca1be7f7a136c5df34022e3f902490075Tripp{{>charts-seriesupdate-source}}
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<h3>Update Series of a `Chart` Instance After It has Rendered.</h3>
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<p>You can update a series after the `Chart` has rendered through the `getSeries` method. This method returns a reference to a series instance based on either the
2431f6aca1be7f7a136c5df34022e3f902490075Trippinstance's `seriesCollection` index or the key value associated with the value data of the series. This example uses the value key of each series to update the fill color,
2431f6aca1be7f7a136c5df34022e3f902490075Trippborder color and border weight of its markers.</p>
2431f6aca1be7f7a136c5df34022e3f902490075TrippYUI().use('charts', function (Y)
2431f6aca1be7f7a136c5df34022e3f902490075Tripp var myDataValues = [
2431f6aca1be7f7a136c5df34022e3f902490075Tripp {category:"Q1", expenses:137000, revenue:532200},
2431f6aca1be7f7a136c5df34022e3f902490075Tripp {category:"Q2", expenses:211000, revenue:689100},
2431f6aca1be7f7a136c5df34022e3f902490075Tripp {category:"Q3", expenses:151000, revenue:521500},
2431f6aca1be7f7a136c5df34022e3f902490075Tripp {category:"Q4", expenses:163000, revenue:892650}
2431f6aca1be7f7a136c5df34022e3f902490075Tripp var mychart = new Y.Chart({type:"bar", dataProvider:myDataValues, render:"#mychart"});
2431f6aca1be7f7a136c5df34022e3f902490075Tripp //Click handler
2431f6aca1be7f7a136c5df34022e3f902490075Tripp Y.on("click", function(e) {
d676c69348c891c2a261a6dbd4f450ddb2e312f3Tripp var seriesName = Y.one("#seriesSelector").get("value"),
d676c69348c891c2a261a6dbd4f450ddb2e312f3Tripp fillColor = Y.Escape.html(Y.one("#fillColor").get("value")),
d676c69348c891c2a261a6dbd4f450ddb2e312f3Tripp borderColor = Y.Escape.html(Y.one("#borderColor").get("value")),
d676c69348c891c2a261a6dbd4f450ddb2e312f3Tripp borderWeight = parseFloat(Y.one("#borderWeight").get("value")),
2431f6aca1be7f7a136c5df34022e3f902490075Tripp marker = {fill:{}, border:{}};
2431f6aca1be7f7a136c5df34022e3f902490075Tripp if(seriesName)
2431f6aca1be7f7a136c5df34022e3f902490075Tripp series = mychart.getSeries(seriesName);
2431f6aca1be7f7a136c5df34022e3f902490075Tripp if(fillColor)
2431f6aca1be7f7a136c5df34022e3f902490075Tripp if(borderColor)
2431f6aca1be7f7a136c5df34022e3f902490075Tripp marker.border.color = borderColor;
2431f6aca1be7f7a136c5df34022e3f902490075Tripp if(!isNaN(borderWeight))
2431f6aca1be7f7a136c5df34022e3f902490075Tripp marker.border.weight = borderWeight;
2431f6aca1be7f7a136c5df34022e3f902490075Tripp series.set("styles", {marker:marker});
2431f6aca1be7f7a136c5df34022e3f902490075Tripp }, "#updateSeries");