Example: Chart with Multiple Series

Creating a chart Chart with multiple series.

Implementation

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.

CSS

#mychart {
    margin:10px 10px 10px 10px;
    width:90%;
    max-width: 800px;
    height:400px;
}

HTML

<div id="mychart"></div>

JavaScript

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"});
});

The only difference between the above code and the previous example is that the dataProvider array has more records.

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

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"});
});

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.

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