Re: [flexcoders] Dynamic Flex Stacked Column Chart

[Maciek Sakrejda]

What do you mean by "aligned with each other"?


-----Original Message-----
From: Richard Rodseth <rrods...@gmail.com>
Reply-to: flexcoders@yahoogroups.com
To: flexcoders@yahoogroups.com
Subject: Re: [flexcoders] Dynamic Flex Stacked Column Chart
Date: Thu, 23 Apr 2009 13:13:51 -0700



Trying one more time. Surely there's a call (validateNow() ?,
invalidateDisplayList() ? that would force a column chart to display
properly after its series array has been dynamically constructed? 

I haven't been able to find a JIRA bug though this may be related:

http://bugs.adobe.com/jira/browse/FLEXDMV-1957



On Wed, Apr 15, 2009 at 1:23 PM, Richard Rodseth <rrods...@gmail.com>
wrote:
        Did you have any luck with this?
        
        I have a binding function as follows
        
                <mx:ColumnChart id="columnChart" type="stacked" 
                    height="100%" 
                    width="100%" 
                    dataProvider="model.chartData"
                    series="{this.buildSeriesList(model.seriesSpec)}" 
        
        and the stacked columns are displayed, but not aligned with each
        other. Quite amusing, except when you have a deadline.
        This must be the known defect you referred to.
        Anyone know a workaround, or defect number?
        
        
        
        
        On Mon, Apr 6, 2009 at 9:20 AM, jeffreyr6915
        <jrwalk...@gmail.com> wrote:
                I'd like to create a dynamic Flex Stacked Column Chart
                at runtime, based on values out of a database. The
                following are the steps that I currently follow (without
                success):
                
                1. Query the database and populate chartIemArrayColl
                with ChartItem objects
                2. Iterate through chartIemArrayColl and only create a a
                new columnseries object if there does not already exist
                on for that 'selection'. Add this columnseries to the
                columnset
                3. Apply this to the chart
                
                Note: I used secondSeries instead of series because of a
                known defect in Flex that makes the charts off center if
                series is used.
                
                Problems:
                ------------
                1. The chartIemArrayColl contains items that contain the
                same 'name' but different 'value' and different
                'selection'. However, in this case that particular
                'name' is printed on the x-axis multiple times (not
                correct)
                2. The 'selection' should be the legend, but when it is
                graphed it does not seem as though it is connected to
                the items actually charted
                
                What I'd like to achieve:
                ----------------------------
                1. Column chart with a legend that contains only values
                of the 'selection'
                2. Stacked Column chart that contains values where I can
                chart the following example:
                
                item1 (name="myName", selection="sel1", value=4)
                item2 (name="myName", selection="sel2", value=6)
                item3 (name="name3", selection="sel1", value=8)
                
                I expect a chart that has myName and name3 across the
                x-axis (myName should only appear once). A column should
                appear at myName that has one color/selection (value 4)
                stacked on top of another (value 6). A column should be
                at name3 with the same color/selection as item1 (value
                8).
                
                Can you please help me with this? Thanks so much in
                advance 
                
                ChartItem.as
                -------------------
                
                package com.dashboard.teamtrack.util
                {
                public class ChartItem
                {
                public var name:String;
                public var selection:String;
                public var value:int;
                
                public function ChartItem()
                {
                }
                }
                }
                
                Main.mxml
                -----------------------
                for each(var currChartItem:ChartItem in
                chartIemArrayColl )
                {
                if(!selectionArr.contains(currChartItem.selection))
                {
                selectionArr.addItem(currChartItem.selection);
                var columnSeries:ColumnSeries = new ColumnSeries();
                
                columnSeries.setStyle("itemRenderer", new
                ClassFactory(com.dashboard.itemrenderers.TriDiRenderer));
                
                columnSeries.displayName = currChartItem.selection;
                columnSeries.yField = 'value';
                columnSeries.xField = 'name';
                columnSeries.dataProvider = chartIemArrayColl ;
                columnSet.series.push(columnSeries);
                
                }
                }
                
                columnSet.type = "stacked";
                chart.secondSeries.push(columnSet);
                chart.invalidateSeriesStyles();
                chart.secondSeries = chart.secondSeries;
                
                //<More code here>
                
                
                <mx:ColumnChart id="chart" height="100%" width="100%"
                fontSize="9" fontWeight="bold" color="#010000"
                showDataTips="true" clipContent="false" x="0" y="27">
                
                <mx:verticalAxis>
                <mx:LinearAxis title="Open Count Total" />
                </mx:verticalAxis>
                
                <mx:horizontalAxisRenderers>
                <itemrenderers:TriDiAxisRenderer
                axis="{myHorizontalAxis}" placement="bottom"/>
                </mx:horizontalAxisRenderers>
                <mx:horizontalAxis>
                <mx:CategoryAxis id="myHorizontalAxis"
                dataProvider="{chartIemArrayColl}"
                categoryField="name"/>
                </mx:horizontalAxis>
                </mx:ColumnChart>
                <mx:Legend id="openDefectChartLegend"
                dataProvider="{chart}" fontSize="9" fontWeight="bold"
                color="#010000" width="100%" height="64"/>