Partager via


Microsoft Chart Control How-to: Improve Chart Performance

imageThere are several main areas that affect performance of the chart:

  • Data binding.
  • Rendering of the chart visual elements.
  • Streaming chart image from the server to the client. (ASP.NET only)

 

The following chart scenarios may have a major impact on performance and we going to discuss their affect in details below:

  • Large data sets
  • Chart type used
  • Data point tooltips
  • Hyperlinks using the Url property
  • Image size and type
  • Border skins
  • View state

Binding to Large Data Sets

When a chart is bound to a data set with over a 1000 data points, binding performance can take significant amount of time.

To optimize chart performance, we recommend the following:

  • Optimize your query
  • Avoid multiple passes through the data
Optimizing the query

Make sure you optimize the way you retrieve the data and that you only getting the data you need to display in the chart. You may consider grouping data to decrease total number of points. For example, if you display stock data for 5 years, instead of returning daily stock price you can aggregate it into the weekly price.

Avoid multiple passes through large data set

If you binding multiple series, make sure you are iterating the data source only once. Do not use DataBindXXX methods for each of the series, because each of this calls will iterate through the data source.

The best approach is to use DataBindCrossTab method of the chart or 'manually' iterate once through the data source and add points in the chart using AddXY method of DataPointCollection object.

Spline vs. Line vs. FastLine Charts

Selection of the chart type if you have a significant amount of data points in the series will have a significant impact on the chart performance.

For example, Spline charts are known to degrade performance, since they are actually calculated areas. This means that they require a great deal of calculation in order to be drawn, especially in 3D mode. The necessary calculations, and processing are being done by the GDI+ engine.

For optimal performance, we recommend avoiding spline-type charts if possible. Try using another chart type, such as a line chart instead.

In cases when you need to draw more than 100,000 data points you may also consider using FastLine and FastPoint chart types. They do not support all the features of the regular Line and Point chart but will SIGNIFICANTLY improve chart performance.

Tooltips

If there are numerous chart series data points, displaying them using the Tooltip property will seriously affect performance, since each tooltip results in the creation of a map area element. In addition to this, each tooltip must be calculated by the chart every time it is redrawn. Thus, if a chart has 1000 data points, all with an associated tooltip, then the page that displays the chart image will have 1000 MapArea elements for the tooltips. In ASP.NET application MapAreas are rendered as part of the page and may take significant time to download to the client.

If performance is critical and chart contain significant amount of data points consider avoiding using of tooltips. In Windows Forms application it may be more efficient to create on-demand tooltip using the timer and HitTest function of the chart.

Care must also be taken when setting the Url and MapAreaAttributes properties. This situation is similar to using tooltips, since each chart element that has its Url property set, which results in a MapArea element that is recalculated each time the chart is redrawn.

If you must use one of the Tooltip, Url or MapAreaAttributes properties, using the second property has little affect.

Image Size and Type (ASP.NET only)

The larger the image size of the chart, the longer it will take to be streamed back to the requesting client. Also, the type of image being generated will affect its size. For example, a bitmap chart will be much larger than the exact same PNG chart. PNG is the recommended image type.

View State (ASP.NET)

Persisting the view state of the chart many data points may significantly increase the size of the response and amount of time required for the download.

Chart control provides additional functionality to optimize its view state. Please refer to the documentation and Chart Sample Framework.

Border Skins

Decorative borders, which can be set using the Chart.BorderSkin property, will also have a major impact on the chart's performance, since they require a considerable amount of time to render. You can gain some chart performance by removing them.

Hope this information is helpful and will allow you to squeeze more out of the Microsoft Chart Control!

Alex.

Comments

  • Anonymous
    January 30, 2009
    Hello Mr. Gorev,I am using the chart control.  It is awesome.  However, if I use a Border Skin (any style but most noticeable with "emboss") and set the PageColor to transparent I get a "false border" on the image's top and left edges.  This "false border" is whatever color is set for the back color of the chart.  An example of what I mean can be seen here http://farm4.static.flickr.com/3320/3239422640_9de45c89e1_o.png.
  • Anonymous
    January 30, 2009
    Please post chart control questions on this forum: http://social.msdn.microsoft.com/Forums/en-US/MSWinWebChart/threads/Alex.
  • Anonymous
    April 22, 2009
    The comment has been removed
  • Anonymous
    November 25, 2010
    Hi Alex,Possible MapAreas can have borderwidth or borderskin?Jane
  • Anonymous
    February 22, 2011
    The comment has been removed
  • Anonymous
    March 20, 2012
    I have a chart which shows purchase details in category wise. now I want to get the XAxis label and fire the service to  when i click the series in chart. For this, what i have to do?
  • Anonymous
    October 06, 2012
    The comment has been removed
  • Anonymous
    August 24, 2014
    I have 6 different tables in database so i have to use 6 dataset and 6 lengthy queries and i am using pie chart and column chart in that page to show the same data everything is fine but the loading time of the chart page is long .  Do you have any solution?  Thanks in advance