locked
Is it possible to have a .NET chart auto-resize to fill area on a page? RRS feed

  • Question

  • Currently, if I set the Height or Width properties of my .NET chart to a percentage I will get the follwing error:

    Chart height must be set in pixels

    Is there a way to auto-resize the chart either with percentages or another way?  Do I have to use something like JavaScript on the client to do something like this?

    Thanks!

    Thursday, April 2, 2009 8:28 PM

Answers

  • Ok, I have finished the code for this and it works pretty well.  1st off lets start with the JavaScript.  Basically we need to know when the browser has completed resizing so we can then fire a JS function that will intitiate the resize.  The following JS function 'ResizeBrowserWindowHandler' should be wired up to the 'onResize' for the page you are working with.

    *********************************************************************************************************/
    /* The following JS function will fire onResize and fire resizeComplete 500ms after resize was initiated */
    
    //Note:  The onresizeend event is NOT applicable to a browser window and that is why the need
    //exsits to have a timer fire after the browser initiates a browser resize event.
    
    var resizeTimeout = undefined;
    var resizeInProgress = false;
    
    //This function is called after the timer elapsed called upon a onResize event
    function resizeComplete() {
        //Clear the timeout and the flag tracking it.
        clearTimeout(resizeTimeout);
        resizeInProgress = false;
    
        //This is the spot to run a custom function after the
        //browser has completed resizing
    }
    
    
    //This function is called unpon a window.onresize() event firing.  Because IE and Firefox handle
    //this differently, they have to be handled differently.  IF fires the onresize multiple times
    //while FireFox only fires it once after the browser has completed resizing.
    function ResizeBrowserWindowHandler() {
        if (isBrowser("IE") && resizeInProgress == false) {
        
            if (resizeTimeout != undefined) {
                clearTimeout(resizeTimeout);
            }
            resizeTimeout = setTimeout("resetSize();", 500);
        }
        else if (isBrowser("FF")) {
            resetSize();
        }
    }
    
    
    //This function will handle event from a resize of the browser window according to browser type
    function resetSize() {
    
        if (isBrowser("IE")) {
            //Do not fire the timer if the window has not resized.  This event will actually
            //get called 
        
            //Window is still being resized, so set timer that will elapse once resize is complete
            clearTimeout(resizeTimeout);
            resizeTimeout = setTimeout("resizeComplete();", 1000);
            //Indicate that the browser resize is in progress, so the timer continues to reset
            resizeInProgress = true;
    
        }
        else if (isBrowser("FF")) {
        //No timer needs to be set for FireFox because its onResize only fires once after 
        //the browser completes resizing which is the behavior IE lacks.
        }
    }
    
    //This function will determine if the browser is IE or FireFox
    function isBrowser(which) {
        var toCheck;
        switch (which) {
            case "IE": toCheck = "MSIE";
                break;
            case "FF": toCheck = "Firefox";
                break;
        }
        if (undefined != toCheck) {
            return (navigator.userAgent.indexOf(toCheck) != -1)
        }
        return false;
    }
    
    
    //This is where the function above gets wired up
    window.onresize = ResizeBrowserWindowHandler;
    
    
    /*										End JS Group										        */
    /****************************************************************************************************/
    Next, we need the custom function that the resizeComplete() JS function calls to raise a server-side function to request a new chart image.  1st we need (2) hidden fields to store the height and width available for the area containing the charts (a <Div> or whatever). Also, you want your charts to be placed inside an AJAX UpdatePanel (unless you want a full page post back), and then we need the JS to raise a server side event in a partial page postabck.

    The easiest way to do this is to raise the click event of a hidden button via its 'UniqueID' property.  Here is the ASP.NET code for the hidden fields and button (they should be inside the UpdatePanel that houses your charts):

                                   <asp:Button id="btnHidden_Charts" runat="server" style="display:none;"/>
                                   <asp:HiddenField id="hfChartHeight" runat="server" />
                                   <asp:HiddenField id="hfChartWidth" runat="server" />
    Now since my ASP.NET page is a content page, I don;t like to hardcode the ID's of the controls in the HTMl so I expose them via server side properties like below:

        Protected ReadOnly Property HiddenFieldChartHeightControlID() As String
            'This returns the ClientID of the hidden button indside the 'Charts' UpdatePanel
            Get
                Me.EnsureChildControls()
                Return Me.hfChartHeight.ClientID
            End Get
        End Property
    
        Protected ReadOnly Property HiddenFieldChartWidthControlID() As String
            'This returns the ClientID of the hidden button indside the 'Charts' UpdatePanel
            Get
                Me.EnsureChildControls()
                Return Me.hfChartWidth.ClientID
            End Get
        End Property
    
        Protected ReadOnly Property HiddenButtonChartsControlID() As String
            'This returns the UniqueID of the hidden button indside the 'Charts' UpdatePanel
            Get
                Me.EnsureChildControls()
                'UniqueID MUST be returned in order for the buttons events to be callable by the partial postbacks.
                Return Me.btnHidden_Charts.UniqueID
            End Get
        End Property
        Protected ReadOnly Property ChartingDivContainerControlID() As String
            'This returns the ControlID of the 'outer' DIV container containing the .NET charts on the page
            Get
                Me.EnsureChildControls()
                Return Me.ChartingContainer.ClientID
            End Get
        End Property


    I then expose these ultimately to the JS files via Global JS varibales in the HTML behind the .aspx content page:

    <script type="text/javascript">
    
       //These JS variables expose page class properties.  It is a convient way to expose control
       //id's via page variables to JavaScript functions on this page or in JavaScriptFunctions.js.
       //This method works really well for exposing the control ID's of controls in an .aspx ContentPage.
      

    var

     

    mChartingDivContainerControlID = '<%= ChartingDivContainerControlID %>'; var mHiddenButtonChartsControlID = '<%= HiddenButtonChartsControlID %>'; var mHiddenFieldChartHeightControlID = '<%= HiddenFieldChartHeightControlID %>'; var mHiddenFieldChartWidthControlID = '<%= HiddenFieldChartWidthControlID %>'; </script>

    Now I can create a custom JS function that will get the new height and width measurements and then raise a server side event whcih can extract them.  Here is the JS function that is called from the resizeComplete JS function:

    function SetPageChartSizes(HiddenFieldChartHeightControlID, HiddenFieldChartWidthControlID, UpdatePanelControlID) {
    
        //1. Get the current total screen height and width.  This will be used to determine if the screen
        //size has actually changed and the charts DO need resized, or if another control fired the onResize.
        //In the case where the browser window had not changed then no resize of the charts is needed.
        var newScreenWidth = 0
        var newScreenHeight = 0;
        if (typeof (window.innerWidth) == 'number') {
            //Non-IE
            newScreenWidth = window.innerWidth;
            newScreenHeight = window.innerHeight;
        }
        else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
            //IE 6+ in 'standards compliant mode'
            newScreenWidth = document.documentElement.clientWidth;
            newScreenHeight = document.documentElement.clientHeight;
        }
        else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
            //IE 4 compatible
            newScreenWidth = document.body.clientWidth;
            newScreenHeight = document.body.clientHeight;
        }
       
       
        //2. extract the current size of the <DIV> holding the charts
        var newDivHeight = 0;
        var newDivWidth = 0;
    
        var chartDivObj = document.getElementById(mChartingDivContainerControlID);
        newDivHeight = chartDivObj.offsetHeight;
        newDivWidth = chartDivObj.offsetWidth;
    
        //3. Make the size of the charts slightly smaller than the <DIV> and set the hidden field values.
        //   These will be used server side to get a new chart image from the server based on the sizes set.
        var hfHeightObj = document.getElementById(HiddenFieldChartHeightControlID);
        var hfWidthObj = document.getElementById(HiddenFieldChartWidthControlID);
    
        //4. This is where the magic happens to determine the size of the chart that will be requested from the server
        hfHeightObj.value = (newDivHeight - 20);
        hfWidthObj.value = (newDivWidth - 4);
    
        //5. Call JS function that will invioke the control in the UpdatePanel passed in which
        //will fire its wired up server-side event in a partial page postback.
        //ONLY make the call if the screen size is different from the last time this function was called to reduce overhead.
        //There are other controls like menus and such that inadvertanely fire the 'onResize' event, when the browser is not actual resized.
        if ((newScreenHeight != PreviousScreenHeight) && (newScreenWidth != PreviousScreenWidth)) {
            //alert('DIFFERENT: newScreenHeight: ' + newScreenHeight + 'PreviousScreenHeight: ' + PreviousScreenHeight + 'newScreenWidth: ' + newScreenWidth + 'PreviousScreenWidth: ' + PreviousScreenWidth);
            DoPartialPostBack(UpdatePanelControlID);
        }
    
        //6. Set global variables that will be used for comparison the next time this function is called.
        PreviousScreenHeight = newScreenHeight
        PreviousScreenWidth = newScreenWidth
                
    }
    Here is the server side code that is raised from the JS:

        Protected Sub btnHidden_Charts_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnHidden_Charts.Click
    
            Try
                Dim ChartHeight As Integer = 0
                Dim ChartWidth As Integer = 0
    
                ChartHeight = Integer.Parse(Me.hfChartHeight.Value)
                ChartWidth = Integer.Parse(Me.hfChartWidth.Value)
    
                PopulateCharts(ChartHeight, ChartWidth)
    
            Catch ex As Exception
    
            End Try
    
        End Sub
    The function above to 'PopulateCharts' is nothing more than setting up the chart properties server-side with the height and width passed in.  Simply setting the chart properties and re-binding the data will request a new chart image from the server which will be updated on the page!  The end result is a new chart (or charts) are requested from the server without postback each time the screen is resized.  You may also want to call your custom JS function 'SetPageChartSizes' in the 'onLoad' event as well, so the initial size is set properly too.  I even added a 'Loading...' .gif from an AJAX UpdateProgress control to overlay the control while updating which looks slick.

    Your code may need to be modified slightly from this, but it shows all of the main pieces to implement an auto-reszing chart without a full postback.  Hopefully this helps others going forward!
    • Marked as answer by atconway Wednesday, April 29, 2009 2:45 PM
    Wednesday, April 29, 2009 2:44 PM

All replies

  • In order to resize chart, you need to get a new chart image from the server. You cannot just scale the image to fit new size, because it will degrade the quality of the image.

    Alex.
    http://blogs.msdn.com/alexgor
    Friday, April 3, 2009 6:22 PM
  • Alex-

    Thank you for responding; do you have an example of how to 're-fetch' the chart at runtime from the server based on the size I would like?

    Thank you,
    Friday, April 3, 2009 6:59 PM
  • Any chart in the Sample Framework "re-fetch" the chart when you change one of the parameters.

    Alex.
    http://blogs.msdn.com/alexgor
    Tuesday, April 7, 2009 3:02 PM
  • Well I am actively using the "ChartSamples" solution, and I don't see any method on the chart in any example to "re-fetch" or "re-draw" or anything along those lines.

    Is what you are saying is that if I do a postback and make any changes to the chart, that the chart will be re-fetched automatically?  If the answer is "yes" then I need to fire a server side event each time the browser is resized that will change the height and width of the chart. What I am thinking to do is to fire a server-side event from JavaScript when the "onresizeend" event is raised by the browser window. Then upon completion of that event, the new chart should be displayed, correct?

    Thursday, April 9, 2009 2:21 PM
  • Correct, you need a postback to update the chart. Using 'onresizeend' sounds like a plan. Do you still have an issue that chart is not updated?

    Alex.
    http://blogs.msdn.com/alexgor
    Thursday, April 9, 2009 2:51 PM
  • I am working on a solution to this and have it about 95% complete.  I want to post the code, because I think a lot of perople will need it in the future.  With so many different screen resolutions nowadays, providing a static size in the HTML at design time might work for a while, but could either overgrow the control or undersize it and leave a lot of white space without some dynamic resizing.

    The only piece I am hung up on right now is determing a way (most likely in JavaScript) to know when the browser has completed resizing.

    The 'onresize' event for the <body> tag almost works well, but it fires prior to the entire browser being resized.  Then there is the 'onresizeend' event, but I think the naming convention confuses developers, as it has a slightly different function (from MSDN):

    Fires when the user finishes changing the dimensions of the object in a control selection.

    That does not fire when the browser completes resizing alone.  I need some way of determining when the browser has finished resizing, so I can run some more JavaScript.  I read a couple of posts that state to fire a timer on the 'onresize' event and then have it call another custom onresizecomplete type event that should be indicative that the browser has finished resizing, but I am not sure and I need some clarification about that.

    If anyone has any suggestions about determining when the browser has completed resizing, so I can complete the code to dynamically resize the .net chart please speak up.

    Otherwise I will post the code shortly that answers the original question.

    Thank you,

    Wednesday, April 22, 2009 8:17 PM
  • Ok, I have finished the code for this and it works pretty well.  1st off lets start with the JavaScript.  Basically we need to know when the browser has completed resizing so we can then fire a JS function that will intitiate the resize.  The following JS function 'ResizeBrowserWindowHandler' should be wired up to the 'onResize' for the page you are working with.

    *********************************************************************************************************/
    /* The following JS function will fire onResize and fire resizeComplete 500ms after resize was initiated */
    
    //Note:  The onresizeend event is NOT applicable to a browser window and that is why the need
    //exsits to have a timer fire after the browser initiates a browser resize event.
    
    var resizeTimeout = undefined;
    var resizeInProgress = false;
    
    //This function is called after the timer elapsed called upon a onResize event
    function resizeComplete() {
        //Clear the timeout and the flag tracking it.
        clearTimeout(resizeTimeout);
        resizeInProgress = false;
    
        //This is the spot to run a custom function after the
        //browser has completed resizing
    }
    
    
    //This function is called unpon a window.onresize() event firing.  Because IE and Firefox handle
    //this differently, they have to be handled differently.  IF fires the onresize multiple times
    //while FireFox only fires it once after the browser has completed resizing.
    function ResizeBrowserWindowHandler() {
        if (isBrowser("IE") && resizeInProgress == false) {
        
            if (resizeTimeout != undefined) {
                clearTimeout(resizeTimeout);
            }
            resizeTimeout = setTimeout("resetSize();", 500);
        }
        else if (isBrowser("FF")) {
            resetSize();
        }
    }
    
    
    //This function will handle event from a resize of the browser window according to browser type
    function resetSize() {
    
        if (isBrowser("IE")) {
            //Do not fire the timer if the window has not resized.  This event will actually
            //get called 
        
            //Window is still being resized, so set timer that will elapse once resize is complete
            clearTimeout(resizeTimeout);
            resizeTimeout = setTimeout("resizeComplete();", 1000);
            //Indicate that the browser resize is in progress, so the timer continues to reset
            resizeInProgress = true;
    
        }
        else if (isBrowser("FF")) {
        //No timer needs to be set for FireFox because its onResize only fires once after 
        //the browser completes resizing which is the behavior IE lacks.
        }
    }
    
    //This function will determine if the browser is IE or FireFox
    function isBrowser(which) {
        var toCheck;
        switch (which) {
            case "IE": toCheck = "MSIE";
                break;
            case "FF": toCheck = "Firefox";
                break;
        }
        if (undefined != toCheck) {
            return (navigator.userAgent.indexOf(toCheck) != -1)
        }
        return false;
    }
    
    
    //This is where the function above gets wired up
    window.onresize = ResizeBrowserWindowHandler;
    
    
    /*										End JS Group										        */
    /****************************************************************************************************/
    Next, we need the custom function that the resizeComplete() JS function calls to raise a server-side function to request a new chart image.  1st we need (2) hidden fields to store the height and width available for the area containing the charts (a <Div> or whatever). Also, you want your charts to be placed inside an AJAX UpdatePanel (unless you want a full page post back), and then we need the JS to raise a server side event in a partial page postabck.

    The easiest way to do this is to raise the click event of a hidden button via its 'UniqueID' property.  Here is the ASP.NET code for the hidden fields and button (they should be inside the UpdatePanel that houses your charts):

                                   <asp:Button id="btnHidden_Charts" runat="server" style="display:none;"/>
                                   <asp:HiddenField id="hfChartHeight" runat="server" />
                                   <asp:HiddenField id="hfChartWidth" runat="server" />
    Now since my ASP.NET page is a content page, I don;t like to hardcode the ID's of the controls in the HTMl so I expose them via server side properties like below:

        Protected ReadOnly Property HiddenFieldChartHeightControlID() As String
            'This returns the ClientID of the hidden button indside the 'Charts' UpdatePanel
            Get
                Me.EnsureChildControls()
                Return Me.hfChartHeight.ClientID
            End Get
        End Property
    
        Protected ReadOnly Property HiddenFieldChartWidthControlID() As String
            'This returns the ClientID of the hidden button indside the 'Charts' UpdatePanel
            Get
                Me.EnsureChildControls()
                Return Me.hfChartWidth.ClientID
            End Get
        End Property
    
        Protected ReadOnly Property HiddenButtonChartsControlID() As String
            'This returns the UniqueID of the hidden button indside the 'Charts' UpdatePanel
            Get
                Me.EnsureChildControls()
                'UniqueID MUST be returned in order for the buttons events to be callable by the partial postbacks.
                Return Me.btnHidden_Charts.UniqueID
            End Get
        End Property
        Protected ReadOnly Property ChartingDivContainerControlID() As String
            'This returns the ControlID of the 'outer' DIV container containing the .NET charts on the page
            Get
                Me.EnsureChildControls()
                Return Me.ChartingContainer.ClientID
            End Get
        End Property


    I then expose these ultimately to the JS files via Global JS varibales in the HTML behind the .aspx content page:

    <script type="text/javascript">
    
       //These JS variables expose page class properties.  It is a convient way to expose control
       //id's via page variables to JavaScript functions on this page or in JavaScriptFunctions.js.
       //This method works really well for exposing the control ID's of controls in an .aspx ContentPage.
      

    var

     

    mChartingDivContainerControlID = '<%= ChartingDivContainerControlID %>'; var mHiddenButtonChartsControlID = '<%= HiddenButtonChartsControlID %>'; var mHiddenFieldChartHeightControlID = '<%= HiddenFieldChartHeightControlID %>'; var mHiddenFieldChartWidthControlID = '<%= HiddenFieldChartWidthControlID %>'; </script>

    Now I can create a custom JS function that will get the new height and width measurements and then raise a server side event whcih can extract them.  Here is the JS function that is called from the resizeComplete JS function:

    function SetPageChartSizes(HiddenFieldChartHeightControlID, HiddenFieldChartWidthControlID, UpdatePanelControlID) {
    
        //1. Get the current total screen height and width.  This will be used to determine if the screen
        //size has actually changed and the charts DO need resized, or if another control fired the onResize.
        //In the case where the browser window had not changed then no resize of the charts is needed.
        var newScreenWidth = 0
        var newScreenHeight = 0;
        if (typeof (window.innerWidth) == 'number') {
            //Non-IE
            newScreenWidth = window.innerWidth;
            newScreenHeight = window.innerHeight;
        }
        else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
            //IE 6+ in 'standards compliant mode'
            newScreenWidth = document.documentElement.clientWidth;
            newScreenHeight = document.documentElement.clientHeight;
        }
        else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
            //IE 4 compatible
            newScreenWidth = document.body.clientWidth;
            newScreenHeight = document.body.clientHeight;
        }
       
       
        //2. extract the current size of the <DIV> holding the charts
        var newDivHeight = 0;
        var newDivWidth = 0;
    
        var chartDivObj = document.getElementById(mChartingDivContainerControlID);
        newDivHeight = chartDivObj.offsetHeight;
        newDivWidth = chartDivObj.offsetWidth;
    
        //3. Make the size of the charts slightly smaller than the <DIV> and set the hidden field values.
        //   These will be used server side to get a new chart image from the server based on the sizes set.
        var hfHeightObj = document.getElementById(HiddenFieldChartHeightControlID);
        var hfWidthObj = document.getElementById(HiddenFieldChartWidthControlID);
    
        //4. This is where the magic happens to determine the size of the chart that will be requested from the server
        hfHeightObj.value = (newDivHeight - 20);
        hfWidthObj.value = (newDivWidth - 4);
    
        //5. Call JS function that will invioke the control in the UpdatePanel passed in which
        //will fire its wired up server-side event in a partial page postback.
        //ONLY make the call if the screen size is different from the last time this function was called to reduce overhead.
        //There are other controls like menus and such that inadvertanely fire the 'onResize' event, when the browser is not actual resized.
        if ((newScreenHeight != PreviousScreenHeight) && (newScreenWidth != PreviousScreenWidth)) {
            //alert('DIFFERENT: newScreenHeight: ' + newScreenHeight + 'PreviousScreenHeight: ' + PreviousScreenHeight + 'newScreenWidth: ' + newScreenWidth + 'PreviousScreenWidth: ' + PreviousScreenWidth);
            DoPartialPostBack(UpdatePanelControlID);
        }
    
        //6. Set global variables that will be used for comparison the next time this function is called.
        PreviousScreenHeight = newScreenHeight
        PreviousScreenWidth = newScreenWidth
                
    }
    Here is the server side code that is raised from the JS:

        Protected Sub btnHidden_Charts_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnHidden_Charts.Click
    
            Try
                Dim ChartHeight As Integer = 0
                Dim ChartWidth As Integer = 0
    
                ChartHeight = Integer.Parse(Me.hfChartHeight.Value)
                ChartWidth = Integer.Parse(Me.hfChartWidth.Value)
    
                PopulateCharts(ChartHeight, ChartWidth)
    
            Catch ex As Exception
    
            End Try
    
        End Sub
    The function above to 'PopulateCharts' is nothing more than setting up the chart properties server-side with the height and width passed in.  Simply setting the chart properties and re-binding the data will request a new chart image from the server which will be updated on the page!  The end result is a new chart (or charts) are requested from the server without postback each time the screen is resized.  You may also want to call your custom JS function 'SetPageChartSizes' in the 'onLoad' event as well, so the initial size is set properly too.  I even added a 'Loading...' .gif from an AJAX UpdateProgress control to overlay the control while updating which looks slick.

    Your code may need to be modified slightly from this, but it shows all of the main pieces to implement an auto-reszing chart without a full postback.  Hopefully this helps others going forward!
    • Marked as answer by atconway Wednesday, April 29, 2009 2:45 PM
    Wednesday, April 29, 2009 2:44 PM
  • If you have a blog it will be great to put this sample and description there! I would also love to reference it from my blog...

    Alex.


    http://blogs.msdn.com/alexgor
    Wednesday, April 29, 2009 2:49 PM
  • Absolutely please make a reference!  I do not have a blog currently, but I have always wanted to create one.  Are there any Microsoft provided links/sites where I could set up a developer's blog?
    Wednesday, April 29, 2009 6:08 PM
  • Hi everyone,

    Using atconway's solution I developed a cleaner example using jQuery to catch the resize event of the browser:
     
    //reference to the jQuery library
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    //reference to the jQuery library to catch the browser resize event
    <script src="http://noteslog.com/personal/projects/wresize/1.1/jquery.wresize.js" type="text/javascript"></script>
    //script to resize the chart control
    <script type="text/javascript">
        jQuery(function($) {
                $(window).wresize(SetPageChartSizes<%= Chart.ClientID %>);
                SetPageChartSizes<%= Chart.ClientID %>();
            });
                    
            function SetPageChartSizes<%= Chart.ClientID %>() {
                document.getElementById('<%= hfChartWidth.ClientID %>').value = (document.getElementById('<%= updatePanel.ClientID %>').offsetWidth - 4);
                <%=Page.GetPostBackEventReference(btnHidden_Charts)%>;
        }
    </script>
    My chart control, inside an UpdatePanel and a Hidden Button to trigger the Postback:
    <asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <asp:Chart ID="Chart" runat="server" ImageUrl="~/App_Data/_imagecache/ChartPic_#SEQ(300,3)"
                BackColor="236, 243, 248" BackGradientEndColor="White" BackGradientType="TopBottom"
                EnableViewState="True" ImageType="Jpeg" TextAntiAliasingQuality="Normal" >
                <Titles>
                    <asp:Title ShadowColor="32, 0, 0, 0" Font="Trebuchet MS, 14.25pt, style=Bold" ShadowOffset="3"
                        Text="Most Problematic Machines" ForeColor="26, 59, 105">
                    </asp:Title>
                </Titles>
                <Legends>
                    <asp:Legend Enabled="False" IsTextAutoFit="False" Name="Default" BackColor="Transparent"
                        Font="Trebuchet MS, 8.25pt, style=Bold">
                    </asp:Legend>
                </Legends>
                <BorderSkin SkinStyle="Emboss"></BorderSkin>
                <Series>
                    <asp:Series ChartArea="ChartArea" Name="Series1" BorderColor="180, 26, 59, 105"
                        Color="220, 65, 140, 240">
                    </asp:Series>
                </Series>
                <ChartAreas>
                    <asp:ChartArea Name="ChartArea" BackColor="White" ShadowColor="Transparent">
                        <Area3DStyle Rotation="10" Perspective="10" Enable3D="True" Inclination="15" IsRightAngleAxes="False"
                            WallWidth="0" IsClustered="False" />
                        <AxisY LineColor="64, 64, 64, 64">
                            <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />
                            <MajorGrid LineColor="64, 64, 64, 64" />
                        </AxisY>
                        <AxisX LineColor="64, 64, 64, 64">
                            <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />
                            <MajorGrid LineColor="64, 64, 64, 64" />
                        </AxisX>
                    </asp:ChartArea>
                </ChartAreas>
            </asp:Chart>
            <asp:HiddenField ID="hfChartWidth" runat="server"/>
            <asp:Button ID="btnHidden_Charts" runat="server" Style="display: none;" />
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="btnHidden_Charts" EventName="Click" />
        </Triggers>
    </asp:UpdatePanel>
    And finally the code behind to trigger the resize and DataBind of the chart:

            Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
                If Not String.IsNullOrEmpty(hfChartWidth.Value) Then Chart.Width = Integer.Parse(hfChartWidth.Value)
                Chart.DataBind()
                updatePanel.Update()
            End Sub
    This last code may also be in Click button event...

    Hope it help...

    BRGDS


    Guilherme Duarte
    Friday, October 30, 2009 12:28 PM
  • Hi Guilherme Duarte,

    The above JQuery worked nice for resizing the charts dynamically. But one issue I found.

    It resizes nice when we make the browser viewing from smaller to bigger. But it does not work when we start making the browser viewing from bigger size to smaller.

    Could you please have a look to it?

     

    Thanks and Regards,

    Ashfaq Ahmed.H

    Monday, June 27, 2011 5:21 AM