Getting VisibleRange of Chart after Zoom

  1. #1

    Getting VisibleRange of Chart after Zoom

    Hi everybody,
    I want to get the visible range of a Ext.Net.cartesianChart after i zoomed in, to pass new values to the corresponding datastore. The reason for this is, that I dont want to pass hundrets of thousands of datavalues to a client to show a complete dataseries but to pass only, say 2000 important values to the client. if the user wants more acurate information on a ceratin area of the chart, he can zoom in, with something like a zoombox. after that, 2000 new values should be loaded from server and displayed, corresponding to the zoomed in area. how can i get the startvalue and the endvalue of this selected zoombox or the visible range of the chart after it was zoomed in?

    this is a snippet of the markup
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ContainerTest.aspx.cs" Inherits="ASPEXTControlEditor.ContainerTest" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <script>
          function getBounderies(...) {
          //return bounderies here
        }
    </script>
    </head>
    
    
    <ext:Store ID="st_DataStore" runat="server">
            <Model>
              <ext:Model runat="server">
                <Fields>              
                  <ext:ModelField Name="Date0" Type="Date" />
                  <ext:ModelField Name="Visits0"/>
                  <ext:ModelField Name="Date1" Type="Date" />
                  <ext:ModelField Name="Visits1" />
                </Fields>
              </ext:Model>
            </Model>
            <Proxy>
              <ext:AjaxProxy Url="TestHandler.ashx">
                <ActionMethods Read="GET" />
                <Reader>
                  <ext:JsonReader RootProperty="data" TotalProperty="total"/>
                </Reader>
              </ext:AjaxProxy>
            </Proxy>
            <Parameters>
              <ext:StoreParameter Name="bounderies" Value="getBoundreis()"/>
            </Parameters>
          </ext:Store>
    
    <ext:Panel ID="pnl_Chart" runat="server" Title="chart" Layout="FitLayout" Icon="ChartLine">
      <Items>                             
        <ext:CartesianChart ID="cch_Diagramm" runat="server" Animation="true" StoreID="st_DataStore">                               
          <Interactions>
            <ext:CrossZoomInteraction  >
              
               <%--maybe get visible range from here?--%>
            
            </ext:CrossZoomInteraction>
          </Interactions>                              
          <Axes>
            <ext:NumericAxis Position="Left"  Fields="Visits0,Visits1" Title="Number of Hits" />    
            <ext:TimeAxis Position="Bottom" Fields="Date0,Date1" DateFormat="M Y" Title="Month of the Year">                                                                   
                 <Listeners> 
                    <RangeChange Handler="rangeChange(range)" Buffer="500">   
                    
                       <%--or here? ideally this one should be VisibleRangeChange Event--%>                                     
      
                    </RangeChange>                                      
                  </Listeners>
                </ext:TimeAxis>                                  
              </Axes>
              <Series>
                <ext:LineSeries  XField="Date0" YField="Visits0"/>                                                             
                <ext:LineSeries XField="Date1" YField="Visits1" / >                                                                   
              </Series>                                
            </ext:CartesianChart>
          </Items>
        </ext:Panel>
    I use a Webservice to load data and i want to pass the boundaries of my zoombox as storeparamters to the webservice.
    I would very much appreciate any help since I am looking for a solution for days now.
    Best regards
    Last edited by Daniil; Sep 24, 2015 at 5:46 PM.
  2. #2
    Hello @Olloxan!

    Welcome to the Ext.NET forums!

    Agree, it would be great to have such an event, but there is not.

    As a solution I could suggest the following.
    Ext.chart.interactions.CrossZoom.override({
        zoomBy: function () {
            this.callParent(arguments);
            Ext.Array.each(this.getChart().getAxes(), function (axis) {
                console.log(axis.getVisibleRange());
            });
        }
    });
    Tested with this example.
    https://examples3.ext.net/#/Chart/Line/CrossZoom
  3. #3

    thanks a lot

    Hi Daniil,
    I tested it and I get a result, I can work with.
    Thank you very much for your reply.
    Greetings

Similar Threads

  1. [FIXED] [#114] Chart mask and zoom
    By feanor91 in forum Bugs
    Replies: 38
    Last Post: Sep 20, 2017, 6:58 AM
  2. Replies: 5
    Last Post: Sep 30, 2013, 9:07 AM
  3. [CLOSED] Geting combobox value and/or text from code behind
    By feanor91 in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Apr 27, 2012, 6:30 AM
  4. [CLOSED] Geting rid of the unlicensed message
    By Bert76 in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 22, 2011, 5:04 PM
  5. How to Zoom In and Out for a SVG content
    By anulall in forum 1.x Help
    Replies: 0
    Last Post: Jun 24, 2011, 9:56 AM

Tags for this Thread

Posting Permissions