Wpf Chart Series Symbol in FastScatter

[Besiana]

Hi,
I am using Scatter chart to display multiple chart series in a WPF chart. I need to use different symbols for each data series (e.g. square, circle). I can achieve this using data templates similar to the one below:

<DataTemplate x:Key="MyEllipse">

            <Canvas>

                <Ellipse Canvas.Top="{Binding Y}" Canvas.Left="{Binding X}" Width="10" Height="10"                                    Stroke="Black"/>

            </Canvas>

</DataTemplate>

Also, I need the color of the symbol to depend on the data point which I can achieve using converters.

This all works fine for a few data points.

In my application, the number of data points is in the order of thousands, and they update in realtime. I noticed that using FastScatter gives me a good enough performance. However, data templating is not supported in FastScatter type.

Is there a way to achieve this: use different symbols/colors for each data series and have a good performance like that of FastScatter?

Besiana

[Sheik Syed Abthaheer M]

Hi Besiana,

Thanks for using Syncfusion Products.

We have analyzed your reported query and you can use FastScatter Chart Data Template by overriding FastScatterPresenter class.

And we can achieve your requirement by drawing different symbols using DrawingContext as shown in the given code snippet.

 

Code Snippet[C#]:

using (DrawingContext context = visual.RenderOpen())

                {

                    foreach (var pt in pp)

                    {

                        visual.Index = i;

                     

                        context.DrawEllipse(br, pn, pt,width ,height);  //We can able to draw differend symbol

                        i++;

                    }

                }

 

We have prepared the sample based on your requirement. Please download it from the given location.

 

Please let us know if you have any queries.

 

Regards,

M.Sheik Syed Abthaheer

FastScatterTemplate_fdc95dd2.zip

[Besiana]

Hi, thank you for your response. This is close to what I want to do with the symbol of the chart series.
I am trying to determine the shape/color of the symbol based on some property of the data point. Code snippet below:

protected override void OnRender(DrawingContext drawingContext)

        {

            if (Points != null)

            {

                base.VisualCollection.Clear();

                var pen = new Pen(new SolidColorBrush(Colors.Green), 1);

                var brush = Series.Interior;

                

                var points = Points;

                var data = Series.Data;// I want to use the series data

                var visual = new SyncDrawingVisual();

                using (var context = visual.RenderOpen())

                {

                    for (var index = 0; index < data.Count; index++)

                    {

                        var dataPoint = data[index];

                        var car = (ExpensiveCar) dataPoint.Tag;

                        var x = Series.Area.ValueToPoint(Series.XAxis, dataPoint.X);

                        var y = Series.Area.ValueToPoint(Series.YAxis, dataPoint.Y);

                        // Then based on some property of the car, I want to draw a specific shape

                        if (car.CarName.StartsWith("Ultimate"))

                        {

                            context.DrawEllipse(brush, pen, new Point(x, y), 10, 10);

                        }

                        else

                        {

                            // draw a rectangle

                        }

                    }

                    base.VisualCollection.Add(visual);

                }

            }

        }

This is not giving me the right X values. Is there something wrong with the following lines:

 var x = Series.Area.ValueToPoint(Series.XAxis, dataPoint.X);

 var y = Series.Area.ValueToPoint(Series.YAxis, dataPoint.Y);

Any idea how I can do this properly?

Kind regards,
Besiana

[Sheik Syed Abthaheer M]

Hi Besiana,

Thanks for your update.

There is no need to calculate new points in FastScatter Presenter. We can able to get points from PointCollection based on DataPoint index as shown in the given below code snippet.

Code snippet[C#]:

PointCollection pp = Points;

using (DrawingContext context = visual.RenderOpen())

{

    for (var index = 0; index < data.Count; index++)

    {

        var dataPoint = data[index];

        var car = (ExpensiveCar)dataPoint.Tag;

        var p = pp[index];

        if (car.CarName.StartsWith("Ultimate"))

        {

             context.DrawEllipse(br,pn,p, 10, 10);

        }

        else

        {

         //drawing other symbol

        }

      }

  }

 

We have prepared the sample based on your requirement. Please download it from the below location.

 

Please let us know if you have any queries.

 

Regards,

M. Sheik Syed Abthaheer

 

FastScatterTemplate (2)_73cdba9.zip

[Besiana]

Hi, thank you for your reply. This is working great. 

However, I have lost the tooltip on the points.
I am trying something like the following:

public class FastScatter : FastScatterPresenter

    {

        private ToolTip toolTip = new ToolTip {Width = 100, Height = 100};

        public FastScatter()

        {

            Loaded += FastScatter_Loaded;

        }

        void FastScatter_Loaded(object sender, RoutedEventArgs e)

        {

            MouseEnter += FastScatter_MouseEnter;

            MouseLeave += FastScatter_MouseLeave;

        }

        void FastScatter_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e)

        {

            if (toolTip.IsOpen)

                toolTip.IsOpen = false;

        }

        void FastScatter_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)

        {

            VisualTreeHelper.HitTest(this, null, myCallback, new                             PointHitTestParameters(e.GetPosition(sender as UIElement)));

        }

        public HitTestResultBehavior myCallback(HitTestResult result)

        {

            if (result.VisualHit.GetType() == typeof (SyncDrawingVisual))

            {

                if (!toolTip.IsOpen)

                {

                    toolTip.IsOpen = true;

                    toolTip.Content = "I need this to depend on the chart data point Tag";

                    toolTip.PlacementTarget = this;

                }

            }

            return HitTestResultBehavior.Stop;

        }

}

Any idea how I can achieve this?

Regards,
Besiana

[Sheik Syed Abthaheer M]

Hi Besiana,

Thanks for your update.

You can achieve your requirement by applying Tootip property in Fastscatter chart Template as shown in the given code snippet

Code snippet [Xaml]:

<DataTemplate x:Key="fastscatter">

<local:FastScatter Points="{Binding Points}" Series="{Binding Series}" ToolTip="{Binding   ToolTip}" />

</DataTemplate>

Please let us know if you have any queries.

Regards,

M. Sheik Syed Abthaheer

[Besiana]

Hello, thank you for your reply.

I had tried that but the tooltip always shows the same point. It doesn't update based on the mouse position.

Kind regards,
Besiana

[Sheik Syed Abthaheer M]

Hi Besiana,

 

Thanks for your update.

 

We would like to inform you that, we cannot bind ToolTip value based on Datapoint values. Because we draw the FastScatter chart as a single segment.

However we can achieve your requirement (getting tooltip value based on Datavalue) through the workaround manner.

We have prepared the sample based on your requirement. Please download it from the given location.

 

Please let us know if you have any queries.

 

Regards,

M. Sheik Syed Abthaheer

 

FastScatterTooltipDemo_966ae9d8.zip