← Back to branch summary

~bcsaller/juju-gui/charmFind

« back to all changes in this revision

Viewing changes to lib/yui/docs/charts/charts-seriesupdate.html

  • Committer: kapil.foss at gmail
  • Date: 2012-07-13 18:45:59 UTC
  • Revision ID: kapil.foss@gmail.com-20120713184559-2xl7be17egsrz0c9
reshape

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/yui/docs/charts/charts-seriesupdate.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: Update Chart Series</title>
6
 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Maven+Pro:400,700">
7
 
    <link rel="stylesheet" href="../../build/cssgrids/grids-min.css">
8
 
    <link rel="stylesheet" href="../assets/css/main.css">
9
 
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
10
 
    <script src="../../build/yui/yui-min.js"></script>
11
 
</head>
12
 
<body>
13
 
 
14
 
<div id="doc">
15
 
    <h1>Example: Update Chart Series</h1>
16
 
 
17
 
    
18
 
 
19
 
    <div class="yui3-g">
20
 
        <div class="yui3-u-3-4">
21
 
            <div id="main">
22
 
                <div class="content"><style scoped>
23
 
#custom-doc { width: 95%; min-width: 950px; }
24
 
#pagetitle {background-image: url(../../assets/bg_hd.gif);}
25
 
#mychart {
26
 
    margin:10px 10px 10px 10px;
27
 
    width:90%;
28
 
    max-width: 800px;
29
 
    height:400px;
30
 
}
31
 
.fields label {
32
 
    font-weight:bold;
33
 
    display:block;
34
 
    float:left;
35
 
    width:8em;
36
 
}
37
 
 
38
 
.fields {
39
 
    border-top:1px solid #aaa;
40
 
    padding:10px;
41
 
}
42
 
</style>
43
 
<div class="intro">
44
 
<p>This example shows how to access a <code>Chart</code> instance's <code>seriesCollection</code> after the <code>Chart</code> has rendered.</p>
45
 
</div>
46
 
<div class="example">
47
 
<div id="mychart"></div>
48
 
<div class="fields">
49
 
    <p>
50
 
        <label for="seriesSelector">series:</label>
51
 
        <select name="seriesSelector" id="seriesSelector">
52
 
            <option value="expenses">expenses</option>
53
 
            <option value="revenue">revenue</option>
54
 
        </select>
55
 
    </p>
56
 
    <p>
57
 
        <label for="fillColor">fill color:</label>
58
 
        <input type="text" name="fillColor" id="fillColor" />
59
 
    </p>
60
 
    <p>
61
 
        <label for="borderColor">border color:</label>
62
 
        <input type="text" name="borderColor" id="borderColor" />
63
 
    </p>
64
 
    <p>
65
 
        <label for="borderWeight">border weight:</label>
66
 
        <input type="text" name="borderColor" id="borderWeight" />
67
 
    </p>
68
 
    <p>
69
 
        <button type="button" class="action" id="updateSeries">Update Series</button>
70
 
    </p>
71
 
</div>
72
 
<script type="text/javascript">
73
 
(function() {
74
 
    YUI().use('escape', 'charts', function (Y) 
75
 
    { 
76
 
        var myDataValues = [ 
77
 
            {category:"Q1", expenses:137000, revenue:532200}, 
78
 
            {category:"Q2", expenses:211000, revenue:689100}, 
79
 
            {category:"Q3", expenses:151000, revenue:521500}, 
80
 
            {category:"Q4", expenses:163000, revenue:892650}
81
 
        ];
82
 
        
83
 
        var mychart = new Y.Chart({type:"bar", dataProvider:myDataValues, render:"#mychart"});
84
 
        
85
 
        //Click handler
86
 
        Y.on("click", function(e) {
87
 
            var seriesName = Y.one("#seriesSelector").get("value"),
88
 
                fillColor = Y.Escape.html(Y.one("#fillColor").get("value")),
89
 
                borderColor = Y.Escape.html(Y.one("#borderColor").get("value")),
90
 
                borderWeight = parseFloat(Y.one("#borderWeight").get("value")),
91
 
                series,
92
 
                marker = {fill:{}, border:{}};
93
 
            if(seriesName)
94
 
            {
95
 
                series = mychart.getSeries(seriesName);
96
 
                if(fillColor)
97
 
                {
98
 
                    marker.fill.color = fillColor;
99
 
                }
100
 
                if(borderColor)
101
 
                {
102
 
                    marker.border.color = borderColor;
103
 
                }
104
 
                if(!isNaN(borderWeight))
105
 
                {
106
 
                    marker.border.weight = borderWeight;
107
 
                }
108
 
                series.set("styles", {marker:marker});
109
 
            }
110
 
       }, "#updateSeries");
111
 
    });
112
 
})();
113
 
</script>
114
 
 
115
 
</div>
116
 
<h3>Update Series of a <code>Chart</code> Instance After It has Rendered.</h3>
117
 
 
118
 
 
119
 
<p>You can update a series after the <code>Chart</code> has rendered through the <code>getSeries</code> method. This method returns a reference to a series instance based on either the
120
 
instance's <code>seriesCollection</code> 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, 
121
 
border color and border weight of its markers.</p>
122
 
 
123
 
<pre class="code prettyprint">YUI().use(&#x27;charts&#x27;, function (Y) 
124
 
{ 
125
 
    var myDataValues = [ 
126
 
        {category:&quot;Q1&quot;, expenses:137000, revenue:532200}, 
127
 
        {category:&quot;Q2&quot;, expenses:211000, revenue:689100}, 
128
 
        {category:&quot;Q3&quot;, expenses:151000, revenue:521500}, 
129
 
        {category:&quot;Q4&quot;, expenses:163000, revenue:892650}
130
 
    ];
131
 
    
132
 
    var mychart = new Y.Chart({type:&quot;bar&quot;, dataProvider:myDataValues, render:&quot;#mychart&quot;});
133
 
    
134
 
    &#x2F;&#x2F;Click handler
135
 
    Y.on(&quot;click&quot;, function(e) {
136
 
        var seriesName = Y.one(&quot;#seriesSelector&quot;).get(&quot;value&quot;),
137
 
            fillColor = Y.Escape.html(Y.one(&quot;#fillColor&quot;).get(&quot;value&quot;)),
138
 
            borderColor = Y.Escape.html(Y.one(&quot;#borderColor&quot;).get(&quot;value&quot;)),
139
 
            borderWeight = parseFloat(Y.one(&quot;#borderWeight&quot;).get(&quot;value&quot;)),
140
 
            series,
141
 
            marker = {fill:{}, border:{}};
142
 
        if(seriesName)
143
 
        {
144
 
            series = mychart.getSeries(seriesName);
145
 
            if(fillColor)
146
 
            {
147
 
                marker.fill.color = fillColor;
148
 
            }
149
 
            if(borderColor)
150
 
            {
151
 
                marker.border.color = borderColor;
152
 
            }
153
 
            if(!isNaN(borderWeight))
154
 
            {
155
 
                marker.border.weight = borderWeight;
156
 
            }
157
 
            series.set(&quot;styles&quot;, {marker:marker});
158
 
        }
159
 
   }, &quot;#updateSeries&quot;);
160
 
});</pre>
161
 
 
162
 
</div>
163
 
            </div>
164
 
        </div>
165
 
 
166
 
        <div class="yui3-u-1-4">
167
 
            <div class="sidebar">
168
 
                
169
 
 
170
 
                
171
 
                    <div class="sidebox">
172
 
                        <div class="hd">
173
 
                            <h2 class="no-toc">Examples</h2>
174
 
                        </div>
175
 
 
176
 
                        <div class="bd">
177
 
                            <ul class="examples">
178
 
                                
179
 
                                    
180
 
                                        <li data-description="Shows how to use Charts to create a basic chart.">
181
 
                                            <a href="charts-simple.html">Basic Charts Implementation</a>
182
 
                                        </li>
183
 
                                    
184
 
                                
185
 
                                    
186
 
                                        <li data-description="Shows how to create a chart with multiple series.">
187
 
                                            <a href="charts-multiseries.html">Chart with Multiple Series</a>
188
 
                                        </li>
189
 
                                    
190
 
                                
191
 
                                    
192
 
                                        <li data-description="Shows how to create a column chart with multiple series.">
193
 
                                            <a href="charts-column.html">Specify Chart Type</a>
194
 
                                        </li>
195
 
                                    
196
 
                                
197
 
                                    
198
 
                                        <li data-description="Shows how to create a column chart with a stacked numeric axis.">
199
 
                                            <a href="charts-stackedcolumn.html">Create Stacked Chart</a>
200
 
                                        </li>
201
 
                                    
202
 
                                
203
 
                                    
204
 
                                        <li data-description="Shows how to create a chart with a time axis.">
205
 
                                            <a href="charts-timeaxis.html">Create a Chart with a Time Axis</a>
206
 
                                        </li>
207
 
                                    
208
 
                                
209
 
                                    
210
 
                                        <li data-description="Shows how to add gridlines to a chart.">
211
 
                                            <a href="charts-gridlines.html">Add Gridlines to a Chart</a>
212
 
                                        </li>
213
 
                                    
214
 
                                
215
 
                                    
216
 
                                        <li data-description="Shows how to create a chart with planar based events.">
217
 
                                            <a href="charts-stackedarea.html">Create a Stacked Area Chart with Planar Based Events</a>
218
 
                                        </li>
219
 
                                    
220
 
                                
221
 
                                    
222
 
                                        <li data-description="Shows how to use a chart&#x27;s styles attribute to customize a chart.">
223
 
                                            <a href="charts-globalstyles.html">Customize a Chart</a>
224
 
                                        </li>
225
 
                                    
226
 
                                
227
 
                                    
228
 
                                        <li data-description="Shows how to customize the default tooltip of a chart.">
229
 
                                            <a href="charts-customizedtooltip.html">Customize a Chart&#x27;s Tooltip</a>
230
 
                                        </li>
231
 
                                    
232
 
                                
233
 
                                    
234
 
                                        <li data-description="Shows how to explicitly define the axes and series for a chart.">
235
 
                                            <a href="charts-objectstyles.html">Define a Chart&#x27;s Axes and Series</a>
236
 
                                        </li>
237
 
                                    
238
 
                                
239
 
                                    
240
 
                                        <li data-description="Shows how to use charts to create a pie chart.">
241
 
                                            <a href="charts-pie.html">Pie Chart</a>
242
 
                                        </li>
243
 
                                    
244
 
                                
245
 
                                    
246
 
                                        <li data-description="Shows how to create a chart with multiple value axes.">
247
 
                                            <a href="charts-dualaxes.html">Dual Axes Chart</a>
248
 
                                        </li>
249
 
                                    
250
 
                                
251
 
                                    
252
 
                                        <li data-description="Shows how to access a chart instance&#x27;s value axis after the chart has rendered.">
253
 
                                            <a href="charts-axisupdate.html">Update Chart Axis</a>
254
 
                                        </li>
255
 
                                    
256
 
                                
257
 
                                    
258
 
                                        <li data-description="Shows how to access a chart instance&#x27;s seriesCollection after the chart has rendered.">
259
 
                                            <a href="charts-seriesupdate.html">Update Chart Series</a>
260
 
                                        </li>
261
 
                                    
262
 
                                
263
 
                                    
264
 
                                        <li data-description="Shows how to add a legend to a chart.">
265
 
                                            <a href="charts-legend.html">Create Chart with a Legend</a>
266
 
                                        </li>
267
 
                                    
268
 
                                
269
 
                                    
270
 
                                        <li data-description="Shows how to render multiple data points in a singe marker.">
271
 
                                            <a href="charts-groupmarkers.html">Group Marker Chart</a>
272
 
                                        </li>
273
 
                                    
274
 
                                
275
 
                            </ul>
276
 
                        </div>
277
 
                    </div>
278
 
                
279
 
 
280
 
                
281
 
            </div>
282
 
        </div>
283
 
    </div>
284
 
</div>
285
 
 
286
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
287
 
<script>prettyPrint();</script>
288
 
 
289
 
</body>
290
 
</html>