Here's some sample code illustrating the problem, though in this version all columns in a category seem to be off:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="vertical"> <mx:Script> <![CDATA[ private function onTwoSeries(event:Event):void { columnChart.series = [ a, b ]; } private function onThreeSeries(event:Event):void { columnChart.series = [ a, b, c ]; } [Bindable] public var chartData:Array = [ { category:"cat1", val1:100, val2:100, val3:100 }, { category:"cat2", val1:100, val2:100, val3:100 }, { category:"cat3", val1:100, val2:100, val3:100 } ]; ]]> </mx:Script> <mx:Button label="2 Series" click="onTwoSeries(event)"/> <mx:Button label="3 Series" click="onThreeSeries(event)"/> <mx:ColumnSeries id="a" xField="category" yField="val1" displayName="Series a" /> <mx:ColumnSeries id="b" xField="category" yField="val2" displayName="Series b" /> <mx:ColumnSeries id="c" xField="category" yField="val3" displayName="Series c" /> <mx:ColumnChart id="columnChart" type="stacked" dataProvider="{this.chartData}" width="100%" height="100%"> <mx:horizontalAxis> <mx:CategoryAxis categoryField="category" dataProvider="{this.chartData}"/> </mx:horizontalAxis> <mx:series> <mx:ColumnSeries xField="category" yField="val1" displayName="Series a" /> </mx:series> </mx:ColumnChart> </mx:Application> On Thu, Apr 23, 2009 at 1:26 PM, Richard Rodseth <[email protected]> wrote: > It looks like a stack of blocks where each one is shifted over a bit from > the one below. > > > On Thu, Apr 23, 2009 at 1:16 PM, Maciek Sakrejda <[email protected]>wrote: > >> >> >> What do you mean by "aligned with each other"? >> >> >> -----Original Message----- >> From: Richard Rodseth <[email protected] <rrodseth%40gmail.com>> >> Reply-to: [email protected] <flexcoders%40yahoogroups.com> >> To: [email protected] <flexcoders%40yahoogroups.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 >> <[email protected]<rrodseth%40gmail.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 >> <[email protected] <jrwalker2%40gmail.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"/> >> >> >> >> >> >> >> >> >> >> > >
