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

TeeChart for Microsoft Visual Studio .NET, Xamarin Studio (Android, iOS & Forms) & Monodevelop.
Post Reply
vfc
Newbie
Newbie
Posts: 14
Joined: Thu Sep 02, 2021 12:00 am

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

Post by vfc » Wed Aug 10, 2022 9:09 am

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
Guru
Posts: 1603
Joined: Fri Nov 15, 2002 12:00 am

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

Post by Christopher » Wed Aug 10, 2022 10:03 am

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
Screenshot from 2022-08-10 12-01-36.png (122.92 KiB) Viewed 5742 times
Please let us know, with code examples if possible, what exactly you would like to achieve.
Best Regards,
Christopher Ireland / Development & Support
Steema Software
Avinguda Montilivi 33, 17003 Girona, Catalonia
Tel: 34 972 218 797
http://www.steema.com
Instructions - How to post in this forum

vfc
Newbie
Newbie
Posts: 14
Joined: Thu Sep 02, 2021 12:00 am

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

Post by vfc » Thu Aug 11, 2022 7:29 am

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 279 times

Marc
Site Admin
Site Admin
Posts: 1209
Joined: Thu Oct 16, 2003 4:00 am
Location: Girona
Contact:

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

Post by Marc » Thu Aug 11, 2022 10:06 am

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
Steema Support

vfc
Newbie
Newbie
Posts: 14
Joined: Thu Sep 02, 2021 12:00 am

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

Post by vfc » Fri Aug 19, 2022 2:06 am

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
Site Admin
Site Admin
Posts: 1209
Joined: Thu Oct 16, 2003 4:00 am
Location: Girona
Contact:

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

Post by Marc » Mon Aug 22, 2022 3:47 pm

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
Attachments
Multichart.zip
(3.85 KiB) Downloaded 238 times
Steema Support

vfc
Newbie
Newbie
Posts: 14
Joined: Thu Sep 02, 2021 12:00 am

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

Post by vfc » Thu Aug 25, 2022 5:11 am

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
Newbie
Newbie
Posts: 14
Joined: Thu Sep 02, 2021 12:00 am

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

Post by vfc » Fri Sep 02, 2022 4:00 am

vfc wrote:
Thu Aug 25, 2022 5:11 am
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
Guru
Posts: 1603
Joined: Fri Nov 15, 2002 12:00 am

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

Post by Christopher » Fri Sep 02, 2022 8:37 am

Hello,
vfc wrote:
Fri Sep 02, 2022 4:00 am
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.
Best Regards,
Christopher Ireland / Development & Support
Steema Software
Avinguda Montilivi 33, 17003 Girona, Catalonia
Tel: 34 972 218 797
http://www.steema.com
Instructions - How to post in this forum

Marc
Site Admin
Site Admin
Posts: 1209
Joined: Thu Oct 16, 2003 4:00 am
Location: Girona
Contact:

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

Post by Marc » Mon Sep 05, 2022 4:30 pm

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
Steema Support

Post Reply