Flex Line Chart Using CFC Flash Remoting
Filed under CFC , ColdFusion , Flex
This post will show you how to place dynamic data from a CFC and put it into a Flex Chart.
If you are unsure of how to create a CFC or if you do not know how to get data from a database into Flex using ColdFusion Flash Remoting, please check out this blog.
For this exercise I will be using the same Test.mdb database with the dsn of “dsnTest”.
This database has a table named: tblChart with 2 columns named: chtData1 and chtData2. In those columns, I just threw some arbitrary data points into it.
I have a CFC named Test.cfc which has the following code in it:
<cfcomponent>
<cffunction name="GetData" access="public" returntype="query">
<cfset var qryReturn = "">
<cfquery name="qryReturn" datasource="dsnTest">
SELECT *
FROM tblChart
</cfquery>
<cfreturn qryReturn>
</cffunction>
</cfcomponent>
Now let’s move over to Flex and create a button and a line chart:
<mx:Button label="Button" click="mycfc.GetData()"/>
<mx:LineChart id="myLineChart">
<mx:series>
<mx:LineSeries displayName="Series 1" yField="chtData1"/>
<mx:LineSeries displayName="Series 1" yField="chtData2"/>
</mx:series>
</mx:LineChart>
<mx:Legend dataProvider="{myLineChart}"/>
Give the LineChart an ID of “myLineChart”.
Within the LineSeries yField=”enter the column name from your database”
Lets create the functions we will need. Place this code directly below the application tag:
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.rpc.Fault;
import mx.rpc.events.ResultEvent;
private function result(evt:ResultEvent):void {
myLineChart.dataProvider = evt.result;
}
private function fault(evt:FaultEvent):void {
Alert.show(evt.fault.message);
}
]]>
</mx:Script>
Notice within my function of result, I added the line: myLineChart.dataProvider = evt.result;
In this line, I am calling my chart with the ID we gave it, “myLineChart” and setting its dataProvider to equal the results of the cfc query.
Next create the RemoteObject, for the source I have my CFC in my main folder, “FlexTest” and the CFC is named, “Test.cfc”. Then call the functions that we made, result and fault.
<mx:RemoteObject id="mycfc" destination="ColdFusion" showBusyCursor="true" source="FlexTest.Test" result="result(event)" fault="fault(event)"/>
Note that the ID of the RemoteObject is the name of cffunction we created in the CFC.
Now run the application and see your data mapped out for you in the line chart.
Jul19