Page 1 of 1

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

Posted: Wed Aug 10, 2022 9:09 am
by 20091735
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.

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

Posted: Wed Aug 10, 2022 10:03 am
by 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
Screenshot from 2022-08-10 12-01-36.png (122.92 KiB) Viewed 5861 times
Please let us know, with code examples if possible, what exactly you would like to achieve.

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

Posted: Thu Aug 11, 2022 7:29 am
by 20091735
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 291 times

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

Posted: Thu Aug 11, 2022 10:06 am
by 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

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

Posted: Fri Aug 19, 2022 2:06 am
by 20091735
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.

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

Posted: Mon Aug 22, 2022 3:47 pm
by 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

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

Posted: Thu Aug 25, 2022 5:11 am
by 20091735
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!

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

Posted: Fri Sep 02, 2022 4:00 am
by 20091735
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.

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

Posted: Fri Sep 02, 2022 8:37 am
by Christopher
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.

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

Posted: Mon Sep 05, 2022 4:30 pm
by 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