Refresh Chart with JavaScript click function

5 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
    3595 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. UI for ASP.NET Ajax is Ready for VS 2017
  4. 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.

  5. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 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
  6. 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

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017