Set height and width for chart through javascript

[Ram]

Hi
I'm using the radchart in my application.
I need to set the height and width for the chart based on resolution of screen.
I try to on window.onload or window.resize.
But I'm getting the radchart null.

below is my code:

function ResizeRadChart() {
          var width = screen.width;
          var height = screen.height;
          var chrtObject = $find("<%= trndChrt.ClientID %>");

          switch (height) {
              case 1024:
                   //here i need set the chart height and width
                  break;

              case 960:

                  break;

              case 864:

                  break;
              case 768:

                  break;
              case 720:

                  break;
              case 600:

                  break;
          }
      }

I'm getting null if I use the $find.
but I If I do like var chrtObject = $get("<%= trndChrt.ClientID %>");
I'm getting the object but not able to see height and width properties.
pls help me in this

[Ves]

Hello Ram,

In order to update the chart size on the client side you actually need to find the image and set its width and height. Here is an example:

window.onload = function onLoad(s, e) {
    var chart = $get("<%= RadChart1.ClientID %>");
    var image = chart.firstElementChild;
    image.width = 800;
    image.height = 600;
}

Best regards,
Ves
the Telerik team

[Ram]

If I call exactly how you were doing If getting chart undefined.
how to call that method exactly.
pls say some more clearly

I tried as follows.
its increasing the height and width.
but chart become blur and not as good as original size.
And I have some content after the chart and that is not moving down instead its overlaping and appearing on the chart itself.
I think when i change the height its not changing the radcchart height.
How cloud I solve this pls help me as early as possible.
I tried like as below

var chart = $get("<%= trndChrt.ClientID %>");
         var chartimg = chart.getElementsByTagName("img")[0];
         chartimg.style.setAttribute("width",700 + "px");
         chartimg.style.setAttribute("height",300 + "px");

[Ves]

Hello Ram,

Apart from its zoom/scroll feature, RadChart is just an image rendered on the server and sent to the client with no client-side functionality. So indeed, the above suggestion is only valid for resizing the image within the browser, which might lead to the effects you have observed. If you need to re-render the chart with the new dimensions, this has to be done on the server side. You can find this task discussed and demonstrated in this code library.


Best regards,
Ves
the Telerik team