Jump to content
Software FX Community
Bob

Dynamically resizing a chart in response to browser window size change.

Recommended Posts

Hi,

Has any-one found a way to resize a chart when the browser window changes size.

Or perhaps even knowing what the window size is before the chart is drawn so I could set its width.

Or perhaps even knowing after the page is drawn and updating the chart.width in an AJAX panel

I want to avoid having a chart of fixed size catering to those with tiny screens at the expense of those with larger and widscreens. 

I'm using asp.net and ajax but am having some chicken before the egg issues. Any starting points appreciated or being told its just not technically possible.

Cheers Bob.

Share this post


Link to post
Share on other sites

To resize the chart control while resizing the browser you need to set the Height and Width properties to a percentage value and the Sizeable property of the ImageSettings to true. You can try something like this:

Chart1.Height = Unit.Percentage(65);

Chart1.Width =

Unit.Percentage(75);

Chart1.ImageSettings.Sizeable =

true;

Share this post


Link to post
Share on other sites

This approach only works if you are rendering as a .NET Client control. Not as an image.

If you are rendering an image, you are going to need to go back to the server for a new image every time the browser is resized. I would create a timer so that I wait a little bit before requesting a new image to avoid excessive flickering.

You can bring a new chart image, with a new size using AJAX as follows:

protected void Chart1_UserCallback (object sender,UserCallbackEventArgs e)

{

  Chart1.ImageSettings.Width += 100;

  Chart1.ImageSettings.Height += 100;

}

Obviously this is a stupid sample, in reality you will have to calculate in the client what size your chart should be (by calculating the size of its container) and thens sending this as arguments for UserCallback. Details about using the UserCallback Event can be found here:

Q7651001. Chart FX for VS 2005 and AJAX URL: http://support.softwarefx.com/ShowArticleSep.aspx?Type=KB&Product=CfxNet70&Source=http://support.softwarefx.com/kb/765/1/001.htm?_r=1

 

Share this post


Link to post
Share on other sites

I found the issue to be that my chart was enclosed within a <table>

I want to display two charts side by side. I'd like to use the <table> but can't find a way view the charts this way. I understand that when using the unit.percentage() that it is related to the container(in this case a table tag) in which the chart is enclosed. However, I assigned my table a width and height of 100% and still no success. Your help is appreciated.

Share this post


Link to post
Share on other sites

Are you generating the chart as an image? If so, like I explained before, percentage sizes won't work as the size of the chart needs to be know in the server before the image is ever generated and sent to the browser.

Share this post


Link to post
Share on other sites

I too am having this same issue.  I have a chart control in a table, running as a .NET control, and setting the height to Unit.Percentage(100) results in a zero height chart.

The chart cohabitates a table row with a dynamically resizing tree control which is constantly changing the height of the row.  As a result, there are no height specifications other than 100%.  I need a way to resize the chart in response to the dynamic activities of the neighboring control.

Share this post


Link to post
Share on other sites

 The same issue am facing with the image render format. The chart should be re sized based on the resolution as well as the neighbor controls dynamic behavior. I try to send the user callback from onload() method of the body. then am setting the size to the control in user callback. Its not working for me.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...