asp.net sizing the non-sizable - asp.net

I'm using the asp.net charting control, and liking it for the most part. However, I would like my charts to size with the panels they are contained in. I cannot set the width of the chart to 100%, I have to give them an exact size. I don't want to stretch and distort the rendered chart image.
Does anyone have an example of how I might do this, or could you point me in the right direction?

If you don't want to stretch generated chart you can load it via ajax and pass size of current image container in an ajax request (e.g. www.site.com/generateCoolChart?height=200&width=300 ). But size of the container may be changed after the user change size of the browser so your chart may become bigger than your container.

With sizing requirement I would consider using flash or silverlight or javascript based charts like amCharts or other. I mean anything not generating static images. These are generated on the client so they can easily adopt to the dedicated space.

Related

how to have xsp-responsive-modal centered

I have a very long XPage and use dialog boxes on multiple locations on it. I note that the xp:dialogbox control requires to navigate up to the xpage in order to be able to read it.
Is it possible to have it displayed (sometimes) centered?
The content (height) of the dialogs differ for each case?
With a bootstrap theme, the height from the top is managed via CSS, as a top margin. You can override that in your application-level stylesheet and possibly on each dialog. I don't think you can calculate the height of the dialog on-the-fly, but you should be able to identify the page height and calculate based on the approximate height you expect the dialog to be. I'm not sure if the browser will repaint if the user changes the height of the browser window, but if that is the case that's a browser restriction, not an XPages one.

what class is required from bootstrap to size the asp.net chart

I am new to web technologies. I added an asp.net chart to a website and it is working fine. In order to make it responsive I added bootstrap. The bootstrap behaves fine for buttons etc but not for chart. I am unable to size the chart. If I set the width and height on pixel size then it is not responsive. Is it possible to make the asp.net chart responsive using bootstrap. Or should I get a javascript charting library like highchart or googlecharts etc.thanks.
I don't believe you can make the ASP.NET chart responsive. Since it generates images, but generates rendered from the server, it would have to make other sizing available and I don't think that it does out of the box. The best you can do is target a smaller size and get it to fit within the smallest available viewport you are targeting. This can be the problem with some of the ASP.NET controls.
Using a client-side framework that can render the graphics during the client side processing would be much better because you can usually then scale appropriately.

Resizing an ASP.Net image to scale in Visual Studio

I am working on a Visual Studio master page, and trying to add the company logo.
I have imported the JPEG into my project, added an Image control and have set the ImageUrl property to my JPEG.
The problem is my image is massive! I am trying to resize it to scale, by holding down shift (which works in other MS products) but it's not working properly, and when trying to resize manually, I just can't get it to look right.
So my question is, how do I resize an image to scale in ASP.Net using Visual Studio 2010?
Visual studio is not for image scaling. You can scale the image on design view. After spefying image url for image you can re-size it as you do in powerpoint. But this is not a good practice as this will add height and width tag with specific value in your html for image.
So re-size the image using any tool as per your need and use it as this will make the page lighter.
If I'm understanding correctly, you want to change the dimensions of an image in Visual Studio.
Changing the dimensions of the image will just make the image appear smaller; it won't actually resample it and reduce its size in bytes. For both these reasons, take the extra minute or two to use another program to properly resize the image.
Resampling: smooths the image according to an algorithm and properly handles things like edges
Reducing size in bytes: this one is obvious. Your post is tagged with ASP.Net; you don't want a "massize" image being sent over the network.

ASP.NET use Ajax to add scrollbar to the picture

I need to add a scroll to "one" picture and load it asynchronously.. with the help of scroll bar...
The picture is bigger than the div area so need to scroll. I can use "overflow: scroll " but it loads the whole picture whereas my requirement is to load the picture as a user moves the scrollbar.
thanks
The would help to load a page with multiple large images in the manner you are describing
Lazy Load plugin
It isn't built for one giant sized image which is what you want. However it should be an easy matter to slice you image into reason sized regions or tiles and use this loader.
Out of interest really - here is a utility that will automatically slice up images to protect them from theft. I occurs to me that you could combine the two if you didn't fancy manually splitting the image - or just wanted to be a bit of a coding hero. In any case the link shows that sliced and recombined images look perfectly fine. Users can't tell if it's done right.

Flex/AIR layout for presentation tool (resize logic, aspect ratios etc.)

I'm developing a presentation tool for AIR (to be used together with, or as a replacement to, PowerPoint) but I'm quite a newcomer to flex layouting.
As you can see from the image, the presenter can open various apps from the main window.
Each of these apps open up in new windows which have different visual characteristics; some use the main content area to show graphics, others bullet points. Most app windows have buttons and view stacks with embedded Flash assets (using s:SpriteVisualElement).
My questions are the following:
1a. When developing a PowerPoint-like presentation tool with Flex, which layout type (basic, vertical etc.) will provide most flexibility?
1b. How do I make sure no clipping occurs on various projector screens - which aspect ratio should I have in mind?
2a. How can I resize children sprites in the SpriteVisualElement container proportionally to the window resolution?
2b. And where do I place this resize logic - on each component (sprite) with resizeHandlers or in one resizeHandler / window?
Please use the comment thread if you want me to elaborate further. Thanks.
Since you're new to Flex, I strongly reading up on the Flex Component LifeCycle.
1a. When developing a PowerPoint-like presentation tool with
Flex, which layout type (basic,
vertical etc.) will provide most
flexibility?
The layout you choose will depend on what you want to display. I don't see layouts as "Flexible". They do their job and position their elements appropriately. I can easily envision using all types of layouts in such a complicated application, each for different purposes.
1b. How do I make sure no clipping occurs on various projector screens -
which aspect ratio should I have in
mind?
I'm not quite sure I understand what this question means, but I take it to mean you want to avoid the presence of scroll bars in your app. To do that, you'll have to develop layout code that sizes and positions your children so that they do not extend past the height and width of your available content space. In Flex 3 (Halo) architecture, this would be done by writing an updateDisplayList() method for your component. In the Flex 4 (Spark) architecture, this would probably be done by writing an updateDisplayList() method for your skin class.
2a. How can I resize children sprites in the SpriteVisualElement
container proportionally to the window
resolution?
I believe my above answer already addresses this.
2b. And where do I place this resize logic - on each component
(sprite) with resizeHandlers or in one
resizeHandler / window?
In a resize handler, I would most likely use invalidateSkinState and/or invalidateDisplayList. The resizing code would be in the skin and/or updateDisplayList.

Resources