6 Replies Latest reply on Aug 23, 2007 2:36 PM by davidmedifit

    Charts using Remote Object

    James Bower Level 1

      ======================== Original Post =========================

      I've searched all over for a single example of someone using a remote object with Flex charts. Every example and tutorial that I've found thus far uses a static arrayCollection. I'm using CF and MS SQL so if anyone has a basic working example that I could learn from I would be grateful.

      I was surprised that out of the 4 books that I have (Training from the Source, Programming Flex 2, Professional Flex 2, and Flex 2 with AS3) as well as the Lynda.com tutorials and Total Training videos nor anything I could find on the net so far noone seems to have addressed this issue.

      My company wants me to build a dashboard system with all the charts and whistles so if anybody can point me to a tutorial or some juicy source code that would be awesome.

      Thanks,

      James

        • 1. Re: Charts using Remote Object? Support Issue?
          flexPro Level 1
          The resources you listed have all the info you need, but you may also want to check out the flex 2 developer's guide:

          http://livedocs.adobe.com/flex/2/docs/wwhelp/wwhimpl/js/html/wwhelp.htm?href=Part2_DevApps .html

          In short, charting is completely unrelated to how you retrieve the data from the server / web service / etc. To implement the examples that use ArrayCollections for data, you'd simply use a RemoteObject (or HTTPService, etc) to retrieve the data as an ArrayCollection, then bind to this ArrayCollection as a dataProvider for your chart.
          • 2. Re: Charts using Remote Object? Support Issue?
            davidmedifit Level 1
            Hi James - I've been out of the Flex world for a little bit, so I haven't been keeping up on posts recently. Yeah, reporting isn't
            where alot of people have been spending their time - I've also had trouble getting community support on charting. I think that just reflects the general focus of people that contribute to this forum, rather than lack of Adobe support (this is, after all, a dev issue not a technical one!). Luckily for you, however, I've tortured myself on the issue, and hopefully I can help :-)

            So, maybe you can tell me, in more detail, what your issue is. I'll post some code, below, to get you started.

            1) Call the RO:
            <mx:RemoteObject id="reportManager" destination="ColdFusion" source="reports" showBusyCursor="true">
            <mx:method name="getTop3Activities"
            fault="Alert.show(event.fault.message)" result="handleTop3ActivitiesResult(event)"/>
            </mx:RemoteObject>

            1b) Here is the result method and associated ActionScript:
            [Bindable] public var top3ActivitiesArray:Array;
            [Bindable] public var slicedtop3ActivitiesAC:ArrayCollection = new ArrayCollection();
            public function handleTop3ActivitiesResult(event:ResultEvent):void{
            top3ActivitiesArray=event.result.list.source as Array;
            slicedtop3ActivitiesAC.source = top3ActivitiesArray;
            }
            private function displayTop3ActivityChartTip(data:Object, field:String, index:Number, percentValue:Number):String {
            var nfmt:NumberFormatter = new NumberFormatter();
            nfmt.precision = 0;
            return data.ActivityName + ": " + '\n' + nfmt.format(data.time) + " Minutes";
            }

            2) Here is the chart that uses that data - the first line is :
            <mx:SeriesInterpolate id="interpolate" duration="1000" />
            <mx:PieChart id="Top3ActivitiesChart" dataProvider="{slicedtop3ActivitiesAC.source}"
            width="50%" height="50%" showDataTips="true">
            <mx:series>
            <mx:PieSeries field="time" nameField="ActivityName" labelPosition="callout"
            labelFunction="displayTop3ActivityChartTip" showDataEffect="{interpolate}"/>
            </mx:series>
            </mx:PieChart>

            3) A little about the data:
            It's a simple CF query returned from a CFC, in the following format:
            ACTIVITYNAME TIME
            Any Exercise 372541
            Walking 337877
            Cardio Exercise 238169

            I'm cutting out some of the code here, from a larger dashboard, and I think it will get you started, but I don't know what your specific issues are, so I'm just throwing up a hail mary here. Let me know if there are erros - I may have forgot to copy some code you need. Let me know if that helps.

            Cheers,

            David
            • 3. Charts using Remote Object
              James Bower Level 1
              Hi David,
              Thanks for taking the time for your post. Your code sheds some light on an area that's been difficult for me to get a handle on. As per your instruction I added a cffunction returning a simple query and created a new database table to hold some simple (Activities) data to be retrieved. At first, when I ran the code nothing came up. But when I added a button to call the remote method I was able to invoke the cfc. Thanks for your help!
              • 4. Re: Charts using Remote Object
                davidmedifit Level 1
                First of all, my apologies - my post was done half assed! I forgot to give you alot of code. First was the call to the RO in the "creationcomplete" method of the application, so, I have re-posted the code, below (and this time I ran it first to get the bugs out!)

                OK, so, if NOTHING is still happening, then I'd be puzzled. Something that could go wrong would be "unable to connect" to the CF remote server, but you should get an error when this happens, and it should be a pretty obvious error. If you've never done CF remoting, look up the example on the Flex dev center, it doesn't work with complex data, but it's a good start.

                If you debug the app, you should put a break point in the "handleTop3ActivitiesResult" function, and see that the "slicedtop3ActivitiesAC" variable is getting populated.

                Try the code below, and tell me if you still have problems, and what those problems are.

                Cheers,

                David

                <?xml version="1.0" encoding="utf-8"?>
                <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="vertical"
                creationComplete="reportManager.getTop3Activities();">
                <mx:Script>
                <![CDATA[
                import mx.utils.NameUtil;
                import mx.utils.DisplayUtil;
                import mx.collections.ArrayCollection;
                import mx.charts.*;
                import mx.charts.series.*;
                import mx.charts.series.items.*;
                import mx.charts.chartClasses.ChartLabel;
                import mx.charts.effects.SeriesInterpolate;
                import mx.rpc.events.*;
                import mx.controls.Alert;
                import mx.formatters.NumberFormatter;

                [Bindable] public var top3ActivitiesArray:Array;
                [Bindable] public var slicedtop3ActivitiesAC:ArrayCollection = new ArrayCollection();
                public function handleTop3ActivitiesResult(event:ResultEvent):void{
                top3ActivitiesArray=event.result.list.source as Array;
                slicedtop3ActivitiesAC.source = top3ActivitiesArray;
                }

                private function displayTop3ActivityChartTip(data:Object, field:String, index:Number, percentValue:Number):String {
                var nfmt:NumberFormatter = new NumberFormatter();
                nfmt.precision = 0;
                return data.ActivityName + ": " + '\n' + nfmt.format(data.time) + " Minutes";
                }

                ]]>
                </mx:Script>

                <mx:RemoteObject id="reportManager" destination="ColdFusion" source="reports" showBusyCursor="true">
                <mx:method name="getTop3Activities"
                fault="Alert.show(event.fault.message)" result="handleTop3ActivitiesResult(event)"/>
                </mx:RemoteObject>

                <mx:SeriesInterpolate id="interpolate" duration="1000" />
                <mx:PieChart id="Top3ActivitiesChart" dataProvider="{slicedtop3ActivitiesAC.source}"
                width="50%" height="50%" showDataTips="true">
                <mx:series>
                <mx:PieSeries field="time" nameField="ActivityName" labelPosition="callout"
                labelFunction="displayTop3ActivityChartTip" showDataEffect="{interpolate}"/>
                </mx:series>
                </mx:PieChart>
                </mx:Application>


                • 5. Re: Charts using Remote Object
                  James Bower Level 1
                  Hi David,
                  Your first post was for the most part fine. The "hail Mary" was caught and it was only a short run to the end zone. I needed only to add the method call (or creationComplete) and import a couple of classes to get it going for the extra point conversion. I hope that using the remote object with other types of charts will be as easy as it is (or was) here. Thanks again for your help.

                  Cheers,
                  James
                  • 6. Re: Charts using Remote Object
                    davidmedifit Level 1
                    James, good to hear it works - You know, now that you have the RO part working, it's really just a matter of getting it into a format that you want. Personally, I try to make my data as simple as possible, but I know that's not always possible. For example, you may want to break down the data by day of the month, so that a slider can update the graph, based on the day of the month.

                    You can either make the slider call the RO again, and update the data source, you can have the initial RO call return a more complex item that you can deal with in actionscript, or you can return a "flat" list, that you can then "slice".

                    My advice for you is to tear apart the dashboard application that comes packaged with Flex. Run it through the debugger and see how they slice data arrays.

                    Not alot of people are working in the reporting field right now, so be prepared to be a pioneer on this - especially if it gets complicated. I'll keep an eye out for any posts on the matter, but I think you'll be surpassing me any day now.

                    Best of luck.

                    David