3 Replies Latest reply on Oct 29, 2007 8:00 AM by WebmastaDj

    Chart Labels

    WebmastaDj
      Ok, here is the deal, I am trying to customize my axis labels. I can get it to work but can't get it to do what I want it to do. Basically, the data will be organized via a field (in an XML file) called PERIOD. Now, what I want to do is combine both the PERIOD data and another other field in the XML called DATE_DESC. How can I call the DATE_DESC from the row in which it is pulling the PERIOD from. Here is the code I am working with.

      Chart's Code:
      <mx:HTTPService id="chartDataRequest" url="sql/chart_sql.php" useProxy="false" method="GET"/>
      <mx:AreaChart x="0" y="0" id="Chart1" width="510" height="226" dataProvider="{chartDataRequest.lastResult.data.key}" showDataTips="true">
      <mx:verticalAxis>
      <mx:LinearAxis minimum="-300"/>
      </mx:verticalAxis>
      <mx:horizontalAxisRenderer>
      <mx:AxisRenderer labelRotation="90"/>
      </mx:horizontalAxisRenderer>
      <mx:horizontalAxis>
      <mx:CategoryAxis dataProvider="{chartDataRequest.lastResult.data.key}" categoryField="PERIOD" labelFunction="ChartLabel"/>
      </mx:horizontalAxis>
      <mx:series>
      <mx:AreaSeries displayName="UPL_1" yField="UPL_1" xField="PERIOD">
      <mx:areaFill>
      <mx:SolidColor color="#666666"/>
      </mx:areaFill>
      </mx:AreaSeries>
      <mx:AreaSeries displayName="LPL_1" yField="LPL_1" xField="PERIOD">
      <mx:areaFill>
      <mx:SolidColor color="#CCCCCC"/>
      </mx:areaFill>
      </mx:AreaSeries>
      <mx:LineSeries form="curve" displayName="MA_1" yField="MA_1" xField="PERIOD">
      <mx:lineStroke>
      <mx:Stroke color="#0EE4FF" weight="2"/>
      </mx:lineStroke>
      </mx:LineSeries>
      <mx:LineSeries displayName="ACT" yField="ACT" xField="PERIOD">
      <mx:lineStroke>
      <mx:Stroke color="#FFFF00" weight="3"/>
      </mx:lineStroke>
      </mx:LineSeries>
      <mx:PlotSeries displayName="GREEN" yField="GREEN" xField="PERIOD" itemRenderer="mx.charts.renderers.CircleItemRenderer">
      <mx:fill>
      <mx:SolidColor color="#00CC00"/>
      </mx:fill>
      </mx:PlotSeries>
      <mx:PlotSeries displayName="RED" yField="RED" xField="PERIOD" itemRenderer="mx.charts.renderers.CircleItemRenderer">
      <mx:fill>
      <mx:SolidColor color="#FF0000"/>
      </mx:fill>
      </mx:PlotSeries>
      </mx:series>
      </mx:AreaChart>


      And here is the AS:

      <mx:Script>
      <![CDATA[
      public function ChartLabel(cat:Object,pcat:Object,ax:CategoryAxis,catItem:Object):String {
      var Desc:String = chartDataRequest.lastResult.data.key.DATE_DESC;
      var Label:String = cat + " " + Desc;
      return (Label);
      }
      ]]>


      Now the part I need help on is the "var Desc:String" value. I want that to be the DATE_DESC of that paricular entry. Please help me with a solution!
        • 1. Re: Chart Labels
          WebmastaDj Level 1
          what may help me in this is being able to query a XML document. In other words...my XML document looks like this:
          <data>
          <key>
          <DATE_DESC>value1</DATE_DESC>
          <PERIOND>value2</PERIOD>
          </key>
          </data>

          Is there any way I can query the XML looking for the PERIOD value and then pull the DATE_DESC from that same <key>?
          • 2. Re: Chart Labels
            WebmastaDj Level 1
            I may have found a way to get this to work. But still having problems, maybe someone can help. Here is what I have:

            XML Data file entry looks like the following:
            <data><key><DATE_SAFE>8,4,2006,FRI</DATE_SAFE></key></data>
            (of course there is more data than that in each <key> tag; I am just showing the field that is needed)

            Here is the rest of the code:
            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="chartDataRequest.send()" height="794" width="925">
            <mx:HTTPService id="chartDataRequest" url="data.xml" useProxy="false" method="GET"/>
            <mx:Script>
            <![CDATA[
            public function chartDateConvert(s:String):Date {
            var a:Array = s.split(",");
            var newDate:Date = new Date(a[2],a[0],a[1]-1);
            return newDate;
            }
            public function chartLabels(s:String):String {
            var a:Array = s.split(",");
            var FullLabel:String = a[0] + "/" + a[1] + "/" + a[2] + " " + a[3];
            return FullLabel;
            }
            ]]>
            </mx:Script>
            <mx:Style>
            @font-face {
            fontFamily: labelFont;
            src:url("fonts/arial.ttf");
            }
            AreaChart {
            fontFamily: labelFont;
            }
            </mx:Style>
            <mx:Panel x="10" y="10" width="530" height="770" layout="absolute" title="Charts" id="MainCharts" fontSize="12">
            <mx:AreaChart x="0" y="0" id="Chart1" width="510" height="226" dataProvider="{chartDataRequest.lastResult.data.key}" showDataTips="true">
            <mx:verticalAxis>
            <mx:LinearAxis minimum="-300"/>
            </mx:verticalAxis>
            <mx:horizontalAxisRenderer>
            <mx:AxisRenderer labelRotation="90"/>
            </mx:horizontalAxisRenderer>
            <mx:horizontalAxis>
            <mx:DateTimeAxis dataUnits="days" parseFunction="chartDateConvert" labelFunction="chartLabels"/>
            </mx:horizontalAxis>
            <mx:series>
            <mx:AreaSeries displayName="UPL_1" yField="UPL_1" xField="DATE_SAFE">
            <mx:areaFill>
            <mx:SolidColor color="#666666"/>
            </mx:areaFill>
            </mx:AreaSeries>
            <mx:AreaSeries displayName="LPL_1" yField="LPL_1" xField="DATE_SAFE">
            <mx:areaFill>
            <mx:SolidColor color="#CCCCCC"/>
            </mx:areaFill>
            </mx:AreaSeries>
            <mx:LineSeries form="curve" displayName="MA_1" yField="MA_1" xField="DATE_SAFE">
            <mx:lineStroke>
            <mx:Stroke color="#0EE4FF" weight="2"/>
            </mx:lineStroke>
            </mx:LineSeries>
            <mx:LineSeries displayName="ACT" yField="ACT" xField="DATE_SAFE">
            <mx:lineStroke>
            <mx:Stroke color="#FFFF00" weight="3"/>
            </mx:lineStroke>
            </mx:LineSeries>
            <mx:PlotSeries displayName="GREEN" yField="GREEN" xField="DATE_SAFE" itemRenderer="mx.charts.renderers.CircleItemRenderer">
            <mx:fill>
            <mx:SolidColor color="#00CC00"/>
            </mx:fill>
            </mx:PlotSeries>
            <mx:PlotSeries displayName="RED" yField="RED" xField="DATE_SAFE" itemRenderer="mx.charts.renderers.CircleItemRenderer">
            <mx:fill>
            <mx:SolidColor color="#FF0000"/>
            </mx:fill>
            </mx:PlotSeries>
            </mx:series>
            </mx:AreaChart>
            </mx:Panel>
            </mx:Application>


            As you can see, I am trying to format the label like so: "8/4/2006 FRI" But when I try to do so, I get the following error:
            quote:

            ArgumentError: Error #1063: Argument count mismatch on Dashboard/chartLabels(). Expected 1, got 3.
            at mx.charts::DateTimeAxis/mx.charts:DateTimeAxis::buildLabelCache()
            at mx.charts.chartClasses::NumericAxis/getLabelEstimate()
            at mx.charts::AxisRenderer/::measureLabels()
            at mx.charts::AxisRenderer/::calcRotationAndSpacing()
            at mx.charts::AxisRenderer/adjustGutters()
            at mx.charts.chartClasses::CartesianChart/::updateAxisLayout()
            at mx.charts.chartClasses::CartesianChart/mx.charts.chartClasses:CartesianChart::updateDispl ayList()
            at mx.core::UIComponent/validateDisplayList()
            at mx.managers::LayoutManager/::validateDisplayList()
            at mx.managers::LayoutManager/::doPhasedInstantiation()
            at Function/ http://adobe.com/AS3/2006/builtin::apply()
            at mx.core::UIComponent/::callLaterDispatcher2()
            at mx.core::UIComponent/::callLaterDispatcher()


            So if anyone can help me fix this problem, that would be great. I really need the labels to be in that format.
            • 3. Re: Chart Labels
              WebmastaDj Level 1
              Solved the problem. Used a CategoryAxis instead of DateTime Axis