0 Replies Latest reply on Oct 7, 2010 11:30 AM by mjschiavone

    Need help displaying labels for minor tick marks on DateTimeAxis

    mjschiavone

      I've looked all over the web for a solution for this, but can't seem to find anything - please help!

       

      I have a DateTimeAxis and need to control the minor tick marks - specifically, I need to control their frequency (spacing) and add labels to each.  I've tried everything I can think of and nothing works.  Below is some of the code from that page

       

      Here's what I'm doing:

       

      Since the code is complex, I'll summarize and add snippets.  It's several years old and hasn't been updated to Flex 4.  For a date range of 1 to 2 days, I want to see major ticks for each day listing the specific day of the week and a minor tick every six hours with a label that displays that hour.

       

      I have a style for the horizontal axis:

       

      .horizontalAxisStyle {

        placement:bottom;

        tickPlacement:inside;

        tickLength:12;

        minorTickPlacement:inside;

        minorTickLength:6;

      }

       

      I have an AS function that determines the time range of the graph and sets major and minor tick marks and labels.  Here's the snippet for that date range:


      //>24 hours to two days

      else if ( dateTimeRange <= Constants.ONE_DAY * 2 ) {

        timeFormatString = "EEE";

        dataUnits = "days";

        interval = 1;

        showMinorTicks = true;

        minorTickFormatString = "LA";

        minorTickDataUnits = "hours";

        minorTickInterval = 4;

      }

       

       

      Then at the end of the function, it sets those values as appropriate:

       

      horizontalAxis.dataUnits = dataUnits;

      horizontalAxis.interval = interval;

       

      if ( showMinorTicks ) {

        horizontalAxis.minorTickUnits = minorTickDataUnits;

        horizontalAxis.minorTickInterval = minorTickInterval;

        xAxisRenderer.setStyle("minorTickPlacement", "cross");

      }

       

       

      I have a function for setting the axis time labels using the timeFormatString that was set above:

       

      /** Formats the XAxis labels */

      public function formatDateTimeLabels(labelValue:Object, previousValue:Object, axis:IAxis):String {

        var formatter:DateFormatter = new DateFormatter();

        var date:Date = new Date();

        date.setTime(new Number(labelValue));

       

        formatter.formatString = timeFormatString;

        return formatter.format(date);

      }

       

      Here's the start of the chart, including the horizontal axis:

       

      <!-- BEGIN PRIMARY CHART CONTAINER -->

      <mx:CartesianChart id="chart"

          width="100%"

          height="100%"

          showDataTips="true"

          dataTipRenderer="components.DataTipRenderer"

          dataTipFunction="setDataTipText"

          backgroundElements="{gridlines}"

          itemRollOver="dataItemMouseOver(event)"

          itemClick="dataItemClicked(event)"

          useHandCursor="true" >

       

      <!-- The following seriesFilters tag removes the default formatting

           of chart series', includig bevels and drop shadows -->

        <mx:seriesFilters>

        <mx:Array/>

        </mx:seriesFilters>

       

        <!-- HORIZONTAL AXIS -->

        <mx:horizontalAxisRenderers>

          <mx:AxisRenderer id="xAxisRenderer"

            axis="{horizontalAxis}"

            styleName="horizontalAxisStyle"

            width="1" showLabels="true"

            titleRenderer="components.AxisLabelTextRenderer">

       

          <mx:axisStroke>{baseAxisStroke}</mx:axisStroke>

       

          <mx:tickStroke>

                          <mx:Stroke color="0x999999" weight="1" alpha=".85"/>

                      </mx:tickStroke>

                     

           <mx:minorTickStroke>

                          <mx:Stroke color="0x999999" weight="1" alpha=".45"/>

                      </mx:minorTickStroke>

                     

          </mx:AxisRenderer>

        </mx:horizontalAxisRenderers>

       

      <mx:horizontalAxis>

        <mx:DateTimeAxis id="horizontalAxis"

          labelFunction="formatDateTimeLabels"

          parseFunction="parseDateTimeValues"

          displayLocalTime="true" />

      </mx:horizontalAxis>

       

       

       

      Any help would be greatly appreciated!

       

      Mark