RadHtmlChart in a Responsive Web Page

5 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1679 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. Srinivas
    Srinivas avatar
    2 posts
    Member since:
    Mar 2015

    Posted 31 Mar 2015 in reply to Telerik Admin Link to this post

    I tried the _chartObject.resize() option, still its not resizing.
  3. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    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. Walther
    Walther avatar
    2 posts
    Member since:
    Mar 2015

    Posted 09 Feb 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. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 12 Feb 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