How to draw a chart with Min/Max/Median/Avg.

Hi.

I'm working ( as a hobby ) on an application which will produce several statistics on lottery numbers.

One chart will draw min/max/median/avg weeks between each time a number is drawn.


I have tried to show this in the (rather crude) drawing I have supplied.

On the vertical axis is the number ( 1 to 34 really ).

On the horizontal axis is the number of weeks ( between 3.5 and 6 in reality ;--) )

The blue circles marks the minimum values.

The purple circles marks the maximum values.

The red triangles marks the median values.

The green squared marks the average values.


Could You please help me with choosing which chart to use in order to display this type of data.

And also provide me with some starter code.


Could this task be simpler to solve if I choose a different desktop solution other than wpf.

I do not have to use wpf, it's only a hobby project.


Best regards



Attachment: crude_maxminmedianavg_drawing_996eb42d.zip

1 Reply

YP Yuvaraj Palanisamy Syncfusion Team May 16, 2022 01:50 PM UTC

Hi Jan Frode Engh,


We have analyzed your query and we have achieved your requirement as per the provided image with the help of CustomTemplate support for ChartSeries. Please find the code example below.


CodeSnippet:

<chart:SfChart.Resources>

    <ResourceDictionary>

 

        <DataTemplate x:Key="Triangle">

            <Canvas>

                <Path Canvas.Left="{Binding RectX}"                         

                      Canvas.Top="{Binding RectY}"

                      Stroke="{Binding Stroke}"

                      Stretch="Fill"

                      Fill="{Binding Interior}"

                      StrokeThickness="{Binding StrokeThickness}">

                <Path.Data>

                    <PathGeometry>

                        <PathFigure StartPoint="5,0" IsClosed="True">

                            <LineSegment Point="10,10" />

                            <LineSegment Point="0,10"/>

                            <LineSegment Point="5,0"/>

                        </PathFigure>

                    </PathGeometry>

                </Path.Data>

            </Path>

            </Canvas>

        </DataTemplate>

 

        . . .

 

    </ResourceDictionary>

</chart:SfChart.Resources>

 

<chart:ScatterSeries Label="Median"

                     x:Name="Median"

                     ItemsSource="{Binding Data}"

                     IsTransposed="True"

                     XBindingPath="X"

                     YBindingPath="Median"

                     LegendIcon="Triangle"

                     CustomTemplate="{StaticResource Triangle}"

                     Interior="Red"

                     ScatterHeight="8"

                     ScatterWidth="8">

</chart:ScatterSeries>

 

. . .


We have attached the sample for your reference. Please find the sample from the below attachment.


Output:

For more details, please refer the below link
https://help.syncfusion.com/wpf/charts/seriestypes/custom

https://www.syncfusion.com/kb/3853/how-to-customize-the-default-shape-of-wpf-chart-sfchart-series


Please let us know if you have any further assistance.


Regards,

Yuvaraj.


Attachment: Scatter_Shape_71d2091b.zip

Loader.
Up arrow icon