I am trying to customize a ColumnChart. There are several things I
want to add, none of which seem to be offered by the standard chart in
Flex. I am also wondering if I am using the chart correctly.
Background
I am creating an app that will display a chart with 5 columns. There
are some input fields for the user to enter numbers. As the user Tabs
out of each field, a calculation engine will put the numbers in the
fields into 5 formulas, and then the columns are immediately changed
to reflect the new input. So as the user is entering info, the bars
are constantly changing.
Questions
- My first issue has to do with using the chart. The way I have
gotten it working is by using 5 ColumnSeries objects. They look at an
array as their data provider, and that array has five objects in it
1 for the value of each column. So, in a way, the column chart does
not seem to be exactly what I need, since I have no need for an
x-axis, it is just one set of data with different y-values. To do
this, I had to make another array, with just one empty element in it,
and set it as the data provider for the horizontal axis. This seems
clumsy, and makes me wonder if I am doing this right.
- My second question, assuming I am using the chart correctly, is how
do I add an average line? I want this to be a horizontal black line
that goes all the way across the chart, behind the bars but in front
of the background, that is set at the y-height of the average value
(average of the 5 values illustrated by the bars). This is a fairly
common charting item, but I don't see how to do this. I have tried a
LineSeries, but since there is only 1 data point, no line will get
drawn. It needs at least two points.
- My third question is how do I attach a label at the top of each
column? I want the value of each series to be in a label, properly
formatted for currency, so that it sticks at the top of the column.
- My fourth question is how do I get labels to attach to the bottom of
each column, below the x-axis? I can't use the axis object, because
there is only 1 x-field. I need 5 labels at the bottom of the columns
reflecting the name of each series.
Thanks
Any help is greatly appreciated. It seems like there is a lot missing
from the charts, which means it is meant to be customized, but I do
not know how to do it and haven't had luck finding good examples.
Pete
Here is my code for the chart as I have it:
<mx:ColumnChart x="10" y="10" id="columnchart1" width="100%"
height="100%" columnWidthRatio="0.95" showDataTips="true" visible="true">
<mx:horizontalAxis>
<mx:CategoryAxis dataProvider="{a}" categoryField="name"/>
</mx:horizontalAxis>
<mx:verticalAxisRenderer>
<mx:AxisRenderer visible="false" showLabels="false" showLine="false"/>
</mx:verticalAxisRenderer>
<mx:backgroundElements>
<mx:GridLines visible="false"/>
</mx:backgroundElements>
<mx:series>
<mx:ColumnSeries dataProvider="{b}" yField="BookValue"
displayName="Book Value" />
<mx:ColumnSeries dataProvider="{b}" yField="StraightCapitalization"
displayName="Straight Capitalization" />
<mx:ColumnSeries dataProvider="{b}" yField="EarningsCapitalization"
displayName="Earnings Capitlaization" />
<mx:ColumnSeries dataProvider="{b}" yField="YearsPurchase"
displayName="Years' Purchase" />
<mx:ColumnSeries dataProvider="{b}" yField="FutureEarnings"
displayName="Discounted Future Earnings" />
<mx:LineSeries dataProvider="{c}" xField="Name" yField="Average"
displayName="ndx"/>
</mx:series>
</mx:ColumnChart>
<mx:Script><![CDATA[
[Bindable]
public var a:Array = [{name: ""}];
[Bindable]
public var b:Array = [{Name: "", BookValue: 0, StraightCapitalization:
0, EarningsCapitalization: 0, YearsPurchase: 0, FutureEarnings: 0}];
]]></mx:Script>
