Stress-Test Rendering to Optimize Performance

In many financial and medical applications, rendering multiple charts on a single screen with near real-time data is a standard practice. You need to ensure that your UI tools can match the demands of these high-stress data scenarios — where multiple charts are updating data in real-time as fast as the eye can see. In this lesson, you’ll see how the Infragistics Ultimate UI for Xamarin data chart performs under this level of stress on standard tablets and phones, and how you can tweak the charts to optimize performance.

This lesson performs a stress test by using multiple charts in a single view. You will create three different charts that use three separate data sources in a single view. When you deploy the solution, you will see that the charts perform at a high framerate with thousands of data points.

Lesson Objectives

This lesson performs a stress test by using multiple charts in a single view. You will create three different charts that use three separate data sources in a single view. When you deploy the solution, you will see that the charts perform at a high framerate with thousands of data points.

The steps you’ll perform to do this are:

  1. Define the data source
  2. Create a single chart
  3. Test the solution
  4. Add charts to the solution
  5. Retest the solution

For more information on the control used in this lesson, see the Xamarin Data Chart Control page.

Step 1: Setting up the Project

You can download the project used in this lesson by clicking here.

Set up Project: Unblock

Then, to run the projects for the first time after un-zipping, load the entire solution into Visual Studio, right-click on the Solution, and select Restore Packages.

Once that is complete, add a reference to both the Portable Class Library and the Android project to DataSource.DataProviders.OData.Core.dll. This file is in the OtherDependencies folder that is part of the ZIP download. You can do this by right-clicking the Reference folder in the Project, browsing to the OtherDependencies folder, and selecting the DataSource.DataProviders.OData.Core.dll.

Set up Project: OData Reference

Do this for both projects in the solution. Then, finally, ensure the Target Android Version is set to "Use Compile using SDK version." You can find this setting by right-clicking on the Android project and selecting Properties.

Set up Project: Android

Step 2 Create a Single Chart

The first step is to open the ChartStressTest.xaml file that is located in Views. This file contains pre-defined code for the Infragistics Charts namespace, as well as a grid with row and column definitions. With this sample, you will meter how much data is used by the app. You could also do this by using the Infragistics Toolbox to drag and drop the chart requirements with XAML.

In the Grid, insert the following code segment to define the category chart.

<igCharts:XamCategoryChart x:Name="chart1" Title="Chart1"
                            ItemSource="{Binding Path=Data}"
                            MarkerTypes="None"
                            Grid.Row="0">

</igCharts:XamCategoryChart>
<Label Text="{Binding Path=FpsText}" Grid.Row="1" />

This code segment creates a chart using the specified data source. By default, markers are enabled and this code segment disables them. We also create a label using the FpsText data to test the number of frames per second (fps).

Create a Single Chart

Step 3 Test the Solution

After configuring the chart, you can now test the solution on an emulator or physical hardware device. For this lesion, we will test using an Android 6.0 emulator. This will compile the application, build the APK, and deploy the package to the emulator or device. The debugger will start in the background in Visual Studio, and you will be able to interact with the app. From the app, click CHART – STRESS TEST.

Test the Solution

The line chart will be generated. The frames per second (fps) and amount fields will be updated at the bottom. In our example, there are approximately 1,000 data points per series being used, and the chart is being displayed at over 40 fps.

Step 4 Adding Charts to Solution

To demonstrate the capabilities of the stress test, we’ll incrementally add more properties to an additional chart in the app. Add the following code segment after chart1.

<igCharts:XamCategoryChart x:Name="chart2" Title="Chart2" ItemSource="{Binding Path=Data1}"
                              MarkerTypes="None"
                              YAxisExtent="40"
                              XAxisExtent="40"
                              Grid.Row="1">
</igCharts:XamCategoryChart>

<igCharts:XamCategoryChart x:Name="chart2" Title="Chart2" ItemSource="{Binding Path=Data1}"
                              MarkerTypes="None"
                              YAxisExtent="40"
                              XAxisExtent="40"
                              YAxisMinimumValue="0"
                              YXaisMaximumValue="100"
                              Grid.Row="2">
</igCharts:XamCategoryChart>

<Label Text="{Binding Path=FpsText}" Grid.Row="3" />

The above code segment adds two charts to the view, and defines the Y-axis and X-axis defaults. The third chart also defines the default values for the Y-axis for the chart, which minimizes the amount of work the chart has to do at runtime. We also need to modify the label text property to be displayed on the third row.

adding Charts to Solution

Step 5 Retest the Solution

Deploy the solution to your emulator or device to display the newly created charts. Notice that the first two charts create a Y-axis that is variable to the data in the source, and the third chart is automatically set to 100 from the defined properties. After the chart loads, the frames per second will average approximately 25-30 frames per second, regardless of using portrait or landscape mode.

Retest the Solution

Conclusion

The XamCategoryChart enables you to use several charts with multiple data sources in a single view without sacrificing performance.