Responsive (auto-size) charting in .NET website project

[vfc]

Understood from https://www.steema.com/entry/158/Responsive_Charting that TeeChart's best-fit sizing can fit to a variety of screen size automatically, can I know how to enable this feature? Does this mean that the charts can automatically resize themselves according to the screen/window size?

I am using .NET framework 4, Steema.TeeChart.NET version 4.2022.7.14 and Visual Studio 2019 (C#) to develop a website project.

[Christopher]

Hello,

We have a Website project example in one of our GiHub repos for .NET Framework 4, which you can see here:
https://github.com/Steema/TeeChart-NET- ... %20WebDemo

Are any of the techniques shown there helpful to you? We would especially recommend working with our Javascript-HTML5 chart:

Screenshot from 2022-08-10 12-01-36.png (122.92 KiB) Viewed 11917 times

Please let us know, with code examples if possible, what exactly you would like to achieve.

[vfc]

I would like the chart in the webform to be automatically sized to fit the screen. Does TeeChart have this feature?
It would be even better if it can automatically adjust based on the window or container size.

Attached a webform consisting a simple TeeChart.

Default.zip

aspx page and c# code of the web form

(2.33 KiB) Downloaded 955 times

[Marc]

Hello,

The resize can be fully automated if the render format is javascript. I've added resize code to the Line example here:

https://github.com/Steema/TeeChart-NET- ... Chart.aspx
https://github.com/Steema/TeeChart-NET- ... rt.aspx.cs

The example adds a Window resize event to the page script, calls it once on chart load and then calls on every following resize that may occur.

For static image format, as the Chart is created serverside it needs to know the dimension before sizing, so the page dimensions would need to be fed into the render process and the page chart tag size modified. I'll have a think about that and add a post to this thread if I can articulate a workable example.

Regards,
Marc Meumann

[vfc]

Hello,

Can I have the sample codes when there are more than one chart in the same page (perhaps 3)? The charts couldn't show when I set their picture format to "JScript".
Thanks.

[Marc]

Hello,

I see a limitation with the use of customcode, that applies universally to each chart in the page (whereas we'd want the scope to run to just the draw method of the chart calling it). We'll take a look at that, In other respects it appears to plot ok. An example attached here for two charts on the page.

Regards,
Marc

[vfc]

Hello,

Can I know if some of the formatting we did in code behind (C#) might be overwritten or ignored when we render the chart in javascript?
For example, series event (GetSeriesMark), webchart tool (GetHTMLMap) and others that have been applied in code behind are missing when we render the chart in javascript.

If this is the case, can I have the solution to remain the formatting/features that have been set in code behind while still have the chart rendered in javascript (for the auto-size feature)?

Thanks!

[vfc]

Hello,

Can I know if some of the formatting we did in code behind (C#) might be overwritten or ignored when we render the chart in javascript?
For example, series event (GetSeriesMark), webchart tool (GetHTMLMap) and others that have been applied in code behind are missing when we render the chart in javascript.

If this is the case, can I have the solution to remain the formatting/features that have been set in code behind while still have the chart rendered in javascript (for the auto-size feature)?

Thanks!

Can I have the reply for this? My charts are all drawn in .NET and now we would like to add the auto-size hence includes JavaScript. However, some of the features we added are not working now. For example, series event, webchart tool and others.

[Christopher]

Hello,

Can I have the reply for this? My charts are all drawn in .NET and now we would like to add the auto-size hence includes JavaScript. However, some of the features we added are not working now. For example, series event, webchart tool and others.

Apologies for the delay on this one. Marc will be back in the office on Monday and I'll remind him to elaborate a response for you.

[Marc]

Hello,

Some formatting end events setup for static charts are not applicable to Javascript charts. Additional, interactive code for javascript charts is normally added via the customcode property of javascript export to run clientside. There are several examples in the webdemo example project. Series hotspot for example, is far more sophisticated when run for the javascript chart.

For example this chart shows mouseover sensitivity to create marks:
http://www.steema.net/TeeChartForNET/In ... Chart.aspx

If the migration to javascript is too costly in time for your current project then you could consider remaing with the existing formats but you'll need to look at ways of getting the page-sized chart dimensions to the page_load cycle of the chart. If you can get you variables to there, then the following code will update the chart dimensions for that page instance:

Code: Select all

[code]Unit unW = new Unit(1400, UnitType.Pixel);
WebChart1.Width = unW;

Unit unH = new Unit(900, UnitType.Pixel);
WebChart1.Height = unH;

[/code]

where 1400 and 900 would be replaced with your variable values. There are references of ways to do that, including the placing of labels (that could be hidden) on the page to extract page dimensions. The limitation you face is that page javascript is loaded after the server has completed its load cycle, requiring that you'd need to invoke a postback with your values.

I've looked at a few ways of doing that and believe it possible but haven't had enough time available right now to follow it through. (see Page.GetPostBackEventReference https://docs.microsoft.com/en-us/dotnet ... mework-4.8)

Regards,
Marc