Hi Guys,

Let’s talk something about JavaScript and ASP .NET WebService today. I will explain you a step by step procedure to call a .net web service using javascript and reflect back the returned data to you page without causing post back.

Let’s Begin.

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

www.reusablecode.us
www.forumr.org

1)Hi all,

Creating a BAR/Column CHART in FLEX 2.0

In previous article we saw how to create a pie chart in flex. (HERE) In this article I will show you how to handle flex bar charts 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]

public var Quarterly:ArrayCollection = new ArrayCollection([

{Month:"Jan", Profit:Math.floor(Math.random()*98)+1, Expenses:Math.floor(Math.random()*98)+1},

{Month:"Feb", Profit:Math.floor(Math.random()*98)+1, Expenses:Math.floor(Math.random()*98)+1},

{Month:"Mar", Profit:Math.floor(Math.random()*98)+1, Expenses:Math.floor(Math.random()*98)+1},

{Month:"Apr", Profit:Math.floor(Math.random()*98)+1, Expenses:Math.floor(Math.random()*98)+1},

{Month:"May", Profit:Math.floor(Math.random()*98)+1, Expenses:Math.floor(Math.random()*98)+1},

{Month:"Jun", Profit:Math.floor(Math.random()*98)+1, Expenses:Math.floor(Math.random()*98)+1}

]);

]]></mx:Script>

This is the action script code to create an array collection named quarterly which contains expenses as well as profits of 6 months. Here I have used action script’s inbuilt function to create random numbers less than 100. In this case every time you refresh your application it will come up with some random numbers and you can get your chart changed instead of keeping it static.

Next step is to create a panel and add a bar chart to that panel. Once we do that what we are remaining with is to create axis and provide them with the data providers which will gives us the desired chart. For this please type the following code to your mxml file.

<mx:Panel title=”Bar Chart”>

<mx:BarChart id=”BarChart1″ dataProvider=”{Quarterly}”>

<mx:verticalAxis>

<mx:CategoryAxis

dataProvider=”{Quarterly}”

categoryField=”Month”

/>

</mx:verticalAxis>

<mx:series>

<mx:BarSeries

yField=”Month”

xField=”Profit”

displayName=”Profit”

/>

<mx:BarSeries

yField=”Month”

xField=”Expenses”

displayName=”Expenses”

/>

</mx:series>

</mx:BarChart>

<mx:Legend dataProvider=”{BarChart1}”/>

</mx:Panel>

If you check this code carefully I have created two vertical axis to provide the two different entities from my array collection to be displayed on the chart as well as given then data provider as the names of array collection members. At last I have created the legend to display what chart shows what data. After doing this much go ahead save and run your application. You should see some chart like below.

If you want you can also show the data tool tip on rollover of the chart. In order to achieve this just add this property to your chart definition.

showDataTips=”true”

Save and run your application again you should see the data tooltip on rollover of your chart as below.

Enjoy and happy Flex charting.

www.reusablecode.us
www.forumr.org

HANDLING FLEX CHARTS

1) Creating a pie chart in flex:

In this article I will show you how to handle flex pie charts 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 pie chart. Once you are ready with this opent your mxml file and add following code to that file.

<mx:Script><![CDATA[

import mx.collections.ArrayCollection;

[Bindable]

public var Users:ArrayCollection = new ArrayCollection([

{User: "Billy", Amount: 2000},

{User: "John", Amount: 1000},

{User: "Mischel", Amount: 100},

{User: "Tony", Amount: 450},

{User: "Bob", Amount: 100},

{User: "Gary", Amount: 200}

]);

]]></mx:Script>

If you are not familiar with the flex than I must mention here that the code you see above is the action script block which can be included in you mxml file using this following tags.

<mx:Script><![CDATA[ .. ]]></mx:Script>

Now if you take a look at the code below you will see that I have created an array collection in Action script 3 of user with their relevant amount of bonus they will be provided. This is the basic code that you have to write. This will be the data source of your flex pie chart that you are going to generate in a while.Now in your application add a new panel which is going to hold the pie chart object. Then add the pie chart component form the toolbar menu.

Your code should look like this.

<mx:Panel>

<mx:PieChart id=”pie>

</mx:PieChart>

</mx:Panel>

Now once you have added this much you are ready to provide to data source to this chart component and it will be ready for you. Modify your code so that it looks like one shown below.

<mx:Panel>

<mx:PieChart id=”pie” dataProvider=”{ Users }” showDataTips=”true”>

<mx:series>

<mx:PieSeries field=” Amount ” nameField=”Expense”

labelPosition=”callout”/>

</mx:series>

</mx:PieChart>

</mx:Panel>

If you see carefully you must notice the dataProvider property where I have defined the name of the arraycollection that we have created in the action script block. This is to inform the chart component that the data has to be take from this source.

Next important thing is the series tag that we have defined. This is to define that which column of the array collection has to be provided as the series to the flex chart. Another property is the lablePosition=”callout” . This guides chart component weather to show data tips out side the chart or inside the pie chart.

Another and last thing to notice is this. showDataTips=”true”. This property will allow the data tip to be displayed on the rollover event of your chart. Once you are done with all these go ahead and run your application it should looks something like below.

That’s it. Now you can see how easy it is to create a flex pie chart in your flex application. Go ahead and play with the component properties and you can discover so many new things in it.

www.reusablecode.us
www.forumr.org

Welcome to Spycode’s web blog. Keep updated with new technologies like flex and silverlight with this blog.