Refresh Chart with JavaScript click function

7 posts, 2 answers
  1. Gregory
    Gregory avatar
    4 posts
    Member since:
    Jun 2015

    Posted 23 Jun 2015 Link to this post

    Hello, I am designer trying to figure how make changes to the HTML Chart. I have 3 charts inside of 3 containing DIVs set at 33%. I have a click function with JavaScript to change the width from 33% to 100% in order to expand the chart and make it easier to read. When I do this, the containing DIV expands to 100% but the chart stays at the initial rendered 33% when first loaded. I have been searching and searching trying to find a solution but have not been able. Can someone show what would be needed to make the chart refresh with click event?

    The JS I have is:

    $(".gridButton").click(function () {
    $(".chartContainer").removeClass("grid");
                });

  2. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3891 posts

    Posted 23 Jun 2015 Link to this post

    Hi Gregory,

    You need to call the repaint() method of the HtmlChart object, or the resize() method of the underlying Kendo widget (http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/client-side-programming/overview#get-client-side-object-reference), as shown here: http://www.telerik.com/support/code-library/radhtmlchart-in-a-responsive-web-page.

    here is a basic example of the script:

    function resizeChart() {
        //repaint the chart - will play animations
        //$find("<%=RadHtmlChart1.ClientID%>").repaint();
        //only resizes the chart - will not play animations
        $find("<%=RadHtmlChart1.ClientID%>").get_kendoWidget().resize();
    }

    which assumes the hart has dimensions set to 100%:

    <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="100%" Height="100%">

    Regards,

    Marin Bratanov
    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
  3. Gregory
    Gregory avatar
    4 posts
    Member since:
    Jun 2015

    Posted 23 Jun 2015 in reply to Marin Bratanov Link to this post

    Thank you for the quick response. I wasn't able to get anything to work. I besides what I am trying to accomplish, since the containing DIV is set to a %, if I shrink my screen size (make more narrow) the chart starts to get cut off or if I expand my screen size, the chart will remain it's initial width and just leave white space. The DIV grows and shrinks as needed, but the charts do not, the charts only stay the size of what the contain DIV is when the page is first loaded.

     I was also informed that we do not use Kendo.

  4. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3891 posts

    Posted 24 Jun 2015 Link to this post

    Hi Gregody,

    I am attaching a small example that shows how this works.

    As for using Kendo - RadHtmlChart is, essentially, a server-side wrapper over the Kendo Chart widget.

    Regards,

    Marin Bratanov
    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
  5. Gregory
    Gregory avatar
    4 posts
    Member since:
    Jun 2015

    Posted 26 Jun 2015 Link to this post

    Hello, thank you for your assistance. Even though your example worked... I didn't work for me when implemented into the site. A solution has been found. Thank you again.

    Greg

  6. hart
    hart avatar
    21 posts
    Member since:
    Jul 2008

    Posted 22 May in reply to Marin Bratanov Link to this post

    Marin:

    This does not work if the code has an RadAjaxManager that automatically refreshes the data in the chart via a Timer.  The DIV has resized to the correct 100%, however, the chart will not resize.

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
     <AjaxSettings>
      <telerik:AjaxSetting AjaxControlID="TimerRefresh">
       <UpdatedControls>
        <telerik:AjaxUpdatedControl ControlID="chrtHistory" />
       </UpdatedControls>
      </telerik:AjaxSetting>
     </AjaxSettings>
    </telerik:RadAjaxManager>
     
    <asp:Timer ID="TimerRefresh" runat="server" Interval="1000" OnTick="CreateColumnSeries"></asp:Timer>
  7. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3891 posts

    Posted 23 May Link to this post

    Hello Hart,

    You should set the UpdatePanelHeight of the chart UpdatedControl entry to 100%.

    Regards,

    Marin Bratanov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top