Bar chart panning

TeeChart for Microsoft Visual Studio .NET, Xamarin Studio (Android, iOS & Forms) & Monodevelop.
Post Reply
Bank Van Breda
Newbie
Newbie
Posts: 10
Joined: Tue Nov 05, 2019 12:00 am

Bar chart panning

Post by Bank Van Breda » Wed Nov 06, 2019 10:04 am

We are using TeeChart Xamarin Forms nuget package version 4.2019.9.10

Currently our bar chart in the app looks like this:
Screen Shot 2019-11-06 at 10.45.49.png
Screen Shot 2019-11-06 at 10.45.49.png (249.26 KiB) Viewed 28470 times
So we want to allow more bars on the graph and are looking to allow the panning option.
But when I set this option, the user can keep on panning left and right so that the actual graph moves completely out of view... example:
Screen Shot 2019-11-06 at 10.53.56.png
Screen Shot 2019-11-06 at 10.53.56.png (77.68 KiB) Viewed 28470 times
So my question, how can I allow panning, but only so that the panning stops at the first left bar and last right bar?

Secondly even though I now set following code, the graph will not adjust the amount of visible bars.

Code: Select all

BarChart.Chart.Axes.Bottom.Automatic = false;
BarChart.Chart.Panning.Allow = Steema.TeeChart.ScrollModes.Horizontal;
BarChart.Chart.Axes.Bottom.Minimum = 0;
BarChart.Chart.Axes.Bottom.Maximum = 5;
I would like to validate that we have more than 5 years in our dataset and if so restrict the view of the graph to only show 5 and the rest through panning.

Final question, how do I position the graph to the end right bar if panning is active? Currently it will position itself to the first left bar.

Pep
Site Admin
Site Admin
Posts: 3295
Joined: Fri Nov 14, 2003 5:00 am
Contact:

Re: Bar chart panning

Post by Pep » Fri Nov 08, 2019 11:24 am

Hello,
So my question, how can I allow panning, but only so that the panning stops at the first left bar and last right bar?
You can use the following code in order to fix the scrolling to specific min and max :

Code: Select all

		int numValues = 50;

		bar1.FillSampleValues(numValues);
		tChart1.Scroll += TChart1_Scroll;

		// Set range or values to display on Chart
		tChart1.Axes.Bottom.SetMinMax(10, 20);

		private void TChart1_Scroll(object sender, EventArgs e)
		{
			if (tChart1.Axes.Bottom.Maximum > numValues)
				tChart1.Axes.Bottom.SetMinMax(numValues - 10, numValues);
			else
				if (tChart1.Axes.Bottom.Minimum < 0)
					tChart1.Axes.Bottom.SetMinMax(0, 10);
		}
I would like to validate that we have more than 5 years in our dataset and if so restrict the view of the graph to only show 5 and the rest through panning.
Try to sue the following code :

Code: Select all

BarChart.Chart.Axes.Bottom.Automatic = false;
BarChart.Chart.Panning.Allow = Steema.TeeChart.ScrollModes.Horizontal;
BarChart.Chart.Axes.Bottom.SetMinMax(0,5);
Final question, how do I position the graph to the end right bar if panning is active? Currently it will position itself to the first left bar.
I'm not sure what you refer here, but by using the SetMinMax method you should be able specify what values you want to look on the Chart althought the Panning is active. Does this helped ?

Bank Van Breda
Newbie
Newbie
Posts: 10
Joined: Tue Nov 05, 2019 12:00 am

Re: Bar chart panning

Post by Bank Van Breda » Fri Nov 08, 2019 1:52 pm

Hey Pep,

Thank you very much for the detailed responses!
With your examples I'm almost able to get our graph to behave the way we want...

There is only 1 small detail I do not yet understand completely, maybe you can shed some extra light on this too?

So if we look at a filled in chart with only 4 bars we set Chart.Axes.Bottom.Automatic = true. This gives us following result:
Panning03.png
Panning03.png (90.05 KiB) Viewed 28428 times
In other words the chart will put min and max value at the left and right edges of the graph and the bars will be evenly divided.

But when we have more than 4 bars, we set Chart.Axes.Bottom.Automatic = false and I now also put Chart.Axes.Bottom.SetMinMax(serie.Data.Count - 4, serie.Data.Count). This gives us:
Panning01.png
Panning01.png (67.95 KiB) Viewed 28428 times
Panning02.png
Panning02.png (81.15 KiB) Viewed 28428 times
Now first preview will position the graph correctly to only show 4 bars ( because I tweak this with SetMinMax ), but they are not evenly divided and we still see right white space.
Any way to still fix this? So that we have the same look and feel like as if we only have 4 bars... but still allow panning ofcourse?

Cheers

Pep
Site Admin
Site Admin
Posts: 3295
Joined: Fri Nov 14, 2003 5:00 am
Contact:

Re: Bar chart panning

Post by Pep » Fri Nov 08, 2019 2:36 pm

Hello,

I think that the problem is a minor mistake in the code, you use :

Code: Select all

Chart.Axes.Bottom.SetMinMax(serie.Data.Count - 4, serie.Data.Count)
and it should be :

Code: Select all

Chart.Axes.Bottom.SetMinMax(serie.Data.Count - 4, serie.Data.Count-1)
As it starts from 0. This should make the change.

Bank Van Breda
Newbie
Newbie
Posts: 10
Joined: Tue Nov 05, 2019 12:00 am

Re: Bar chart panning

Post by Bank Van Breda » Fri Nov 08, 2019 2:45 pm

Of course and makes total sense :)
Sorry I missed that...

So the amount is perfect, but the bars are still smaller than the automatic generated ones...
Screen Shot 2019-11-08 at 15.43.30.png
Screen Shot 2019-11-08 at 15.43.30.png (79.04 KiB) Viewed 28424 times
Our code does have bar.BarWidthPercent = 60; but this is always set. So even if we have automatic bottom axes true or false.

Pep
Site Admin
Site Admin
Posts: 3295
Joined: Fri Nov 14, 2003 5:00 am
Contact:

Re: Bar chart panning

Post by Pep » Fri Nov 08, 2019 3:17 pm

Ok :)
So the amount is perfect, but the bars are still smaller than the automatic generated ones...
Setting a number of points per page should solve it. Could you please adding :

Code: Select all

tChart1.Chart.Page.MaxPointsPerPage = 4;

Bank Van Breda
Newbie
Newbie
Posts: 10
Joined: Tue Nov 05, 2019 12:00 am

Re: Bar chart panning

Post by Bank Van Breda » Tue Nov 12, 2019 9:15 am

Thx Pep! Works like a charm now.
]Just small side note, even thought this support forum is awesome and the detailed info is perfect. I do miss a lot of extra example code and explanation in the docs about all those different properties and methods.
Because we are only working on MacBooks we can't run the test app to try and tweak properties on the fly.

Bank Van Breda
Newbie
Newbie
Posts: 10
Joined: Tue Nov 05, 2019 12:00 am

Re: Bar chart panning

Post by Bank Van Breda » Tue Nov 12, 2019 9:30 am

Hmm seems there is still 1 problem.
When panning is enabled, the values above the bars are shown out of bound of the graph.
Example attachment, the 4 is shown outside the graph on the left side although the bar itself stops at the left border.
Screen Shot 2019-11-12 at 10.28.42.png
Screen Shot 2019-11-12 at 10.28.42.png (252.39 KiB) Viewed 28416 times

Pep
Site Admin
Site Admin
Posts: 3295
Joined: Fri Nov 14, 2003 5:00 am
Contact:

Re: Bar chart panning

Post by Pep » Thu Nov 14, 2019 10:01 pm

Hello,
you should be able to change the way that Series marks are displayed outside the Chart rect bounds by setting Clip to true for Series Marks :

Code: Select all

bar1.Marks.Clip = true;

Bank Van Breda
Newbie
Newbie
Posts: 10
Joined: Tue Nov 05, 2019 12:00 am

Re: Bar chart panning

Post by Bank Van Breda » Fri Nov 15, 2019 12:54 pm

Thank you! Works great.

Post Reply