radhtmlchart resetzoom option in asp.net

4 posts, 2 answers
  1. narendra
    narendra avatar
    19 posts
    Member since:
    Feb 2019

    Posted 22 Aug Link to this post

    I have dynamically generated radhtmlcharts in asp.net page. after zooming into radhtmlchart I don't want to zoomout but I need an option for reset zoom in asp.net.

    can anyone show me how to do rest of zoom feature for radhtmlchart in asp.net c#?

     

     

    Thank you :)

     

  2. Answer
    Vessy
    Admin
    Vessy avatar
    2068 posts

    Posted 27 Aug Link to this post

    Hi Narenda,

    RadHtmlChart does not expose a method that directly resets the zoom level, but you can achieve the same by resetting the min and max values of the y axis of the control in a similar way:

            <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="1640px" Height="480px">
                <Zoom Enabled="true">
                    <MouseWheel Enabled="true" />
                    <Selection Enabled="true" ModifierKey="Shift" />
                </Zoom>
                <PlotArea>
                    <Series>
                        <telerik:ScatterLineSeries DataFieldY="SellQuantity" DataFieldX="SellDate">
                        </telerik:ScatterLineSeries>
                    </Series>
                    <XAxis BaseUnit="Seconds" BaseUnitStep="5" Step="1">
                    </XAxis>
                    <YAxis MinValue="0" MaxValue="10">
                    </YAxis>
    
                </PlotArea>
                <Legend>
                    <Appearance Visible="true" Position="Left"></Appearance>
                </Legend>
                <ChartTitle Text="Sold Cars per Date">
                </ChartTitle>
            </telerik:RadHtmlChart>
            <telerik:RadButton Text="Reset Zoom" runat="server" AutoPostBack="false" OnClientClicked="resetZoom"></telerik:RadButton>
            <script>
                function resetZoom() {
                    var chart = $find("<%=RadHtmlChart1.ClientID%>").get_kendoWidget();
                    chart.setOptions({
                        transitions: false,
                        categoryAxis: {
                            min: 0,
                            max: 10
                        }
                    })
                }
            </script>

     

     

    Regards,
    Vessy
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. narendra
    narendra avatar
    19 posts
    Member since:
    Feb 2019

    Posted 06 Sep in reply to Vessy Link to this post

    Hi thank you very much vessy.. very nice name

    the above script works fine. but I have dynamic radhtmlchart control created in c# with unique ID. how can I pass control id from c# server-side code to client-side script and rest zoom.

     

     

     

  4. Answer
    Peter Milchev
    Admin
    Peter Milchev avatar
    617 posts

    Posted 11 Sep Link to this post

    Hello Narendra,

    You can execute a JavaScript code from the server-side as demonstrated in the following article:

    If you need to reset many charts, you can add a CssClass to the chart and use it to get a reference to the HtmlChart using jQuery, as explained here:

    Regards,
    Peter Milchev
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top