RadHtmlChart in a Responsive Web Page

Thread is closed for posting
5 posts, 0 answers
  1. 63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 posts
    Member since:
    Oct 2004

    Posted 29 Jul 2014 Link to this post

    Requirements

    Telerik Product and Version

    Telerik UI for ASP.NET AJAX Q2 2014 SP1

    Supported Browsers and Platforms

    All browsers and platforms supported by Telerik UI for ASP.NET AJAX

    Components/Widgets used (JS frameworks, etc.)



    PROJECT DESCRIPTION 

    Generally a chart is static - it has a given size which doesn't change together with the browser window, program window, etc. This is so because visualized data may not look well or even would look distorted if each change in the browser viewport or page layout affects the dimensions of the chart.

    A simple page is attached to the thread that shows an example of RadHtmlChart in a responsive web page.

    A possible solution is to:
    1. Set explicitly 100% width and height to the chart.
    2. Call the Kendo Chart widget's resize() method when dimensions of the parent element are changed (e.g., on window.onresize event).

    For example:

    ASPX:

    <div style="width: 30%; height: 40%; border: 1px solid green;">
        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="100%" Height="100%">
        </telerik:RadHtmlChart>
    </div>

     

    JavaScript:

    window.onresize = function () {
        $find("<%=RadHtmlChart1.ClientID%>").get_kendoWidget().resize();
    }

     

    When RadHtmlChart is placed inside RadPane it is not necessary to call the chart's resize method because RadSplitter calls internally the repaint method of its children when resized.

    Tip: Old browsers may fire the window.resize event multiple times for a single resize. To ensure the chart is redrawn only once, you can use a small timeout, as shown in the attached sample.

    There is also a sample for old versions where the get_kendoWidget() method is not exposed and where the Width and Height properties do not take percentage values.

  2. 4002A352-A07D-4CE5-B33A-A75E9DE6AE1B
    4002A352-A07D-4CE5-B33A-A75E9DE6AE1B avatar
    2 posts
    Member since:
    Mar 2015

    Posted 31 Mar 2015 in reply to 63F75A2C-1F16-4AED-AFE8-B1BBD57646AD Link to this post

    I tried the _chartObject.resize() option, still its not resizing.
  3. 9915F819-5226-40CF-90E0-E07E884605ED
    9915F819-5226-40CF-90E0-E07E884605ED avatar
    1502 posts
    Member since:
    Jan 2017

    Posted 02 Apr 2015 Link to this post

    Hi Srinivas,

    I am not able to reproduce the mentioned issue with Telerik UI 2015.1.225 version. A short video test and the corresponding VS example is attached for your reference.

    Regards,
    Danail Vasilev
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  4. 2B000FE5-FB3F-4942-B94D-521C2D27B666
    2B000FE5-FB3F-4942-B94D-521C2D27B666 avatar
    15 posts
    Member since:
    Mar 2015

    Posted 09 Feb 2016 Link to this post

    In my solution I need to create the htmlchart dynamically serverside:

    Dim v As New AnalysisVisualizer
    ' parse data parameters
    '-----
    Dim mydynamicchart As RadHtmlChart = v.GetRadHtmlChart()
    mydynamicchart.ID = "RadHtmlChart1"
    With Me.chartplaceholder.Controls
       .Clear()
       .Add(mydynamicchart)
    End With

    How to implement resizing in this scenario? 

    Any tips appreciated

    Dim As New AnalysisVisualizer
    ' parse data parameters
    ' .....
    Dim mydynamicchart As RadHtmlChart = v.GetRadHtmlChart()
    mydynamicchart.ID = "RadHtmlChart1"
    With Me.chartplaceholder.Controls
       .Clear()
       .Add(mydynamicchart)
    End With

     

    Dim As New AnalysisVisualizer
    ' parse data parameters
    ' .....
    Dim mydynamicchart As RadHtmlChart = v.GetRadHtmlChart()
    mydynamicchart.ID = "RadHtmlChart1"
    With Me.chartplaceholder.Controls
       .Clear()
       .Add(mydynamicchart)
    End With

     

    Dim As New AnalysisVisualizer
    ' parse data parameters
    ' .....
    Dim mydynamicchart As RadHtmlChart = v.GetRadHtmlChart()
    mydynamicchart.ID = "RadHtmlChart1"
    With Me.chartplaceholder.Controls
       .Clear()
       .Add(mydynamicchart)
    End With

     

    Dim As New AnalysisVisualizer
    ' parse data parameters
    ' .....
    Dim mydynamicchart As RadHtmlChart = v.GetRadHtmlChart()
    mydynamicchart.ID = "RadHtmlChart1"
    With Me.chartplaceholder.Controls
       .Clear()
       .Add(mydynamicchart)
    End With

     

    Dim As New AnalysisVisualizer
    ' parse data parameters
    ' .....
    Dim mydynamicchart As RadHtmlChart = v.GetRadHtmlChart()
    mydynamicchart.ID = "RadHtmlChart1"
    With Me.chartplaceholder.Controls
       .Clear()
       .Add(mydynamicchart)
    End With

     

  5. 9915F819-5226-40CF-90E0-E07E884605ED
    9915F819-5226-40CF-90E0-E07E884605ED avatar
    1502 posts
    Member since:
    Jan 2017

    Posted 12 Feb 2016 Link to this post

    Hello Walther,

    You can try to register a startup script from the server that will do the resizing on the client-side - http://docs.telerik.com/devtools/aspnet-ajax/controls/window/troubleshooting/opening-from-the-server

    Regards,
    Danail Vasilev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.