Customizing cursor tool look and feel

[gilbert]

Hi,

How can I draw/put triangle on Teechart CursorTool which need to have a look like image below.
[img]

Cursor.jpg (13.76 KiB) Viewed 12089 times

[/img]

This triangle should behave as a gripper when we click and drag to help moving the cursor dynamically.

Please help me to achieve this.

Thanks

[Sandra]

Hello gilbert,

I haven't forgotten your request, but I am working to find a good solution for you. I try to answer you asap.

Thanks,

[gilbert]

Hi Sandra,

Thank you.

[Sandra]

Hello gilbert,

I have made a simple code where there is drawn a triangle directly in the canvas and is used the x value of cursor to move it.

Code: Select all

 public MainWindow()
        {
            InitializeComponent();
            InitializeChart();
        }
        double AxisMax = 100;
        double AxisMin = 0;
        double value;
        DateTime dt;
        Random rnd;
        Steema.TeeChart.WPF.Tools.CursorTool cursor1; 
        private void InitializeChart()
        {
            Steema.TeeChart.WPF.Styles.Line line1 = new Steema.TeeChart.WPF.Styles.Line(tChart1.Chart);
            cursor1 = new Steema.TeeChart.WPF.Tools.CursorTool(tChart1.Chart);
            cursor1.Style = Steema.TeeChart.WPF.Tools.CursorToolStyles.Vertical;
            cursor1.Pen.Style = DashStyles.Dot;
            cursor1.Pen.Width = 2;
          
            dt = DateTime.Today;
            tChart1.Aspect.View3D = false; 
            rnd = new Random();
            line1.XValues.DateTime = true; 
            for (int i = 0; i < 100; i++)
            {
                line1.Add(dt, rnd.Next(100));
                dt = dt.AddDays(1); 
            }
         
            tChart1.AfterDraw += tChart1_AfterDraw;
            hscrollBar.Scroll +=hscrollBar_Scroll;
            cursor1.Change += cursor1_Change;          
            tChart1.MouseDoubleClick += tChart1_MouseDoubleClick;
           
        }

        void tChart1_MouseDoubleClick(object sender, MouseButtonEventArgs e)
        {
            MessageBox.Show("Points0:" + points[0].X.ToString() + "," + points[0].Y.ToString() + "\n" + "Points1:" +
                   points[1].X.ToString() + "," + points[1].Y.ToString() + "\n" + "Points2:" + points[2].X.ToString() + "," + points[2].Y.ToString()); 
        }
        bool cursor1IsChange;
        Double x1, y1;  

        void cursor1_Change(object sender, Steema.TeeChart.WPF.Tools.CursorChangeEventArgs e)
        {
            cursor1IsChange = true;
            tChart1.Invalidate();
            x1 = e.x;
            y1 = e.y;
           
        }
        Point[] points; 
        void tChart1_AfterDraw(object sender, Steema.TeeChart.WPF.Drawing.Graphics3D g)
        {
            tChart1.Axes.Bottom.SetMinMax(tChart1[0].XValues[0], tChart1[0].XValues[50]);
            hscrollBar.Minimum = 0;
            hscrollBar.Maximum = 100; 
            value = tChart1.Axes.Bottom.Minimum + ((tChart1.Axes.Bottom.Maximum - tChart1.Axes.Bottom.Minimum) / 2);
            AxisMin = hscrollBar.Minimum;
            AxisMax = hscrollBar.Maximum;
            if (cursor1IsChange)
            {
                g.BackColor = Colors.Blue;
                Rect rect = tChart1.Chart.ChartRect; 
                Rect rect1 = new Rect(x1, rect.Top-10,10,10);
                points = new[]
                {
                  new Point((x1-5)+(rect1.Width),-(rect1.Bottom-rect.Top-(rect1.Height*2))),
                  new Point((x1-5),-(rect1.Bottom -rect.Top-(rect1.Height*2))),
                  new Point((x1-5)+rect1.Width/2,(rect.Top +rect1.Bottom)/2)};

                g.Triangle(points[0],points[1],points[2],0);
            }
            cursor1IsChange = false; 
        }
        private void hscrollBar_Scroll(object sender, ScrollEventArgs e)
        {
            double tmp = 0.01 * ((int)hscrollBar.Value) * (tChart1[0].XValues.Maximum - tChart1[0].XValues.Minimum);
            tChart1[0].GetHorizAxis.SetMinMax(tChart1[0].XValues.Maximum + tmp, tChart1[0].XValues.Minimum + tmp);
            tChart1.Invalidate();
        }

Could you please tell us if previous code works in your end?

Thanks,

[gilbert]

Hi Sandra,

Thank you so much for the help.It works fine.
I have used some part of the code in my application, the triangle is moving with my cursor perfectly
but I am unable to set triangle position exactly on cursor's top.

And the triangle size is varying(height) when I change window size to minimize or maximize.

Also, I would like to show the triangle always on the cursor irrespective of the cursor's movement ie., triangle position should take the cursor's position so that triangle will be on top of the cursor.

I am binding the tchart using a collection of data from csv file to show line series.
I guess it works only with the random data.

please help me.


Thanks.

[Sandra]

Hello gilbert,

I have modified my previous code because do as you want:

Code: Select all

   public MainWindow()
        {
            InitializeComponent();
            InitializeChart();
        }
        double AxisMax = 100;
        double AxisMin = 0;
        double value;
        DateTime dt;
        Random rnd;
        Point pos;
        bool IsChangeCursor;
        Double X;
        Point[] points; 
        Steema.TeeChart.WPF.Tools.CursorTool cursor1; 
        private void InitializeChart()
        {
            Steema.TeeChart.WPF.Styles.Line line1 = new Steema.TeeChart.WPF.Styles.Line(tChart1.Chart);
            cursor1 = new Steema.TeeChart.WPF.Tools.CursorTool(tChart1.Chart);
            cursor1.Style = Steema.TeeChart.WPF.Tools.CursorToolStyles.Vertical;
            cursor1.Pen.Style = DashStyles.Dot;
            cursor1.Pen.Width = 2;
            tChart1.Zoom.Allow = false; 
            dt = DateTime.Today;
            tChart1.Aspect.View3D = false; 
            rnd = new Random();
            line1.XValues.DateTime = true; 
            for (int i = 0; i < 100; i++)
            {
                line1.Add(dt, rnd.Next(100));
                dt = dt.AddDays(1); 
            }
            tChart1.Panel.MarginUnits = PanelMarginUnits.Pixels;
             tChart1.AfterDraw += tChart1_AfterDraw;
            hscrollBar.Scroll += hscrollBar_Scroll;      
            tChart1.MouseMove += tChart1_MouseMove;
            BitmapSource bmp1 = tChart1.Chart.Bitmap(this.Width, this.Height);
        }
        void tChart1_MouseMove(object sender, MouseEventArgs e)
        {

            Rect rectangle = tChart1.Chart.ChartRect;
            if (rectangle.Contains(e.GetPosition(e.MouseDevice.Target)))
            {
                pos = e.GetPosition(e.MouseDevice.Target);
                cursor1.XValue = tChart1.Axes.Bottom.CalcPosPoint(pos.X);
                IsChangeCursor = true;
            }
            
        }
        
        void tChart1_AfterDraw(object sender, Steema.TeeChart.WPF.Drawing.Graphics3D g)
        {
            //ScrollBar
            tChart1.Axes.Bottom.SetMinMax(tChart1[0].XValues[0], tChart1[0].XValues[50]);
            hscrollBar.Minimum = 0;
            hscrollBar.Maximum = 100; 
            value = tChart1.Axes.Bottom.Minimum + ((tChart1.Axes.Bottom.Maximum - tChart1.Axes.Bottom.Minimum) / 2);
            AxisMin = hscrollBar.Minimum;
            AxisMax = hscrollBar.Maximum;
            //Rect
           
            Rect rect = tChart1.Chart.ChartRect;
            if (IsChangeCursor)
            {
                X = pos.X;
                g.BackColor = Colors.Blue;

                Rect rect1 = new Rect(X, rect.Top - 10, 20, 20);
                points = new[]
                {
                  
                  new Point((X-rect1.Width/2) + rect1.Width,-((rect.Top-tChart1.Panel.MarginTop+5) -(rect1.Height))),
                  new Point((X-rect1.Width/2),-((rect.Top-tChart1.Panel.MarginTop+5)-(rect1.Height))),
                  new Point((X-rect1.Width/2)+rect1.Width/2,(rect.Top+tChart1.Panel.MarginTop+20)/2)};
                g.Triangle(points[0], points[1], points[2], 0);
            }

          
        }
}

Could you tell us if previous code works in your end?

I hope will helps.

Thanks,

[gilbert]

Hi Sandra,

Thank you for the code.It really helped my requirement.
I have one more concern here.

Scenario 1:

The cursor and the cursor's traingle should move only when i move the cursor manually which is working fine.
The cursor's traingle should get visible on loading the teechart itself.
Right now it is being displayed when I move the cursor.
On scrolling over the teechart, the cursor's triangle is moving when the cursor is not moving.
I would prefer if i scroll the teechart also, the cursor's traingle should not move as cursor does not move.

Scenario 2:

I have second cursor on the same teechart along with first cursor which should not be movable.
This cursor will take the current value of x axis and gets changed dynamically.

I am able to show another traingle on the teechart but unable to set its position on top of this cursor because this
cursor is not movable manually.


Scenario 1 cursor is my past cursor which can be movable and am able to show the triangle exactly on it.
The problem is when the scenario 2 cursor value changes, past cursors traingle should be visible exactly on it.
For scenario 2, cursor is current cursor which should not be movable but traingle should be visible exactly on top of
it whenever its value changes or scroll the teechart.


I have tried the code but didnt get the correct solution since 2nd cursor is not movable to handle it in mouseMove event.

Kindly let me know if am not clear.Please help me.


Thanks.

[Sandra]

Hello gilbert,

Your requirements force me to modify again my code, so you can get an idea as you need do. For this reason, I recommend you taking a look to my code and change the events or variable, if it is necessary, because, your code is behaved as you like:

Code: Select all

        public MainWindow()
        {
            InitializeComponent();
            InitializeChart();
        }
        double AxisMax = 100;
        double AxisMin = 0;
        double value;
        DateTime dt;
        Random rnd;
        Point pos;
        bool IsChangeCursor, IsScrollBar;
        Double X,previousC;
        Point[] points,points1; 
        Steema.TeeChart.WPF.Tools.CursorTool cursor1,cursor2; 
        private void InitializeChart()
        {
            Steema.TeeChart.WPF.Styles.Line line1 = new Steema.TeeChart.WPF.Styles.Line(tChart1.Chart);
            cursor1 = new Steema.TeeChart.WPF.Tools.CursorTool(tChart1.Chart);
            cursor1.Style = Steema.TeeChart.WPF.Tools.CursorToolStyles.Vertical;
            cursor1.Pen.Style = DashStyles.Dot;
            cursor1.Pen.Width = 2;
            
            cursor2 = new Steema.TeeChart.WPF.Tools.CursorTool(tChart1.Chart);
            cursor2.Style = Steema.TeeChart.WPF.Tools.CursorToolStyles.Vertical;
            cursor2.Pen.Style = DashStyles.Dot;
            cursor2.Pen.Width = 2;
            tChart1.Zoom.Allow = false; 
            dt = DateTime.Today;
            tChart1.Aspect.View3D = false; 
         rnd = new Random();
            line1.XValues.DateTime = true; 
            for (int i = 0; i < 100; i++)
            {
                line1.Add(dt, rnd.Next(100));
                dt = dt.AddDays(1); 
            }
            //InitializeCursor1
            cursor1.XValue = line1.XValues[line1.Count / 2];
            cursor1.XValue = line1.XValues[line1.Count / 2];
            //InitializeCursor2
            cursor2.XValue = line1.XValues[line1.Count / 2 - 1];
            cursor2.XValue = line1.XValues[line1.Count / 2 - 1];
            tChart1.Panel.MarginUnits = PanelMarginUnits.Pixels;
         
            tChart1.AfterDraw += tChart1_AfterDraw;
            hscrollBar.Scroll += hscrollBar_Scroll;      
            tChart1.MouseMove += tChart1_MouseMove;
            BitmapSource bmp1 = tChart1.Chart.Bitmap(this.Width, this.Height);
        }

      
        void tChart1_MouseMove(object sender, MouseEventArgs e)
        {

            Rect rectangle = tChart1.Chart.ChartRect;

            if (e.LeftButton == MouseButtonState.Pressed)
            {
                if (rectangle.Contains(e.GetPosition(e.MouseDevice.Target)))
                {
                    if (pos.X == 0)
                    {
                        previousC = cursor2.XValue;
                    }
                    else
                    {
                        previousC = pos.X;
                        
                    }
                    pos = e.GetPosition(e.MouseDevice.Target);
                    IsChangeCursor = true;
                    cursor1.XValue = tChart1.Axes.Bottom.CalcPosPoint(pos.X);
                    cursor1.XValue = tChart1.Axes.Bottom.CalcPosPoint(pos.X);
                    cursor2.XValue = tChart1.Axes.Bottom.CalcPosPoint(previousC);
                    cursor2.XValue = tChart1.Axes.Bottom.CalcPosPoint(previousC);
                }
            }
            else if (e.RightButton == MouseButtonState.Pressed)
            {
                IsScrollBar = false; 
            }
        }
        
        void tChart1_AfterDraw(object sender, Steema.TeeChart.WPF.Drawing.Graphics3D g)
        {
           // ScrollBar
            if (IsScrollBar)
            {
                tChart1.Axes.Bottom.SetMinMax(tChart1[0].XValues[0], tChart1[0].XValues[50]);
                hscrollBar.Minimum = 0;
                hscrollBar.Maximum = 100;
                value = tChart1.Axes.Bottom.Minimum + ((tChart1.Axes.Bottom.Maximum - tChart1.Axes.Bottom.Minimum) / 2);
                AxisMin = hscrollBar.Minimum;
                AxisMax = hscrollBar.Maximum;
            }
            //Rect
 
            Rect rect = tChart1.Chart.ChartRect;
            if (IsChangeCursor)
            {
                
                X = pos.X;
                g.BackColor = Colors.Blue;
                Rect rect1 = new Rect(X, rect.Top - 10, 20, 20);
                points = new[]
                {                
                  new Point((X-rect1.Width/2) + rect1.Width,-((rect.Top-tChart1.Panel.MarginTop+5) -(rect1.Height))),
                  new Point((X-rect1.Width/2),-((rect.Top-tChart1.Panel.MarginTop+5)-(rect1.Height))),
                  new Point((X-rect1.Width/2)+rect1.Width/2,(rect.Top+tChart1.Panel.MarginTop+20)/2)
                };
                g.Triangle(points[0], points[1], points[2], 0);
                points1 = new[]
                {                
                  new Point((previousC-rect1.Width/2) + rect1.Width,-((rect.Top-tChart1.Panel.MarginTop+5) -(rect1.Height))),
                  new Point((previousC-rect1.Width/2),-((rect.Top-tChart1.Panel.MarginTop+5)-(rect1.Height))),
                  new Point((previousC-rect1.Width/2)+rect1.Width/2,(rect.Top+tChart1.Panel.MarginTop+20)/2)
                };
                g.Brush.Color = Colors.LightGray; 
                g.Triangle(points1[0], points1[1], points1[2], 0);            
            }
        }
        private void hscrollBar_Scroll(object sender, ScrollEventArgs e)
        {
            double tmp = 0.01 * ((int)hscrollBar.Value) * (tChart1[0].XValues.Maximum - tChart1[0].XValues.Minimum);
            IsScrollBar = true; 
            tChart1[0].GetHorizAxis.SetMinMax(tChart1[0].XValues.Maximum + tmp, tChart1[0].XValues.Minimum + tmp);
            tChart1.Invalidate(); 
        }

Thanks,