Chart performance with many data points

[Karl Grambow]

Hi,

I'm using an AreaSeries chart to display perfmon data (CPU, available memory) over time and the chart loads reasonably quickly.  However, if I zoom in or out, it's very slow (taking seconds to refresh).  Similarly, if increase the size of the WPF form, it forces the chart to redraw, which is also very slow.

I've disabled ListenPropertyChange and EnableAnimation.  I've also set the StrokeThickness to 1 but it doesn't seem to make much difference.

The XBindingPath, Date is of type DateTime and the YBindingPath has a decimal datatype.  The underlying ObservableCollection, MetricChartData has about 5000 rows in it.

Is there anything I can do to improve performance?

Thanks,

Karl

The XAML for the chart is below:

<chart:SfChart x:Name="chartPerformanceMetrics" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="6" Margin="5" HorizontalHeaderAlignment="Left" Background="White" BorderBrush="#D1D8DD" BorderThickness="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
    <chart:SfChart.Header>
        <TextBlock TextAlignment="Left" Text="Total CPU" FontFamily="Calibri" Foreground="#223F5D" FontSize="17" Margin="10" FontWeight="Bold"/>
    </chart:SfChart.Header>


    <chart:SfChart.Behaviors>


        <chart:ChartZoomPanBehavior EnableMouseWheelZooming="True" ZoomMode="XY" ResetOnDoubleTap="True">


        </chart:ChartZoomPanBehavior>


    </chart:SfChart.Behaviors>


    <chart:SfChart.PrimaryAxis>
        <chart:CategoryAxis TickLineSize="0"  LabelPlacement="BetweenTicks" ShowGridLines="false" Margin="0, 0, 0, 0" LabelFormat="dd MMM yyyy" AxisLineOffset="10" ShowAxisNextToOrigin="True" PlotOffset="10">
            <chart:CategoryAxis.LabelStyle>
                <chart:LabelStyle FontSize="12" Foreground="#8597B0" FontFamily="Calibri"/>
            </chart:CategoryAxis.LabelStyle>
        </chart:CategoryAxis>
    </chart:SfChart.PrimaryAxis>


    <chart:SfChart.SecondaryAxis>
        <chart:NumericalAxis Minimum="0" Visibility="Visible" Foreground="#8597B0" FontFamily="Calibri" FontSize="12"  ShowGridLines="false" Margin="10,0,0,0" LabelFormat="0" PlotOffsetEnd="10" RangePadding="AppendInterval">


        </chart:NumericalAxis>
    </chart:SfChart.SecondaryAxis>




    <chart:AreaSeries IsClosed="False" ItemsSource="{Binding MetricChartData}" ListenPropertyChange="False"  XBindingPath="Date" YBindingPath="MetricValue" EnableAnimation="False" StrokeThickness="1" Stroke="#dce5ed" Interior="#f1f5f8" Margin="0,0,0,0" ShowTooltip="True" chart:ChartTooltip.ShowDuration="3000">
        <chart:AreaSeries.TooltipTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Foreground="White" Margin="0,5,0,0">
                        <Run x:Name="toolTipMetric" Text="CPU: " FontWeight="Bold" />
                        <Run Text="{Binding Item.MetricValue, StringFormat=\{0\}}" />
                        <LineBreak />
                        <Run Text="Date: " FontWeight="Bold" />
                        <Run Text="{Binding Item.Date}" />
                    </TextBlock>
                </StackPanel>


            </DataTemplate>


        </chart:AreaSeries.TooltipTemplate>
    </chart:AreaSeries>


</chart:SfChart>

[Nitheeshkumar Thangaraj]

Hi Karl,

We would like to inform you that we added your provided code snippet to a simple sample and observed similar performance issues when zooming the chart with 5,000 data points. To better assist you, could you please let us know if there are any other changes or specific settings, you'd like us to test in the sample? If so, please modify the sample accordingly and let us know.

This will help us provide a more tailored and precise solution to address the performance concerns you're facing.

Regards,

Nitheeshkumar.

Attachment: PerformanceSample_d864f1b8.zip

[Karl Grambow]

Hi Neethshkumar,

Thanks for the follow up.  The only settings that I would (ideally) like to use are EnableAnimation = true and a Strokethickness of 2 (instead of 1).

Neither of these settings are essential though and if performance is improved without these settings then I'm happy to leave as-is.

Regards,

Karl

[Nitheeshkumar Thangaraj]

Hi Karl,

Thank you for the update. We will test these settings and evaluate their impact on performance and update you more details on two business days (Aug 22,2024). If you have any further preferences or concerns, please let us know.

Regards,

NitheeshKumar.

[Dhanaraj Rajendran]

Hi Karl,

We’ve validated the performance of the chart during zooming and resizing and observed that the current implementation uses lines to draw each segment, which can lead to slower performance, especially with a large number of data points like the 5000 rows in your data.

To improve performance, we recommend using the FastSeries or FastBitmapSeries types. Although the FastBitmapSeries doesn't directly support an Area chart, you can achieve a similar appearance by using the FastBitmapRangeAreaSeries with the low value as 0for all data points. This will give the visual effect of an Area series. Additionally, we suggest setting the stroke thickness to 1 for the FastBitmapSeries for a more refined user interface.

UG Documentation: FastBitmap Range Area Series in WPF SfChart

For even better performance and UI quality, enabling anti-aliasing is also recommended.

Thank you for your understanding, and please let us know if you need further assistance.

Regards,

Dhanaraj Rajendran.

[Karl Grambow]

Hi Dhanaraj,

Thanks for the suggestion.  I can use the FastLineBitMapSeries and that works really well and the performance is great.  However, when I try to use FastRangeAreaBitMapSeries, the chart doesn't display at all.  I'm not sure if I've made a mistake in my implementation but here's the XAML code:

<chart:SfChart x:Name="chartPerformanceMetrics" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="6" Margin="5" HorizontalHeaderAlignment="Left" Background="White" BorderBrush="#D1D8DD" BorderThickness="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
    <chart:SfChart.Header>
        <TextBlock TextAlignment="Left" Text="Total CPU" FontFamily="Calibri" Foreground="#223F5D" FontSize="17" Margin="10" FontWeight="Bold"/>
    </chart:SfChart.Header>


    <chart:SfChart.Behaviors>


        <chart:ChartZoomPanBehavior EnableMouseWheelZooming="True" ZoomMode="XY" ResetOnDoubleTap="True">


        </chart:ChartZoomPanBehavior>


    </chart:SfChart.Behaviors>


    <chart:SfChart.PrimaryAxis>
        <chart:CategoryAxis TickLineSize="0"  LabelPlacement="BetweenTicks" ShowGridLines="false" Margin="0, 0, 0, 0" LabelFormat="dd MMM yyyy" AxisLineOffset="10" ShowAxisNextToOrigin="True" PlotOffset="10">
            <chart:CategoryAxis.LabelStyle>
                <chart:LabelStyle FontSize="12" Foreground="#8597B0" FontFamily="Calibri"/>
            </chart:CategoryAxis.LabelStyle>
        </chart:CategoryAxis>
    </chart:SfChart.PrimaryAxis>


    <chart:SfChart.SecondaryAxis>
        <chart:NumericalAxis Minimum="0" Visibility="Visible" Foreground="#8597B0" FontFamily="Calibri" FontSize="12"  ShowGridLines="false" Margin="10,0,0,0" LabelFormat="0" PlotOffsetEnd="10" RangePadding="AppendInterval">


        </chart:NumericalAxis>
    </chart:SfChart.SecondaryAxis>




    <chart:FastRangeAreaBitmapSeries ItemsSource="{Binding MetricChartData}" ListenPropertyChange="True"  XBindingPath="Date" Low="0" High="MetricValue" EnableAnimation="True" StrokeThickness="1" Stroke="#5e9ad7" Interior="#bed6ef" Margin="0,0,0,0" ShowTooltip="True" chart:ChartTooltip.ShowDuration="3000">
        <chart:FastRangeAreaBitmapSeries.TooltipTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Foreground="White" Margin="0,5,0,0">
                        <Run x:Name="toolTipMetric" Text="CPU: " FontWeight="Bold" />
                        <Run Text="{Binding Item.MetricValue, StringFormat=\{0\}}" />
                        <LineBreak />
                        <Run Text="Date: " FontWeight="Bold" />
                        <Run Text="{Binding Item.Date}" />
                    </TextBlock>
                </StackPanel>


            </DataTemplate>


        </chart:FastRangeAreaBitmapSeries.TooltipTemplate>
    </chart:FastRangeAreaBitmapSeries>


</chart:SfChart>

[Nitheeshkumar Thangaraj]

Hi Karl,

We have reviewed the code snippet you provided. It seems that in the FastBitmapRangeAreaSeries, the YBindingPath is incorrectly set directly to zero, which is why the series is not rendering. To resolve this, you need to bind the Low property of the series to the appropriate property in your model. Instead of assigning zero directly, bind the model's property to the series' Low property. In your model, you can set the Low property to zero. After implementing these changes, the series should render correctly. We've attached a code snippet and image for your reference.

public class ChartModel

{  

    public DateTime Date { get; set; }

    public double MetricValue { get; set; }

    public double Low { get; set; } =0;

}

<chart:FastRangeAreaBitmapSeries ItemsSource="{Binding MetricChartData}"     ListenPropertyChange="True" 

                                  XBindingPath="Date"

                                  High="MetricValue"

                                  Low="Low"

                                  EnableAnimation="True"

                                  StrokeThickness="1" Stroke="#dce5ed"

                                  Interior="#f1f5f8" Margin="0,0,0,0"

                                  ShowTooltip="True" chart:ChartTooltip.ShowDuration="3000">

Please modify your sample with our suggestions and check the performance of the FastBitmapRangeAreaSeries chart. If you need further assistance after making these changes, feel free to let us know. We're here to help!

Regards,

Nitheeshkumar.

[Karl Grambow]

Thanks Nitheeshkumar,

That's perfect.  Thanks for all your support.

Regards,

[Preethi Rajakandham]

Hi Karl Grambow,

You're welcome. We are glad to know that the reported problem has been resolved. Please let us know if you require any further assistance on this. We will be happy to assist you.

Regards,

Preethi R