Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

gallery-patch-341-charts-2531283 (gallery-patch-341-charts-2531283) on cdn

Last Updated: 10/12/11

+ 0 -

Tripp Bridges

YUI Developer

See 5 more by this user.

Created: 10/12/11
Last CDN Push: 10/12/11
Build Tag: gallery-2011.10.12-20-24
Project: YUI 3
License: YUI BSD
YUI Version: 3.4.1
Free for use.

Each of the color properties in a series' style object accepts either a color string or an array of color strings. When an array of color strings is passed in, each color will be mapped to the marker corresponding to the index of the color array. This functionality was not being parsed correctly in any of the stacked charts when an array was passed in. This patch fixes the issue.

Tags:
tripp

Download
Docs
Homepage
Bugs
Source
Example
Forum
History

Code Sample

<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2011.10.12-20-24'
}).use('gallery-patch-341-charts-2531283', function(Y) {
    var myDataValues = [ 
            {category:"5/1/2010", values:2000, expenses:3700, revenue:2200}, 
            {category:"5/2/2010", values:50, expenses:9100, revenue:100}, 
            {category:"5/3/2010", values:400, expenses:1100, revenue:1500}, 
            {category:"5/4/2010", values:200, expenses:1900, revenue:2800}, 
            {category:"5/5/2010", values:5000, expenses:5000, revenue:2650}
        ];
 
    var mychart = new Y.Chart({
                            type:"column", 
                            dataProvider:myDataValues, 
                            stacked:true, 
                            render:"#mychart",
                            seriesCollection: [
                                {
                                    xAxis: "category",
                                    yAxis: "values",
                                    xKey: "category",
                                    yKey: "expenses",
                                    styles: {
                                        marker: {
                                            fill: {
                                                color: ["#ff0000", "#ffcc00", "#0000ff", "#fd3", "#0cd"]
                                            }
                                        }
                                    }
                                },
                                {
                                    xAxis: "category",
                                    yAxis: "values",
                                    xKey: "category",
                                    yKey: "values",
                                    styles: {
                                        marker: {
                                            fill: {
                                                color: ["#9aa", "#ccddee", "#3300ff", "#f0e", "#1e3"]
                                            }
                                        }
                                    }
                                },
                                {
                                    xAxis: "category",
                                    yAxis: "values",
                                    xKey: "category",
                                    yKey: "revenue",
                                    styles: {
                                        marker: {
                                            fill: {
                                                color: ["#999", "#000", "#33f", "#eee", "#9aa"]
                                            }
                                        }
                                    }
                                }
                            ]
                        });
});

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2011.10.12-20-24'
}).use('gallery-patch-341-charts-2531283', function(Y) {
    var myDataValues = [ 
            {category:"5/1/2010", values:2000, expenses:3700, revenue:2200}, 
            {category:"5/2/2010", values:50, expenses:9100, revenue:100}, 
            {category:"5/3/2010", values:400, expenses:1100, revenue:1500}, 
            {category:"5/4/2010", values:200, expenses:1900, revenue:2800}, 
            {category:"5/5/2010", values:5000, expenses:5000, revenue:2650}
        ];
    
    var mychart = new Y.Chart({
                            type:"column", 
                            dataProvider:myDataValues, 
                            stacked:true, 
                            render:"#mychart",
                            seriesCollection: [
                                {
                                    xAxis: "category",
                                    yAxis: "values",
                                    xKey: "category",
                                    yKey: "expenses",
                                    styles: {
                                        marker: {
                                            fill: {
                                                color: ["#ff0000", "#ffcc00", "#0000ff", "#fd3", "#0cd"]
                                            }
                                        }
                                    }
                                },
                                {
                                    xAxis: "category",
                                    yAxis: "values",
                                    xKey: "category",
                                    yKey: "values",
                                    styles: {
                                        marker: {
                                            fill: {
                                                color: ["#9aa", "#ccddee", "#3300ff", "#f0e", "#1e3"]
                                            }
                                        }
                                    }
                                },
                                {
                                    xAxis: "category",
                                    yAxis: "values",
                                    xKey: "category",
                                    yKey: "revenue",
                                    styles: {
                                        marker: {
                                            fill: {
                                                color: ["#999", "#000", "#33f", "#eee", "#9aa"]
                                            }
                                        }
                                    }
                                }
                            ]
                        });
});