<style>
#mychart {
    margin:10px 10px 10px 10px;
    width:90%;
    max-width: 800px;
    height:400px;
}
</style>
<div class="intro">
<p>This example shows how to create a `Chart` with multiple series.</p>
</div>
<div class="example">
{{>charts-multiseries-source}}
</div>
<h3>Creating a chart `Chart` with multiple series.</h3>

<h4>Implementation</h4>

<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>

<h4>CSS</h4>
```
#mychart {
    margin:10px 10px 10px 10px;
    width:90%;
    max-width: 800px;
    height:400px;
}
```

<h4>HTML</h4>
```
<div id="mychart"></div>
```

<h4>JavaScript</h4>
```
YUI().use('charts', function (Y) 
{ 
    var myDataValues = [ 
        {category:"5/1/2010", miscellaneous:2000, expenses:3700, revenue:2200}, 
        {category:"5/2/2010", miscellaneous:50, expenses:9100, revenue:100}, 
        {category:"5/3/2010", miscellaneous:400, expenses:1100, revenue:1500}, 
        {category:"5/4/2010", miscellaneous:200, expenses:1900, revenue:2800}, 
        {category:"5/5/2010", miscellaneous:5000, expenses:5000, revenue:2650}
    ];
    
    var mychart = new Y.Chart({dataProvider:myDataValues, render:"#mychart"});
});
```

<p>The only difference between the above code and the previous example is that the `dataProvider` array has more records.</p>
<p>The chart application will plot all records that match it's `categoryKey` attribute along the category axis.
All other records will be plotted as series against the value axis. By default a chart's `categoryKey` is "category". This can be changed, if 
necessary, to match the format of your `dataProvider` array. For example, if the key value for your dates was "date", you would need to change
the chart's `categoryKey` to "date".</p>

```
YUI().use('charts', function (Y) 
{ 
    var myDataValues = [ 
        {date:"5/1/2010", miscellaneous:2000, expenses:3700, revenue:2200}, 
        {date:"5/2/2010", miscellaneous:50, expenses:9100, revenue:100}, 
        {date:"5/3/2010", miscellaneous:400, expenses:1100, revenue:1500}, 
        {date:"5/4/2010", miscellaneous:200, expenses:1900, revenue:2800}, 
        {date:"5/5/2010", miscellaneous:5000, expenses:5000, revenue:2650}
    ];
    
    var mychart = new Y.Chart({dataProvider:myDataValues, render:"#mychart", categoryKey:"date"});
});
```

<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,
you can do so by setting the `seriesKeys` attribute. The below line of code would only display the expenses and revenue.</p>

```
var mychart = new Y.Chart({
                    dataProvider:myDataValues, 
                    render:"#mychart", 
                    categoryKey:"date", 
                    seriesKeys:["expenses", "revenue"]
                });
```
