496N/A<style scoped>

0N/A#mychart {

0N/A margin:10px 10px 10px 10px;

0N/A width:90%;

1466N/A max-width: 800px;

0N/A height:400px;

0N/A}

919N/A</style>

919N/A<div class="intro">

919N/A<p>This example shows how to create a `Chart` with multiple series.</p>

919N/A</div>

919N/A<div class="example">

0N/A{{>charts-multiseries-source}}

919N/A</div>

919N/A<h3>Creating a chart `Chart` with multiple series.</h3>

919N/A

0N/A<h4>Implementation</h4>

919N/A

919N/A<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>

919N/A

919N/A```

919N/AYUI().use('charts', function (Y)

919N/A{

919N/A var myDataValues = [

0N/A {category:"5/1/2010", miscellaneous:2000, expenses:3700, revenue:2200},

0N/A {category:"5/2/2010", miscellaneous:50, expenses:9100, revenue:100},

0N/A {category:"5/3/2010", miscellaneous:400, expenses:1100, revenue:1500},

0N/A {category:"5/4/2010", miscellaneous:200, expenses:1900, revenue:2800},

0N/A {category:"5/5/2010", miscellaneous:5000, expenses:5000, revenue:2650}

1027N/A ];

1027N/A

1027N/A var mychart = new Y.Chart({dataProvider:myDataValues, render:"#mychart"});

1027N/A});

1027N/A```

1027N/A

1027N/A<p>The only difference between the above code and the previous example is that the `dataProvider` array has more records.</p>

0N/A<p>The chart application will plot all records that match it's `categoryKey` attribute along the category axis.

911N/AAll other records will be plotted as series against the value axis. By default a chart's `categoryKey` is "category". This can be changed, if

1466N/Anecessary, to match the format of your `dataProvider` array. For example, if the key value for your dates was "date", you would need to change

496N/Athe chart's `categoryKey` to "date".</p>

1466N/A

0N/A```

911N/AYUI().use('charts', function (Y)

496N/A{

0N/A var myDataValues = [

0N/A {date:"5/1/2010", miscellaneous:2000, expenses:3700, revenue:2200},

0N/A {date:"5/2/2010", miscellaneous:50, expenses:9100, revenue:100},

0N/A {date:"5/3/2010", miscellaneous:400, expenses:1100, revenue:1500},

0N/A {date:"5/4/2010", miscellaneous:200, expenses:1900, revenue:2800},

0N/A {date:"5/5/2010", miscellaneous:5000, expenses:5000, revenue:2650}

0N/A ];

0N/A

0N/A var mychart = new Y.Chart({dataProvider:myDataValues, render:"#mychart", categoryKey:"date"});

0N/A});

0N/A```

1466N/A

1027N/A<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,

0N/Ayou can do so by setting the `seriesKeys` attribute. The below line of code would only display the expenses and revenue.</p>

0N/A

0N/A```

1466N/Avar mychart = new Y.Chart({

0N/A dataProvider:myDataValues,

0N/A render:"#mychart",

496N/A categoryKey:"date",

0N/A seriesKeys:["expenses", "revenue"]

0N/A });

1466N/A```

0N/A