ASE Home Page Products Download Purchase Support About ASE
ChartDirector Support
 Forum HomeForum Home   SearchSearch

Message ListMessage List     Post MessagePost Message

  How to create graphics propotional to the size of browser screen?
Posted by Vincent Chang on Jul-11-2018 03:28
| Reply | Monitor
Hi,

Instead of creating charts with fix center position and size (donut charts for example), is there a way to show the charts proportional to the size of the browser/screen? We are looking for a way that big or small screens see the same result.

Thanks

Vincent

  Re: How to create graphics propotional to the size of browser screen?
Posted by Peter Kwan on Jul-11-2018 21:15
| Reply | Monitor
Hi Vincent,

You can try our web page below. It is a responsive design and the chart will resize based on the browser window size.

https://www.advsofteng.com/gallery_map.html

Basically, you just need to create the chart for a "normal" (or large) screen size, then resize it to fit the browser window, just like how your resize other images on your web page. You may use CSS if you like. If you look at the HTML source of the above page, you can see the CSS is like:

#WebChartViewer1 { width:100%; height:auto; max-width:600px; border-width:0px; margin-right:45px;}

So the chart width is just 100% of the container width. If the container is smaller, the chart will be smaller.

If you are using image map, another thing to note is that you would need to resize the image map as well. See the setAutoResizeImageMap code at:

https://www.chartdir.com/forum/download_thread.php?bn=chartdir_support&thread=1519637149#N1524567127

The example in our web page is a normal PNG chart image, while the above link is using a SVG chart image. Note that if you use SVG, you also need to use the custom attribute 31 and 32 for SVG image map resizing compatibility with IE 11.

Hope this can help.

Regards
Peter Kwan

  Re: How to create graphics propotional to the size of browser screen?
Posted by Vincent Chang on Jul-12-2018 08:45
| Reply | Monitor
Hi Peter,

Thank you for the info, I will go through the samples you provided.

Vincent