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"/>
