We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Wpf Chart Series Symbol in FastScatter

Thread ID:

Created:

Updated:

Platform:

Replies:

108007 Mar 29,2013 08:36 PM Apr 4,2013 07:10 AM WPF 7
loading
Tags: Chart
Besiana
Asked On March 29, 2013 08:36 PM

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 [Syncfusion]
Replied On April 1, 2013 08:35 AM

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
Replied On April 2, 2013 06:13 PM

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 [Syncfusion]
Replied On April 3, 2013 03:18 AM

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
Replied On April 3, 2013 07:58 AM

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 [Syncfusion]
Replied On April 3, 2013 08:56 AM

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
Replied On April 3, 2013 09:45 AM

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 [Syncfusion]
Replied On April 4, 2013 07:10 AM

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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;