Synchronizing Cursor Behaviour

[Quant]

Hi,

We have a problem while synchronizing cursor tool with two charts. It gives us performance issue, as second chart's cursor coordinates lags behind first chart's cursor coordinates. We successfully synchronized both cursor tools, but we have speed issue.

[Narcís]

Hello Quant,

Are you doing something as in the All Features\Welcome !\Tools\Cursor\Synchronizing Two example at the features demo available at TeeChart's program group? Does this perform slowly for you?

If the problem persists, could you please attach a Short, Self Contained, Correct (Compilable), Example?

Thanks in advance.

[Quant]

Please find attached sample code.

WindowsFormsApplication2.zip

(19.41 KiB) Downloaded 1058 times

This is not actual logic that we have used in our final product. But in this sample application also it gives us performance issue. It is very similar to your sample code.

[Narcís]

Hi Quant,

I see a little lag in the demo but not in your application. Should I do anything specific to reproduce it?

Thanks in advance.

[Quant]

Hi,

We are seeing lag in the attached sample application also. I am very surprised that you didn't get any lag in our attached sample application.
It gets lagged while dragging mouse cursor.

[Christopher]

We are seeing lag in the attached sample application also. I am very surprised that you didn't get any lag in our attached sample application.
It gets lagged while dragging mouse cursor.

The lag can be significantly reduced by using code such as:

Code: Select all

    public partial class Form1 : Form
    {
        bool isCursorTool1, isCursorTool2;

        public Form1()
        {
            InitializeComponent();
            this.Load += new EventHandler(Form1_Load);

            cursorTool1.Change += new Steema.TeeChart.Tools.CursorChangeEventHandler(cursorTool1_Change);
            cursorTool2.Change += new Steema.TeeChart.Tools.CursorChangeEventHandler(cursorTool2_Change);

            tChart1.MouseMove += tChart1_MouseMove;
            tChart2.MouseMove += tChart2_MouseMove;
            
        }

        void tChart1_MouseMove(object sender, MouseEventArgs e)
        {
          isCursorTool1 = true;
          isCursorTool2 = false;
        }

        void tChart2_MouseMove(object sender, MouseEventArgs e)
        {
          isCursorTool1 = false;
          isCursorTool2 = true;
        }

        void cursorTool2_Change(object sender, Steema.TeeChart.Tools.CursorChangeEventArgs e)
        {
          if(isCursorTool2)
          {
            cursorTool1.XValue = cursorTool2.XValue;
            cursorTool1.YValue = cursorTool2.YValue;
          }
        }

        void cursorTool1_Change(object sender, Steema.TeeChart.Tools.CursorChangeEventArgs e)
        {
          if(isCursorTool1)
          {
            cursorTool2.XValue = cursorTool1.XValue;
            cursorTool2.YValue = cursorTool1.YValue;
          }
        }

        void Form1_Load(object sender, EventArgs e)
        {
            this.tChart1[0].FillSampleValues(40);
            this.tChart2[0].FillSampleValues(40);

            this.tChart1.Axes.Left.Labels.CustomSize = 50;
            this.tChart2.Axes.Left.Labels.CustomSize = 50;
        }
    }

[Quant]

Hi,

I tried your sample code, but the result is not satisfactory. It still lags on large sample values (I checked the same on 1000 data points).
Please help us in the same asap.

[Christopher]

Hi,

I tried your sample code, but the result is not satisfactory. It still lags on large sample values (I checked the same on 1000 data points).
Please help us in the same asap.

If you are using 1000 points in each series then you will need to use Downsampling, as shown in the features demo (%Program Files%\Steema Software\Steema TeeChart for .NET 2015 4.1.201X.XXXXX\Examples\DemoProject\bin\ExecutableDemo\TeeChartNetExamples.exe) under:

All Features -> Welcome !\Functions\Extended\Reducing number of points

The issue here is that the .NET Framework does not paint the two charts simultaneously, it paints them one after the other, and given that a large number of points means a longer time for painting which produces the "lag".

[Quant]

Hi,

If you are using 1000 points in each series then you will need to use Downsampling, as shown in the features demo (%Program Files%\Steema Software\Steema TeeChart for .NET 2015 4.1.201X.XXXXX\Examples\DemoProject\bin\ExecutableDemo\TeeChartNetExamples.exe) under:

All Features -> Welcome !\Functions\Extended\Reducing number of points

We tried the downsampling on our previously attached sample code. But still it is giving the same problem.
Please have a look on the attached code snippet and let us know if we are doing anything wrong in this.

Code: Select all

        bool isCursorTool1, isCursorTool2;
        private Steema.TeeChart.Functions.DownSampling downSampling1;

        public Form1()
        {
            InitializeComponent();
            this.Load += new EventHandler(Form1_Load);

            downSampling1 = new Steema.TeeChart.Functions.DownSampling(tChart1.Chart);

            cursorTool1.Active = true;
            cursorTool2.Active = true;

            colorLine1.Active = false;
            colorLine2.Active = false;

            cursorTool1.Change += new Steema.TeeChart.Tools.CursorChangeEventHandler(cursorTool1_Change);
            cursorTool2.Change += new Steema.TeeChart.Tools.CursorChangeEventHandler(cursorTool2_Change);

            tChart1.MouseMove += tChart1_MouseMove;
            tChart2.MouseMove += tChart2_MouseMove;

        }

        void tChart1_MouseMove(object sender, MouseEventArgs e)
        {
            isCursorTool1 = true;
            isCursorTool2 = false;
        }

        void tChart2_MouseMove(object sender, MouseEventArgs e)
        {
            isCursorTool1 = false;
            isCursorTool2 = true;
        }

        void cursorTool2_Change(object sender, Steema.TeeChart.Tools.CursorChangeEventArgs e)
        {
            if (isCursorTool2)
            {
                cursorTool1.XValue = cursorTool2.XValue;
                cursorTool1.YValue = cursorTool2.YValue;
            }
        }

        void cursorTool1_Change(object sender, Steema.TeeChart.Tools.CursorChangeEventArgs e)
        {
            if (isCursorTool1)
            {
                cursorTool2.XValue = cursorTool1.XValue;
                cursorTool2.YValue = cursorTool1.YValue;
            }
        }

        void Form1_Load(object sender, EventArgs e)
        {
            downSampling1.DisplayedPointCount = 1000;
            downSampling1.Method = Steema.TeeChart.Functions.DownSamplingMethod.MinMaxFirstLastNull;

            this.tChart1[0].FillSampleValues(1000);
            this.tChart2[0].FillSampleValues(1000);
            
            this.tChart1[0].Function = downSampling1;
            this.tChart2[0].Function = downSampling1;

            this.tChart1.Axes.Left.Labels.CustomSize = 50;
            this.tChart2.Axes.Left.Labels.CustomSize = 50;
        }

The issue here is that the .NET Framework does not paint the two charts simultaneously, it paints them one after the other, and given that a large number of points means a longer time for painting which produces the "lag".

What are the alternative method to do the above things without any lag?

[Christopher]

What are the alternative method to do the above things without any lag?

I have already tried to explain to you that no lag in these circumstances is impossible. As I said, "The issue here is that the .NET Framework does not paint the two charts simultaneously, it paints them one after the other, and given that a large number of points means a longer time for painting which produces the "lag"."

Here is a video of cursor synchronization using 10,000 points in each Chart (this on a relatively old machine):

http://screencast.com/t/rWrDxjDmZsXy

And here is the code I used:

Code: Select all

   public SurfaceTest_Form()
    {
      InitializeComponent();
      InitializeChart();
    }

    CursorTool cursorTool1, cursorTool2;

    private void InitializeChart()
    {
      tChart1.Aspect.View3D = false;
      tChart2.Aspect.View3D = false;
      tChart1.Legend.Visible = false;
      tChart2.Legend.Visible = false;

      tChart1.Panel.Gradient.Visible = false;
      tChart2.Panel.Gradient.Visible = false;
      tChart1.Panel.Visible = false;
      tChart2.Panel.Visible = false;

      tChart1.Walls.Back.Gradient.Visible = false;
      tChart2.Walls.Back.Gradient.Visible = false;
      tChart1.Walls.Back.Visible = false;
      tChart2.Walls.Back.Visible = false;

      cursorTool1 = new CursorTool(tChart1.Chart);
      cursorTool2 = new CursorTool(tChart2.Chart);
      cursorTool1.FollowMouse = true;
      cursorTool2.FollowMouse = true;


      FastLine series1 = new FastLine(tChart1.Chart);
      FastLine series2 = new FastLine(tChart2.Chart);

      series1.DrawAllPoints = false;
      series2.DrawAllPoints = false;

      this.Load += new EventHandler(Form1_Load);

      cursorTool1.Change += new Steema.TeeChart.Tools.CursorChangeEventHandler(cursorTool1_Change);
      cursorTool2.Change += new Steema.TeeChart.Tools.CursorChangeEventHandler(cursorTool2_Change);

      tChart1.MouseMove += tChart1_MouseMove;
      tChart2.MouseMove += tChart2_MouseMove;
    }

    bool isCursorTool1, isCursorTool2;

    void tChart1_MouseMove(object sender, MouseEventArgs e)
    {
      isCursorTool1 = true;
      isCursorTool2 = false;
    }

    void tChart2_MouseMove(object sender, MouseEventArgs e)
    {
      isCursorTool1 = false;
      isCursorTool2 = true;
    }

    void cursorTool2_Change(object sender, Steema.TeeChart.Tools.CursorChangeEventArgs e)
    {
      if (isCursorTool2)
      {
        cursorTool1.XValue = cursorTool2.XValue;
        cursorTool1.YValue = cursorTool2.YValue;
      }
    }

    void cursorTool1_Change(object sender, Steema.TeeChart.Tools.CursorChangeEventArgs e)
    {
      if (isCursorTool1)
      {
        cursorTool2.XValue = cursorTool1.XValue;
        cursorTool2.YValue = cursorTool1.YValue;
      }
    }

    void Form1_Load(object sender, EventArgs e)
    {
      this.tChart1[0].FillSampleValues(10000);
      this.tChart2[0].FillSampleValues(10000);

      this.tChart1.Axes.Left.Labels.CustomSize = 50;
      this.tChart2.Axes.Left.Labels.CustomSize = 50;
    }

I think the lag is noticeable, but not unacceptably so.

[Quant]

Hi Christopher,

We are using following sample code which significantly improves cursor performance.

We tested the below code on 100, 1000 and 10000 sample points, and we find very little lag on 1000 sample points and a significant lag on 10000 sample point. These tests proved the performance improvement of cursor tool.

We used FastCursor Property of cursor tool to improve the performance. It would be very great if you can improve the below code to remove lag while plotting 10000 sample point.

Code: Select all

            public Form1()
            {
              InitializeComponent();
              InitializeChart();
            }

            private void InitializeChart()
            {
              tChart1.Aspect.View3D = false;
              tChart2.Aspect.View3D = false;
              tChart1.Legend.Visible = false;
              tChart2.Legend.Visible = false;

              tChart1.Panel.Gradient.Visible = false;
              tChart2.Panel.Gradient.Visible = false;
              tChart1.Panel.Visible = false;
              tChart2.Panel.Visible = false;

              tChart1.Walls.Back.Gradient.Visible = false;
              tChart2.Walls.Back.Gradient.Visible = false;
              tChart1.Walls.Back.Visible = false;
              tChart2.Walls.Back.Visible = false;

              cursorTool1.Active = true;
              cursorTool2.Active = true;

              colorLine1.Active = false;
              colorLine2.Active = false;

              this.Load += new EventHandler(Form1_Load);

              cursorTool1.Change += new Steema.TeeChart.Tools.CursorChangeEventHandler(cursorTool1_Change);
              cursorTool2.Change += new Steema.TeeChart.Tools.CursorChangeEventHandler(cursorTool2_Change);

              tChart1.MouseMove += tChart1_MouseMove;
              tChart2.MouseMove += tChart2_MouseMove;
            }

            bool isCursorTool1, isCursorTool2;

            void tChart1_MouseMove(object sender, MouseEventArgs e)
            {
              isCursorTool1 = true;
              isCursorTool2 = false;

              cursorTool1.FastCursor = isCursorTool1;
              cursorTool2.FastCursor = isCursorTool2;

              cursorTool1.Style = Steema.TeeChart.Tools.CursorToolStyles.Both;
              cursorTool2.Style = Steema.TeeChart.Tools.CursorToolStyles.Vertical;
            }

            void tChart2_MouseMove(object sender, MouseEventArgs e)
            {
              isCursorTool1 = false;
              isCursorTool2 = true;

              cursorTool1.FastCursor = isCursorTool1;
              cursorTool2.FastCursor = isCursorTool2;

              cursorTool1.Style = Steema.TeeChart.Tools.CursorToolStyles.Vertical;
              cursorTool2.Style = Steema.TeeChart.Tools.CursorToolStyles.Both;
            }

            void cursorTool2_Change(object sender, Steema.TeeChart.Tools.CursorChangeEventArgs e)
            {
              if (isCursorTool2)
              {
                cursorTool1.XValue = cursorTool2.XValue;
                cursorTool1.YValue = cursorTool2.YValue;
              }
            }

            void cursorTool1_Change(object sender, Steema.TeeChart.Tools.CursorChangeEventArgs e)
            {
              if (isCursorTool1)
              {
                cursorTool2.XValue = cursorTool1.XValue;
                cursorTool2.YValue = cursorTool1.YValue;
              }
            }

            void Form1_Load(object sender, EventArgs e)
            {
              this.tChart1[0].FillSampleValues(100);
              this.tChart2[0].FillSampleValues(100);

              this.tChart1.Axes.Left.Labels.CustomSize = 50;
              this.tChart2.Axes.Left.Labels.CustomSize = 50;
            }

I have already tried to explain to you that no lag in these circumstances is impossible. As I said, "The issue here is that the .NET Framework does not paint the two charts simultaneously, it paints them one after the other, and given that a large number of points means a longer time for painting which produces the "lag"."

As per our requirements we must achieve this. It is unacceptable to our users. What do you say about using multithreading?

[Christopher]

As per our requirements we must achieve this. It is unacceptable to our users. What do you say about using multithreading?

I'm afraid GDI+ does not support multithreading, we had a long look into this issue a few years ago.