Refresh Chart with JavaScript click function

[Gregory]

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");
            });

[Marin Bratanov]

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

[Gregory]

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.

[Marin Bratanov]

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

[Gregory]

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

[hart]

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>

[Marin Bratanov]

Hello Hart,

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

Regards,

Marin Bratanov
Telerik by Progress