Linear gauge bug

[Thomas]

Hi!
I'm using Xamarin.Android Teechart.
I have about 10 LinearGauges in ScrollView with live data (400 ms update).
The gauge looks skew (see attachment) sometimes. On some devices it looks skew almost all time, on others - almost never.
When i change zoom style to

Code: Select all

 chart.Zoom.Style = Steema.TeeChart.ZoomStyles.None;

problem disappears, but then some gauges aren't drawing at all and scroll works bad.
How to fix it?
Thanks in advance.

[Narcís]

Hi Thomas,

I have about 10 LinearGauges in ScrollView with live data (400 ms update).
The gauge looks skew (see attachment) sometimes. On some devices it looks skew almost all time, on others - almost never.

Can you please attach a simple example project we can run "as-is" to reproduce the problem here? In which devices it's not working fine?

When i change zoom style to

Code: Select all

 chart.Zoom.Style = Steema.TeeChart.ZoomStyles.None;

problem disappears, but then some gauges aren't drawing at all and scroll works bad.

ZoomStyles.None was implemented to increase performance and responsiveness in real-time charting applications. You should try refreshing series as in the RealTimeCharting demo shipped with the installer. Here's the demo's code:

Code: Select all

using System;

using Android.App;
using Android.OS;
using Android.Views;
using Android.Widget;

namespace RealTimeCharting
{
  [Activity(Label = "RealTimeCharting", MainLauncher = true, Icon = "@drawable/icon")]
  public class Activity1 : Activity
  {
    Steema.TeeChart.TChart tChart1;
    const int NumPoints = 50;
    const int MinValue = 0;
    const int MaxValue = 1000;
    System.Timers.Timer timer1;

    protected override void OnCreate(Bundle bundle)
    {
      base.OnCreate(bundle);

      // Set our view from the "main" layout resource
      SetContentView(Resource.Layout.Main);

      // Get our button from the layout resource,
      // and attach an event to it
      Button button = FindViewById<Button>(Resource.Id.MyButton);

      button.Click += delegate 
      {
        timer1.Enabled = !timer1.Enabled;
        button.Text = (timer1.Enabled) ? Resources.GetString(Resource.String.Stop) : Resources.GetString(Resource.String.Start);
      };

      //Add the chart
      tChart1 = new Steema.TeeChart.TChart(this);
      tChart1.Aspect.View3D = false;
      tChart1.Zoom.Style = Steema.TeeChart.ZoomStyles.None;
      tChart1.Legend.Visible = false;
      tChart1.Panel.Gradient.Visible = false;
      tChart1.Walls.Back.Gradient.Visible = false;
      tChart1.Walls.Back.Visible = false;
      tChart1.Axes.Left.Grid.Visible = false;
      tChart1.Axes.Bottom.Grid.Visible = false;
      tChart1.Axes.Left.Automatic = false;
      tChart1.Axes.Bottom.Automatic = false;
      tChart1.Axes.Left.SetMinMax(MinValue, MaxValue);      
      tChart1.Axes.Bottom.SetMinMax(0, NumPoints);
      tChart1.ClickSeries += new Steema.TeeChart.TChart.SeriesEventHandler(tChart1_ClickSeries);
      
      //Left axis disabled for performance purposes.
      tChart1.Axes.Left.Visible = false;

      var fastLine1 = new Steema.TeeChart.Styles.FastLine(tChart1.Chart);
      fastLine1.FillSampleValues(NumPoints);
      fastLine1.DrawAllPoints = false;

      LinearLayout layout = FindViewById<LinearLayout>(Resource.Id.linearLayout1);
      layout.AddView(tChart1, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.FillParent, 400));

      timer1 = new System.Timers.Timer();
      timer1.Elapsed += new System.Timers.ElapsedEventHandler(timer1_Elapsed);
      timer1.Interval = 100;
      timer1.Start();
    }

    void tChart1_ClickSeries(object sender, Steema.TeeChart.Styles.Series s, int valueIndex, MotionEvent e)
    {
      Toast
          .MakeText(this, "point " + valueIndex, ToastLength.Short)
          .Show();
    }    

    void timer1_Elapsed(object sender, System.Timers.ElapsedEventArgs e)
    {
      RunOnUiThread(delegate
      {
        AnimateSeries(tChart1);
      });
    }

    void AnimateSeries(Steema.TeeChart.TChart chart)
    {
      var rnd = new Random();
      double newX, newY;

      tChart1.AutoRepaint = false;

      foreach (Steema.TeeChart.Styles.Series s in chart.Series)
      {
        // show only 50 points - delete the rest
        while (s.Count > NumPoints) s.Delete(0);
        if (s.Count > NumPoints) s.Delete(0);
        newX = s.XValues.Last + 1;
        newY = rnd.Next(MaxValue);
        if ((Math.Abs(newY) > MaxValue) || (Math.Abs(newY) < MinValue)) newY = 0.0;
        s.Add(newX, newY);
      }

      tChart1.Axes.Bottom.SetMinMax(tChart1.Axes.Bottom.Minimum + 1, tChart1.Axes.Bottom.Maximum + 1);
      
      tChart1.AutoRepaint = true;
      tChart1.Chart.Invalidate();
    }
  }

}

[Thomas]

I use code from demo when i has linearGauges in simple LinearLayout. It works good.
But when gauges are childs of scrallable ScrollView - problems appear.
Scroll works very bad, parts of charts are drawing in wrong places, some of gauges is not drawing at all.

[Narcís]

Hi Thomas,

Thanks for your feedback. Could you please attach a simple example project we can run "as-is" to reproduce the problem and let us know which devices are the worst in such environment?

Thanks in advance.

[Thomas]

https://drive.google.com/file/d/0B0LJ5P ... sp=sharing
Sample project. With ZoomStyle.None scroll works bad. with ZoomStyle.FullChart - works better, but there is problem (see my 1st post)

[Narcís]

Hi Thomas,

Sample project. With ZoomStyle.None scroll works bad. with ZoomStyle.FullChart - works better, but there is problem (see my 1st post)

Thank you very much. I can reproduce the problem with ZoomStyles.None but not with ZooomStyles.FullChart or ZoomStyles.Classic. Have you tried using ZoomStyles.Classic at your end? Does this solve the problem?

Implementing the timer event to RunOnUiThread as in the RealTimeCharting example doesn't help either, for example:

Code: Select all

			var timer = new System.Timers.Timer (1000);
			timer.Elapsed += (object sender, System.Timers.ElapsedEventArgs e) => {
				foreach (var gauge in _gauges) {
					RunOnUiThread(delegate
					{
						gauge.Chart.AutoRepaint = false;
						gauge.Value = _counter++;
						gauge.Chart.AutoRepaint = true;
						gauge.Chart.Invalidate();
					});
				}
			};
			timer.Start ();

The gauge looks skew (see attachment) sometimes. On some devices it looks skew almost all time, on others - almost never.

I tested it with the following devices:

Google Nexus 4 (Android version 4.4.2)
Google Nexus 7 (2012) (Android version 4.4.2)
Motorola Defy (Android version 2.2.2)

Which sort of device should we use to reproduce the problem here? Could you reproduce it with an emulator? We will probably need to set up an emulator following your specifications.

Thanks in advance.

[Narcís]

Hi Thomas,

I also found that running the timer event on the UI thread updates the charts much better when ZoomStyles.FullChart or ZoomStyles.Classic, for example:

Code: Select all

		int count = 1;
		public LinearGauge[] _gauges;
		int _counter = 0;

		protected override void OnCreate (Bundle bundle)
		{
			base.OnCreate (bundle);

			// Set our view from the "main" layout resource
			SetContentView (Resource.Layout.Main);

			// Get our button from the layout resource,
			// and attach an event to it
			var scroll = FindViewById<ScrollView> (Resource.Id.scroll);
			var scrollRoot = FindViewById<LinearLayout> (Resource.Id.scrollRoot);

			var length = 15;
			_gauges = new LinearGauge[length];

			for (int i = 0; i < length; i++) {
				TChart chart = new TChart (this);
				chart.Aspect.View3D = false;
				var gauge = new LinearGauge (chart.Chart);
				_gauges [i] = gauge;

				gauge.Value = 10;
        chart.Zoom.Style = ZoomStyles.FullChart;
				chart.LayoutParameters = new LinearLayout.LayoutParams (300, 150);
				scrollRoot.AddView (chart);
			}

			var timer = new System.Timers.Timer (1000);
			timer.Elapsed += (object sender, System.Timers.ElapsedEventArgs e) => {
				foreach (var gauge in _gauges) {
				  RunOnUiThread(delegate
				  {
					gauge.Chart.AutoRepaint = false;
					gauge.Value = _counter++;
					gauge.Chart.AutoRepaint = true;
					gauge.Chart.Invalidate();

				  });
				}
			};
			timer.Start ();
		}

The scrolling issue is most likely related to what's explained here. ScrollView requires child controls to redraw, since charts are already being redrawn to update values probably they are forced to be redrawn before the previous draw cycle has completed and hence the poor scrolling experience. Looks like this behaviour is present in those situations where refreshing rate is faster (ZoomStyles.None and ZoomStyles.FullChart with RunOnUiThread). Other combinations don't show this problem because they just refresh too slow and you don't see LinearGauge value increasing. This problem is what we tried to address with the RealTimeCharting demo and ZoomStyles.None implementation, which internally uses a SurfaceView. That example uses a FastLine series, this specific series and the complete demo are optimized for performance (no grid lines, manual axes scale, no legend, no gradients, etc.). Therefore, your example performance might be improved simplifying some elements in your gauges: axes and gradients, for example. I'll give it a go and get back to you if I can improve that.

[Narcís]

Therefore, your example performance might be improved simplifying some elements in your gauges: axes and gradients, for example. I'll give it a go and get back to you if I can improve that.

Implementing chart and LinearGauge settings as in the code snippet below certainly improves performance. How does it work for you?

Code: Select all

		int count = 1;
		public LinearGauge[] _gauges;
		int _counter = 0;

		protected override void OnCreate (Bundle bundle)
		{
			base.OnCreate (bundle);

			// Set our view from the "main" layout resource
			SetContentView (Resource.Layout.Main);

			// Get our button from the layout resource,
			// and attach an event to it
			var scroll = FindViewById<ScrollView> (Resource.Id.scroll);
			var scrollRoot = FindViewById<LinearLayout> (Resource.Id.scrollRoot);

			var length = 15;
			_gauges = new LinearGauge[length];

			for (int i = 0; i < length; i++) {
				TChart chart = new TChart (this);
				chart.Aspect.View3D = false;
				var gauge = new LinearGauge (chart.Chart);
				_gauges [i] = gauge;

				gauge.Value = 10;
        gauge.RedLine.Brush.Gradient.Visible = false;
        gauge.RedLine.Brush.Color = System.Drawing.Color.Red;
        gauge.GreenLine.Brush.Gradient.Visible = false;
        gauge.GreenLine.Brush.Color = System.Drawing.Color.Green;
        gauge.Hand.Transparency = 0;
        gauge.FaceBrush.Gradient.Visible = false;
        gauge.FaceBrush.Color = System.Drawing.Color.DarkGray;
        gauge.Frame.MiddleBand.Gradient.Visible = false;
        gauge.Frame.MiddleBand.Color = System.Drawing.Color.Gray;

        chart.Zoom.Style = ZoomStyles.None;
        chart.LayoutParameters = new LinearLayout.LayoutParams(300, 150);
				scrollRoot.AddView (chart);
			}

			var timer = new System.Timers.Timer (1000);
			timer.Elapsed += (object sender, System.Timers.ElapsedEventArgs e) => {
				foreach (var gauge in _gauges) {
          RunOnUiThread(delegate
          {
            gauge.Chart.AutoRepaint = false;
            gauge.Value = _counter++;
            gauge.Chart.AutoRepaint = true;
            gauge.Chart.Invalidate();
          });
				}
			};
			timer.Start ();
		}

Thanks for your collaboration.

[Thomas]

Thanks for your replies.
Performace is increasing but not enough for smooth scrolling (i have about 50 charts in my real project scroll)
I ended up with classic zoom style. Bug with skew chart is magical it appearce on my 7" chinese tablet every time, on other devices 1 for 50 times.
Thanks

[Narcís]

Hi Thomas,

Thanks for your feedback.

Performace is increasing but not enough for smooth scrolling (i have about 50 charts in my real project scroll)

Ok, I'll investigate the issue further to see whether we can gain some more speed and I'll get back to you if I find anything.

I ended up with classic zoom style. Bug with skew chart is magical it appearce on my 7" chinese tablet every time, on other devices 1 for 50 times.

Couldn't reproduce it not even once with the devices I tested. Could you please let us know the 7" chinese tablet make and model name or specification (Android version, screen size, etc.) so that we can arrange a similar emulator?

Thanks in advance.

[Thomas]

device - PocketBook surpad 2.
In my commercial project i have 2 scrollviews, each have 5 - 50 charts (LinearGauges and Circular gauges).

[Narcís]

Hello Thomas,

First of all I'd like to apologize for the lack of feedback on this thread.

I'd also like to inform you that we published a TeeChart for Xamarin.Android update which includes very important performance optimizations. I strongly recommend you to test it with the project in this thread, it should improve performance significantly. I did the test and I could see all gauges refreshing and scrolling fine. If your license expired you can obtain a fully functional evaluation version here.

If I can be of further help, don't hesitate to let me know.