Skip navigation
Currently Being Moderated

How to draw gridlines on minor ticks of chart?

Apr 10, 2013 6:13 AM

Tags: #as3 #as3.0 #flex3.6 #flex2 #flex_4.5.1 #actionscript_3 #flex4.5

Hi Guys,

I want to draw gridlines on minor ticks of  column chart .

drawing gridlines on ticks of column chart is possible using Gridlines and assigning it to background Elements.

Is there is same for minor tick?

Thanks in Advance!

 
Replies
  • Currently Being Moderated
    Apr 15, 2013 9:59 AM   in reply to Ajay Prabhakar Barokar

    You can set the length of the minorTicks in a verticalAxisRenderers.

     

    For example, if my verticalAxis contains a LinearAxis called "countAxis", I could set the length like this.

     

     

    <mx:verticalAxisRenderers>
     <mx:AxisRenderer axis="{countAxis}" minorTickPlacement="inside" minorTickStroke="{s1}" minorTickLength="100" />
    </mx:verticalAxisRenderers>
    

    Where s1 is a stroke declaration.

     

    <fx:Declarations>
     <mx:SolidColorStroke id="s1" color="0x000000" weight="1" joints="bevel" caps="square"/>
    </fx:Declarations>
    

     

    The only issue is determine what the minorTickLength is, because you can't simply get the width of the chart and set it to that width, because the line will be too long.

     

    You can use the ColumnSeries width value to set the minorTickLength and that will make it as wide as the chart.

     

    Message was edited by: DeanLoganBH - you can use the columnSeries.width

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 17, 2013 4:24 AM   in reply to Ajay Prabhakar Barokar

    Well, that wasn't exactly what you asked. However, you have the tickStroke and the minorTickStroke available in the AxisRenderer, so you could change the alpha on the minorTickStroke so that when it is over the segment line, the color will blend with whatever color you choose for the tickStroke.

    <fx:Declarations>
     <mx:SolidColorStroke id="minorStroke" color="0x990000" alpha=".4" weight="1" joints="bevel" caps="square"/>
     <mx:SolidColorStroke id="majorStroke" color="0x000000" weight="1" joints="bevel" caps="square"/>
    </fx:Declarations>
    <mx:verticalAxisRenderers>
     <mx:AxisRenderer axis="{countAxis}" 
          minorTickPlacement="inside" minorTickStroke="{minorStroke}" minorTickLength="{columnSeries1.width}"
          tickPlacement="inside" tickStroke="{majorStroke}" tickLength="{columnSeries1.width}"  />
    </mx:verticalAxisRenderers>
    

     

    Or, you can keep the color and alpha the same and just add extra weight to the tickStroke

    <fx:Declarations>
     <mx:SolidColorStroke id="minorStroke" color="0x000000" weight="1" joints="bevel" caps="square"/>
     <mx:SolidColorStroke id="majorStroke" color="0x000000" weight="2" joints="bevel" caps="square"/>
    </fx:Declarations>
    
     
    |
    Mark as:
  • Currently Being Moderated
    Apr 18, 2013 4:43 AM   in reply to Ajay Prabhakar Barokar

    No, you cannot change the color of the each minor tick, unless you want create a whole new custom component.  You cannot draw the minor ticks, without it drawing the major tick.  You can choose the color of the major tick to be different than the minor tick.

     

    Here is an image showing different color for minor and major ticks.   If you look closely, you can see that the red line is still on the major tick.

    ColumnWithIntervalTicks_2storkes.png

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 19, 2013 6:14 AM   in reply to Ajay Prabhakar Barokar

    If you want something like this

    ColumnWithIntervalTicks_overlay.png

    Then the easiest method is to copy the chart and put it in a Group with the first chart.  The first chart listed in the group would be the one you alert to show Vertical and Horizontal Axis Renderers.  Then you just set the stroke color for the minor ticks to different values and the front chart stroke to a larger weight.

     

     

    <mx:SolidColorStroke id="minorStroke" color="0x990000" weight="2" />
    <mx:SolidColorStroke id="majorStroke" color="0x000000" weight="4" />
    
    
    <mx:SolidColorStroke id="minorStrokeBack" color="0xcccccc" alpha=".8" weight="1" />
    <mx:SolidColorStroke id="majorStrokeBack" color="0xcccccc" alpha=".8" weight="2" />
    
    

     

    The code I used to create the above chart.  Notice that I use a Linear Axis on the x axis.  You maybe limited to what you can use in order for the charts to line up properly.

     

    <s:Group id="hourCountsGroup" width="100%" height="100%"  >
    <mx:ColumnChart id="myColumnChartBack" width="100%" height="100%" showDataTips="true">
              <mx:series>
                        <mx:ColumnSeries id="columnSeriesBack" xField="date" yField="close" />
              </mx:series>
              <mx:verticalAxis>
                        <mx:LinearAxis id="vCountAxisBack" alignLabelsToInterval="true" 
                                                         title="Close" autoAdjust="true" minorInterval="0" 
                                                         minimum="0" interval="10"
                                                         maximum="100"> 
                        </mx:LinearAxis>
              </mx:verticalAxis>
              <mx:horizontalAxis>
                        <mx:LinearAxis id="hCountAxisBack" minimum="0" maximum="105" interval="10" />
              </mx:horizontalAxis>
              <mx:verticalAxisRenderers>
                        <mx:AxisRenderer axis="{vCountAxisBack}" minorTickPlacement="inside" minorTickStroke="{minorStrokeBack}" minorTickLength="{columnSeriesBack.width}"  />
              </mx:verticalAxisRenderers>
              <mx:horizontalAxisRenderers>
                        <mx:AxisRenderer axis="{hCountAxisBack}" minorTickPlacement="inside" minorTickStroke="{minorStrokeBack}" minorTickLength="{columnSeriesBack.height}"  />
              </mx:horizontalAxisRenderers>
    </mx:ColumnChart>
    <mx:ColumnChart id="myColumnChartFront" width="100%" height="100%" showDataTips="true">
    <mx:series>
              <mx:ColumnSeries id="columnSeriesFront" xField="date" yField="close" />
    </mx:series>
    <mx:verticalAxis>
              <mx:LinearAxis id="vCountAxisFront" alignLabelsToInterval="true" 
                                               title="Close" autoAdjust="true" minorInterval="0" 
                                               minimum="0" interval="10"
                                               maximum="100"> 
              </mx:LinearAxis>
    </mx:verticalAxis>
    <mx:horizontalAxis>
              <mx:LinearAxis id="hCountAxisFront" minimum="0" maximum="105" interval="10" />
    </mx:horizontalAxis>
    <mx:verticalAxisRenderers>
              <mx:AxisRenderer axis="{vCountAxisFront}" minorTickPlacement="cross" minorTickStroke="{minorStroke}"  />
    </mx:verticalAxisRenderers>
    <mx:horizontalAxisRenderers>
              <mx:AxisRenderer axis="{hCountAxisFront}" minorTickStroke="{minorStroke}" />
    </mx:horizontalAxisRenderers>
    </mx:ColumnChart>
    </s:Group>
    
    
     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points