Set height and width for chart through javascript

Thread is closed for posting
4 posts, 1 answers
  1. Ram
    Ram avatar
    97 posts
    Member since:
    Jun 2011

    Posted 17 Oct 2011 Link to this post

    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
  2. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 20 Oct 2011 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ram
    Ram avatar
    97 posts
    Member since:
    Jun 2011

    Posted 20 Oct 2011 Link to this post

    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");
  5. Answer
    Ves
    Admin
    Ves avatar
    2879 posts

    Posted 25 Oct 2011 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top