And if you wanted to make it truly dynamic:
private function createChartSeries(event:Event):void
{
var chartSeries:Array = new Array();
var i:int;
for (i = 0; i < chartData.length; i++)
{
var series:ColumnSeries = new ColumnSeries();
series.xField = "category";
series.yField = "val" + (i+1).toString();
series.displayName = "Series "+ (i+1).toString();
chartSeries.push( series );
}
columnChart.series = chartSeries;
}
-TH
--- In [email protected], Richard Rodseth <rrods...@...> wrote:
>
> 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 rrods...@... 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]:
> >
> >>
> >>
> >> What do you mean by "aligned with each other"?
> >>
> >>
> >> -----Original Message-----
> >> From: Richard Rodseth rrods...@... <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
rrods...@...<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
> >> jrwalk...@... <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"/>
> >>
> >>
> >>
> >>
> >>
> >>
> >>
> >>
> >>
> >>
> >
> >
>
