Problem with stacked chart when defining series

Board index » YUI 3.x: » Using YUI 3.x Components

Page 1 of 1

[ 2 posts ]

New Topic | Post Reply | Print view

Previous topic | Next topic

Eric Durbin

YUI Contributor

Username: edurbin
Joined: Wed Jul 13, 2011 5:41 am
Posts: 50
GitHub: edurbin
Gists: edurbin

Tags:

Problem with stacked chart when defining series

Posted: Wed Jul 13, 2011 5:59 am

+0-

I'm having some trouble defining stacked column series. First I'd like to note that the example source code listed here http://developer.yahoo.com/yui/3/examples/charts/charts-objectstyles.html has several inconsistencies.

There are 3 series defined. The combo series is missing the "style" attribute and the first column series is missing "marker" beneath the style attribute.

Now, for my problem. I'm trying to define a custom series for a stacked column chart and the chart is not stacking. I've also tried to edit the seriesCollection so the type is "stackedColumn" and then the series don't display on the graph at all. Here is the modified example code I am trying to accomplish this with.

Code:

<script type="text/javascript">
(function() {
    YUI().use('charts', function (Y) 
    { 
        //dataProvider source
        var myDataValues = [ 
            {date:"1/1/2010", miscellaneous:1000, expenses:0, revenue:2200}, 
            {date:"2/1/2010", miscellaneous:0, expenses:0, revenue:100}, 
            {date:"3/1/2010", miscellaneous:0, expenses:0, revenue:1500}, 
            {date:"4/1/2010", miscellaneous:0, expenses:0, revenue:2800}, 
            {date:"5/1/2010", miscellaneous:0, expenses:0, revenue:2650},
            {date:"6/1/2010", miscellaneous:0, expenses:0, revenue:1200} 
        ];
        
        //Define our axes for the chart.
        var myAxes = {
            financials:{
                keys:["miscellaneous", "revenue", "expenses"],
                position:"right",
                type:"numeric",
                styles:{
                    majorTicks:{
                        display: "none"
                    }
                }
            },
            dateRange:{
                keys:["date"],
                position:"bottom",
                type:"category",
                styles:{
                    majorTicks:{
                        display: "none"
                    },
                    label: {
                        rotation:-45,
                        margin:{top:5}
                    }
                }
            }
        };
       
        //define the series 
        var seriesCollection = [
        {
                type:"column",
                xAxis:"dateRange",
                yAxis:"financials",
                xKey:"date",
                yKey:"miscellaneous",
                xDisplayName:"Date",
                yDisplayName:"Miscellaneous",
                styles: {
                    border: {
                        weight: 1,
                        color: "#58006e"
                    },
                    over: {
                        fill: {
                            alpha: 0.7
                        }
                    },
                    width: 40
                }
            },
            {
                type:"column",
                xAxis:"dateRange",
                yAxis:"financials",
                xKey:"date",
                yKey:"expenses",
                yDisplayName:"Expenses",
                styles: {
                    marker:{
                        fill: {
                            color: "#e0ddd0" 
                        },
                        border: {
                            weight:"1",
                            color: "#cbc8ba"
                        },
                        over: {
                            fill: {
                                alpha: 0.7
                            }
                        },
                        width: 40      
                    }
                }
            },
            {
                type:"column",
                xAxis:"dateRange",
                yAxis:"financials",
                xKey:"date",
                yKey:"revenue",
                xDisplayName:"Date",
                yDisplayName:"Deductions",
                    line: {
                        color: "#ff7200"
                    },
                styles: {    
                    marker: {
                        fill: {
                            color: "#ff9f3b"
                        },
                        border: {
                            color: "#ff7200",
                            weight: 1
                        },
                        over: {
                            fill: {
                                alpha: 0.7
                            }
                        },
                        width:40
                    }
                }
            }
        ];

        //instantiate the chart
        var myChart = new Y.Chart({
                            dataProvider:myDataValues, 
                            axes:myAxes, 
                            seriesCollection:seriesCollection, 
                            horizontalGridlines: true,
                            verticalGridlines: true,
                            stacked: true,
                            render:"#mychart"
                        });
    });
})();

Tripp Bridges

YUI Developer

Username: tripp
Joined: Wed Jan 07, 2009 1:54 pm
Posts: 435
GitHub: tripp
Gists: tripp

Tags:

Re: Problem with stacked chart when defining series

Posted: Thu Jul 14, 2011 6:12 am

+0-

There are a couple of things that you'll need to change in your code. First, when creating a stacked chart, you'll need to use a StackedAxis.

Code:

var myAxes = {
    financials:{
        keys:["miscellaneous", "revenue", "expenses"],
        position:"right",
        type:"stacked",
      ...

Also, you'll need to specify a StackedColumnSeries for each of your series
items:

Code:

var seriesCollection = [
{
        type: "stackedcolumn",
      ...

Alternatively, you can skip defining a series type at all for your series and make the default type of your chart a column. Since the Chart is defined as
being stacked, it will convert the default series to stacked series.

Code:

var myChart = new Y.Chart({
                    dataProvider:myDataValues,
                    axes:myAxes,
                    seriesCollection:seriesCollection,
                    horizontalGridlines: true,
                    verticalGridlines: true,
                    type: "column",
                    stacked: true,
                    render:"#mychart"
                });

There were some bugs in the 3.3.0 that impacted the rendering of stacked column and bar charts. They were addressed in our last sprint.
Charts will render properly using this seed file:
http://yui.yahooapis.com/3.4.0pr2/build/yui/yui-min.js

Additionally, I found a bug in which markers sometimes display inaccurate data on mouseover when the items in a series have a value of zero. This will be addressed in the current sprint.

Thanks,
Tripp

Page 1 of 1

[ 2 posts ]

New Topic | Post Reply | Print view

Previous topic | Next topic

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum