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
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<style scoped>
2431f6aca1be7f7a136c5df34022e3f902490075Tripp margin:10px 10px 10px 10px;
2431f6aca1be7f7a136c5df34022e3f902490075Tripp max-width: 800px;
2431f6aca1be7f7a136c5df34022e3f902490075Tripp height:400px;
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<div class="intro">
d676c69348c891c2a261a6dbd4f450ddb2e312f3Tripp<p>This example shows how to create a `Chart` with multiple series.</p>
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<div class="example">
2431f6aca1be7f7a136c5df34022e3f902490075Tripp{{>charts-multiseries-source}}
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<h3>Creating a chart `Chart` with multiple series.</h3>
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<h4>Implementation</h4>
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<p>Often times, you will want to plot multiple sets of data, or series, across the same category or range axis in a chart. This can be accomplished by changing your `dataProvider` source appropriately.</p>
2431f6aca1be7f7a136c5df34022e3f902490075TrippYUI().use('charts', function (Y)
2431f6aca1be7f7a136c5df34022e3f902490075Tripp var myDataValues = [
2431f6aca1be7f7a136c5df34022e3f902490075Tripp {category:"5/1/2010", miscellaneous:2000, expenses:3700, revenue:2200},
2431f6aca1be7f7a136c5df34022e3f902490075Tripp {category:"5/2/2010", miscellaneous:50, expenses:9100, revenue:100},
2431f6aca1be7f7a136c5df34022e3f902490075Tripp {category:"5/3/2010", miscellaneous:400, expenses:1100, revenue:1500},
2431f6aca1be7f7a136c5df34022e3f902490075Tripp {category:"5/4/2010", miscellaneous:200, expenses:1900, revenue:2800},
2431f6aca1be7f7a136c5df34022e3f902490075Tripp {category:"5/5/2010", miscellaneous:5000, expenses:5000, revenue:2650}
2431f6aca1be7f7a136c5df34022e3f902490075Tripp var mychart = new Y.Chart({dataProvider:myDataValues, render:"#mychart"});
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<p>The only difference between the above code and the previous example is that the `dataProvider` array has more records.</p>
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<p>The chart application will plot all records that match it's `categoryKey` attribute along the category axis.
2431f6aca1be7f7a136c5df34022e3f902490075TrippAll other records will be plotted as series against the value axis. By default a chart's `categoryKey` is "category". This can be changed, if
2431f6aca1be7f7a136c5df34022e3f902490075Trippnecessary, to match the format of your `dataProvider` array. For example, if the key value for your dates was "date", you would need to change
2431f6aca1be7f7a136c5df34022e3f902490075Trippthe chart's `categoryKey` to "date".</p>
2431f6aca1be7f7a136c5df34022e3f902490075TrippYUI().use('charts', function (Y)
2431f6aca1be7f7a136c5df34022e3f902490075Tripp var myDataValues = [
2431f6aca1be7f7a136c5df34022e3f902490075Tripp {date:"5/1/2010", miscellaneous:2000, expenses:3700, revenue:2200},
2431f6aca1be7f7a136c5df34022e3f902490075Tripp {date:"5/2/2010", miscellaneous:50, expenses:9100, revenue:100},
2431f6aca1be7f7a136c5df34022e3f902490075Tripp {date:"5/3/2010", miscellaneous:400, expenses:1100, revenue:1500},
2431f6aca1be7f7a136c5df34022e3f902490075Tripp {date:"5/4/2010", miscellaneous:200, expenses:1900, revenue:2800},
2431f6aca1be7f7a136c5df34022e3f902490075Tripp {date:"5/5/2010", miscellaneous:5000, expenses:5000, revenue:2650}
2431f6aca1be7f7a136c5df34022e3f902490075Tripp var mychart = new Y.Chart({dataProvider:myDataValues, render:"#mychart", categoryKey:"date"});
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<p>By default, all remaining key values in your object literals will plot as series data on the chart. If you want to restrict the data that plots on a chart,
2431f6aca1be7f7a136c5df34022e3f902490075Trippyou can do so by setting the `seriesKeys` attribute. The below line of code would only display the expenses and revenue.</p>
2431f6aca1be7f7a136c5df34022e3f902490075Trippvar mychart = new Y.Chart({
2431f6aca1be7f7a136c5df34022e3f902490075Tripp dataProvider:myDataValues,
2431f6aca1be7f7a136c5df34022e3f902490075Tripp render:"#mychart",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp categoryKey:"date",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp seriesKeys:["expenses", "revenue"]