7 Replies Latest reply: Apr 19, 2013 6:14 AM by DeanLoganBH RSS

    How to draw gridlines on minor ticks of chart?

    Ajay Prabhakar Barokar

      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!

        • 1. Re: How to draw gridlines on minor ticks of chart?
          DeanLoganBH Community Member

          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

          • 2. Re: How to draw gridlines on minor ticks of chart?
            Ajay Prabhakar Barokar Community Member

            my problem is to provide minor ticks and minor gridlines with different color.

            • 3. Re: How to draw gridlines on minor ticks of chart?
              DeanLoganBH Community Member

              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>
              
              • 4. Re: How to draw gridlines on minor ticks of chart?
                Ajay Prabhakar Barokar Community Member

                Actually ur not getting my Problem;

                I want to draw gridLines on minor ticks . For this ,u suggested to set minorticklength  equal to chart width.

                This solve only the problem of drawing the gridlines on minorticks but i want to use seprate  color for minor ticks and gridlines  drawing on minor ticks.It is not pssible to provide different color bcoz minortick is used as gridlines.

                • 5. Re: How to draw gridlines on minor ticks of chart?
                  DeanLoganBH Community Member

                  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

                  • 6. Re: How to draw gridlines on minor ticks of chart?
                    Ajay Prabhakar Barokar Community Member

                    I dont want to change color fo each minor ticks.

                    Color for each minor ticks is same only .

                    I want  distinguish minorticks and gridlines drawing on it by providing seprate color for minoe ticks and minor ticks gridline.

                    • 7. Re: How to draw gridlines on minor ticks of chart?
                      DeanLoganBH Community Member

                      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>