4 Replies Latest reply on Oct 20, 2007 12:29 AM by msabljic

    How to display time in Flex charts

    msabljic Level 1
      Let's say i have two records which i am trying to display in my BarChart:

      1. ID = test1
      Duration = 05:50

      2. ID = test2
      Duration = 07:55

      And i would like to display those records so that ID is on y-axis and Duration is on y-axis. The problem is i can't display "min:sec" time format as a value on axis. Is this even possible and what options do i have?

      thanks in advance
        • 1. Re: How to display time in Flex charts
          ebrentnelson
          What does your code look like? This is definitely possible.
          • 2. Re: How to display time in Flex charts
            msabljic Level 1
            Here is a quick example of what i am trying to accomplish, the problem with code below is that 'Duration' field is not displayed on x-axis if its values are in time format like "07:55". It they are normal numbers then they are displayed fine.

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">

            <mx:Script>
            <![CDATA[

            import mx.collections.ArrayCollection;

            [Bindable]
            public var test:ArrayCollection;


            public function initPanel():void{

            var id:Array = new Array ("slide1", "slide2");
            var duration:Array = new Array ("05:50", "07:55");

            test.addItem({ID:id[0], Duration:duration[0]});
            test.addItem({ID:id[1], Duration:duration[1]});

            }


            ]]>
            </mx:Script>

            <mx:Panel creationComplete="initPanel();">
            <mx:BarChart id="piechart" height="50%" width="50%" dataProvider="{test}">

            <mx:verticalAxis>
            <mx:CategoryAxis categoryField="ID" />
            </mx:verticalAxis>

            <mx:series>
            <mx:BarSeries yField="ID" xField="Duration" />
            </mx:series>
            </mx:BarChart>
            </mx:Panel>

            </mx:Application>

            Thanks a lot for your time and help
            • 3. Re: How to display time in Flex charts
              ebrentnelson Level 1
              Here is an idea. Can you convert the time values to sheer seconds and then run a labelFunction on the seconds to create the time labels. For example you would have 5:50 (five minutes fifty seconds) as 350 seconds. The chart would be able to easily compare this to other numbers... then the labelFunction would be passed the 350 and convert it to 5:50 ( divide by 60 and append the remainder with a ":" to the end). This is how I would do it.
              • 4. How to display time in Flex charts
                msabljic Level 1
                That's exactly what i did in the end but thanks for suggestion Brent :)

                cheers