[CLOSED] Chart: Toggling NumericAxis Grid

  1. #1

    [CLOSED] Chart: Toggling NumericAxis Grid

    Can the user control if the numeric axis grid is displayed or not via a menu item?

    I have defined my NumericAxis Grid in code behind and provided a menu item for the user to toggle:

       ...
       NumericAxis nAxis = new NumericAxis();
       nAxis.Position = Position.Left;
       nAxis.Title = "Requests";
       nAxis.Fields = yFields;  //Defined earlier
       nAxis.MinorTickSteps = 1;
       nAxis.Minimum = 0;
       nAxis.GridConfig = new AxisGrid {0 = new SpriteAttributes {Opacity=1, Fill="#ddd", Stroke="#bbb", StrokeWidth=0.5}};
       Chart1.Axes.Add(nAxis);
       ...
       <ext:CheckMenuItem runat="server" Checked="true" Text="Grid">
          <Listeners>
             <CheckChange Handler="Ext.getCmp('CrtsChart').axes.items[1].grid = checked;" />
          </Listeners>
       </ext:CheckMenuItem>
    Last edited by Daniil; Nov 25, 2013 at 12:32 PM. Reason: [CLOSED]
  2. #2
    Hi Chris,

    This appears to be working.
    Ext.getCmp('CrtsChart').axes.items[1].gridLines.hide(true); // .show(true) to show
  3. #3
    gridLines is always returning undefined.

    items[1] is of type: 'Numeric' and I can see attributes of grid, gridEven, gridOdd.
  4. #4
    Hello!

    You should use other Axis. Try the following in console with our sample: https://examples2.ext.net/Examples/Chart/Area/Basic

    App.Chart1.axes.items[1].gridLines.hide(true);
  5. #5
    Got it. I couldn't figure out why you wanted me to apply the hide against the Category Axis. But that call does work:

    Click image for larger version. 

Name:	ChartWithGridLines.JPG 
Views:	8 
Size:	66.5 KB 
ID:	7266Click image for larger version. 

Name:	ChartWithOutGridLines.JPG 
Views:	9 
Size:	65.3 KB 
ID:	7267

    I was actually wanting to show/hide the odd gradients on the numeric axis:

    Click image for larger version. 

Name:	ChartUserPreference.JPG 
Views:	9 
Size:	70.7 KB 
ID:	7268

    Any thoughts?
  6. #6
    Try the following for the same sample:

    var gridOdd = App.Chart1.axes.items[0].gridOdd; gridOdd.surface.remove(gridOdd); 
    App.Chart1.axes.items[0].grid = null;
  7. #7
    Great. That is half the battle. Can you finish writing my entire application for me. :-)

    Is there any easy way to restore it when checked is true.

       function toggleNAxisGrid(btn, checked) {
          var numericAxis = Ext.getCmp('CrtsChart').axes.items[1];
    
          if (checked === false) {
             var gridOdd = numericAxis.gridOdd;
             gridOdd.surface.remove(gridOdd);
             numericAxis.grid = null;
           }
          else {
             //HELP!
          }
       }
  8. #8
    I think we should avoid removing if we need to get it back again.

    So, is this not working?
    gridOdd.hide(true);
  9. #9
    Works perfectly. Please close the thread.

    function toggleNAxisGrid(btn, checked) {
        var filteredAxes = Ext.Array.filter(Ext.getCmp('CrtsChart').axes.items,
             function (axis) {return (axis.type == 'Numeric');});
    
         if (filteredAxis.length == 0) return;
    
         if (checked === false) 
           filteredAxes[0].gridOdd.hide(true);
         else
           filteredAxes[0].gridOdd.show(true);
     }

Similar Threads

  1. Replies: 5
    Last Post: Mar 11, 2014, 3:03 PM
  2. Replies: 0
    Last Post: May 22, 2013, 9:57 AM
  3. [CLOSED] NumericAxis Chart
    By pdcase in forum 2.x Legacy Premium Help
    Replies: 8
    Last Post: Aug 02, 2012, 6:04 PM
  4. [CLOSED] Toggling ShowMask on an EventMask
    By rmelancon in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Feb 10, 2012, 6:42 PM
  5. Replies: 0
    Last Post: Jun 29, 2009, 8:41 PM

Posting Permissions