1) Creating a Regular BAR CHART in FLEX 2.0
In previous articles we saw how to create a pie chart and a column chart. In this article I will show you how to handle flex bar charts(regular) and how you can generate one of yours very easily.First of all create a new flex application and you should be provided with a sample mxml file where you we will write our code to generate a bar chart. Once you are ready with this open your mxml file and add following code to that file.
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var Results:ArrayCollection = new ArrayCollection( [
{ Person: "David", Maths: 35, Science:39, MS: 29 },
{ Person: "John", Maths: 32, Science:17, MS: 14 },
{ Person: "Matt", Maths: 27, Science:27, MS: 38 } ]);
]]>
</mx:Script>
The code explanation is self explanatory as previous articles. If you haven’t read those articles please read them so you can have better understanding. Next step is same as adding a chart and setting its data provider properties in order to generate the final chart.
Add this code to your application file.
<mx:Panel title=”Regular Bar Chart”
height=”100%” width=”100%” layout=”horizontal”>
<mx:ColumnChart id=”column” height=”400″ width=”400″
paddingLeft=”5″ paddingRight=”5″
showDataTips=”true” dataProvider=”{Results}”>
<mx:horizontalAxis>
<mx:CategoryAxis categoryField=”Person”/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries xField=”Person” yField=”Maths” displayName=”Maths”/>
<mx:ColumnSeries xField=”Person” yField=”Science” displayName=”Science”/>
<mx:ColumnSeries xField=”Person” yField=”MS” displayName=”MS”/>
</mx:series>
</mx:ColumnChart>
</mx:Panel>
And the final version of your chart should look something like below. I have added two versions of this final result one with the data tool tip.
Result with data tool tip.
Thanks
SpyCode
