This is a migrated thread and some comments may be shown as answers.

Refresh Chart with JavaScript click function

6 Answers 518 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Gregory
Top achievements
Rank 1
Gregory asked on 23 Jun 2015, 02:17 PM

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

6 Answers, 1 is accepted

Sort by
0
Accepted
Marin Bratanov
Telerik team
answered on 23 Jun 2015, 02:25 PM

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
0
Gregory
Top achievements
Rank 1
answered on 23 Jun 2015, 06:12 PM

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.

0
Accepted
Marin Bratanov
Telerik team
answered on 24 Jun 2015, 06:54 AM

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
0
Gregory
Top achievements
Rank 1
answered on 26 Jun 2015, 03:05 PM

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

0
hart
Top achievements
Rank 1
Veteran
answered on 22 May 2017, 03:52 PM

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>
0
Marin Bratanov
Telerik team
answered on 23 May 2017, 07:18 AM

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.
Tags
Chart (HTML5)
Asked by
Gregory
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Gregory
Top achievements
Rank 1
hart
Top achievements
Rank 1
Veteran
Share this question
or