Welcome to MSDN Blogs Sign in | Join | Help

Displaying Categorical Axis Labels.

In this post I will discuss labeling of the categorical axes in SQL Reporting Services (SSRS) and .NET Chart controls. Same engine is used between these two products and they have exactly the same behavior. You can find detailed steps and sample code at the end of the post.

Before we start, lets have a look how automatic chart axis labels work... When you data bind your chart, axis automatically calculates data scale and sets axis Minimum and Maximum values. Based on the axis scale, chart determines axis labels text, interval (how often labels are shown), font size and label rotation, so that labels do not overlap each other. Below you can see a simple chart with categorical values (countries) shown on the bottom axis:

image

As you can see, there is not enough space to show all the labels and chart only displays every other country. For categorical axis it is important to show as many categories as possible and here are few different tricks which will help you achieving that.

Solution 1: Force chart axis to display every category.

Chart axis Interval property allows you to provide your own custom interval for axis labels, grid lines and tick marks. Our first solution is to set this property to 1, which will force the chart to display every single category. As you can see on the chart below, every country will become visible and chart will automatically rotate labels to better fit them. If you are using Column chart type you can also switch to Bar chart type to avoid labels rotation. 

imageimage

This is a very simple approach but you should also be aware of the possible down sides. In case you have too many categories, labels auto-fit algorithm may not be able to completely avoid labels overlapping and they will be very hard to read. I simulated this by reducing our original chart width in half and as you can see it is very hard to read the labels. If we double number of data points (countries) it will be even harder to read this chart.

image

Solution 2: Enable Variable Count interval and set preferred labels appearance

Second solution keeps the axis Interval in automatic mode, so that in extreme cases we can still reduce number of labels on the axis. First step is to disable labels auto fitting and specify the preferred font size and rotation. In our case we are trying to fit as much labels as possible, so we will set axis labels rotation angle to 90 degrees. And the last step is to enable Variable Interval calculation mode on the axis. By default, chart displays about 5 labels on the axis no matter how long it is, Variable Interval mode will allow you display as many labels as we can fit into the axis. After all this changes you should see something very similar to the Solution 1 chart:

image

Now let's try to reduce the size of the chart and see what will be different... As you can see in the image below, when chart cannot fit more vertically oriented labels it starts skipping them to avoid making chart completely unreadable.

image

Conclusion

When categories are displayed on the axis, there is no grantee that all of them will be shown. You can set axis interval to 1 if it is extremely important to see every category but keep in mind that labels may overlap if there are too many categories. Use Variable Interval and labels rotation if you want to fit as many labels as possible and still have labels skipping in extreme cases.

SSRS Steps

Steps to apply Solution 1:

- Right click on the bottom axis and choose Axis Properties from the context menu

- Set Interval field to 1 in the Axis Options property page

- Press Ok to close property dialog

Steps to apply Solution 2:

- Make sure Properties View is enabled

- Click on the axis to select it and display it's properties in the Properties View

- Set VariableAutoInterval property to True

- Set LabelsAngle property to 90

- Click Yes on the pop-up dialog to labels disable auto fitting

 

.NET Chart Sample Code

// Solution 1: Setting axis Interval  
this.Chart1.ChartAreas[0].AxisX.Interval = 1; 
 
// Solution 2: Enable variable interval  
this.Chart1.ChartAreas[0].AxisX.Interval = double.NaN; 
this.Chart1.ChartAreas[0].AxisX.IntervalAutoMode = IntervalAutoMode.VariableCount; 
this.Chart1.ChartAreas[0].AxisX.LabelStyle.Angle = 90;

Alex.

Aligning Multiple Series with Categorical Values

Binding Categorical Data Overview

Binding chart to the data source with categorical values is pretty simple and usually requires just one line of code:

  
Chart1.Series["Series1"].Points.DataBind(mySource, "ProductName", "Sales"); 

It is important to understand that after DataBind method creates series DataPoint objects, their XValue property will always be set to zero and category is saved in the AxisLabel property. Position of each data point along the category axis is determined using the index of the object in Series.Points collection. Below is an example of what your chart may look like:

clip_image002

Alignment of Multiple Series

When you bind multiple series with categorical values you may run into some un-expected results based on how you prepare your data source. For example, let's imagine that our two chart series are bound to this data:

Series 1 Series 2
Product A = 320 Product B = 420
Product B = 580 Product E = 830
Product C = 980  
Product E = 100  
Product F = 220  

As you can notice, we have less categories for the second series and their order does not match categories from the first series. If we try binding chart to this data we will end up with the chart shown below. Chart uses index of the data point to position them along the axis and we end up with orange series points in the wrong position. I added data point labels so that it would easier to see the issue.

clip_image004

In order to resolve this we can modify our data source to contain same number of categories in the same order like this:

Series 1 Series 2
Product A = 320 Product A = Null
Product B = 580 Product B = 420
Product C = 980 Product C = Null
Product E = 100 Product E = 830
Product F = 220 Product F = Null

Simpler approach is just to make a single call to Chart.AlignDataPointsByAxisLabel method which will automatically align the two series by inserting empty points and the end result will look like this:

clip_image006

Hope this helps!

Alex.

Charting With ASP.NET and LINQ

image Check out the new MSDN article about how to use ASP.NET Chart control with LINQ by K. Scott Allen: http://msdn.microsoft.com/en-us/magazine/dd453008.aspx

Alex.

Posted by alexgor | 0 Comments
Filed under: , , ,

Deploying Microsoft Chart Controls

MSChart.exe setup should be used to deploy Microsoft Chart controls but what exactly need to be done to create a deployment package in Visual Studio? Visual Studio provides an easy way to add the prerequisites using bootstrappers, and thanks to Phil Preen, now we have a detailed instructions on how to create and use .NET Chart Control bootstrapper.

You can find his article here: http://www.philpreen.co.uk/MSChart/

Alex.

Data Binding Microsoft Chart Control

Overview

When you add a new visualization in your application, the very first thing you do, is bind it to the data. Microsoft Chart control allows many different ways of populating data in the chart and it is important to understand the differences between them and being able to choose the best approach. I put together all the possible data binding options and the scenarios when they should be used.

Data Sources

Before jumping into the binding methods I want to quickly list all the supportable data sources which can be used in chart binding methods. Keep in mind that not all methods accept all source types.

  • SqlCommand
  • OleDbCommand
  • SqlDataAdapter
  • OleDbDataAdapter
  • DataView
  • DataSet
  • DataReader
  • List
  • Array
  • IList
  • IListSource
  • IEnumerable

Data Point X and Y values

When you bind chart you create series and series data points. Each data point in the series should have it's Y value set and in addition to the Y value you can also bind or set other data point properties:

  • X Value - Defines location of the data point along X axis. If not specified, data point index in the series will be used.
  • Additional Y Values - Chart types like Bubble or Stock require multiple Y values. You can also bind additional Y values in the regular chart types, if you want to use those values for labels or tooltips.
  • Category - When you displaying categories on the X axis, they are stored in the AxisLabel property of the data point. All data binding methods will automatically detect the type of the data and you should not worry about it.
  • Other Properties - Some of the binding methods allow you to set additional properties like data point labels, tooltips and others.

Binding Options Overview

This table lists data binding techniques, starting from the most basic methods proceeding to more advanced.

Chart.DataBindTable

  • Simple binding for X and Y values.
  • Automatic series creation, based on the number of columns in the data source.
  • No multiple Y values per series.
  • All series have same X value, or it is not set.
  • No binding for extended chart properties like tooltips.

Chart.DataSource and Chart.DataBind

  • Can be used at design-time.
  • Supports multiple Y values.
  • No binding for extended chart properties like tooltips.

Points.DataBind(X)Y

  • Supports multiple data sources, including separate data source for X and Y values.
  • Supports multiple Y values.
  • Provides more flexibility than methods above
  • No binding for extended chart properties like tooltips.

Points.DataBind

  • Same as the above, plus:
  • Supports binding for extended chart properties like tooltips.
  • Does not support different data sources for X and Y values of a series.

Chart.DataBindCrossTab

  • Automatically creates series for each unique value in specified column used to group the data.
  • Only single level grouping is supported.

Binding Options Details

Chart.DataBindTable method

The Chart.DataBindTable method is the simplest way to bind chart to a table with several columns. New series will be automatically created for each of the columns and you can optionally use one column for the X value for all series.

Example

Imagine you have a data source containing these columns: Prod A, Prod B, Prod C, Prod D, Prod E, Other and SalesName, you can easily create chart below with a single line of code:

Chart1.DataBindTable(myReader, "SalesName");

image

 

Chart.DataSource property

Chart DataSource property is the only way to bind chart at design-time. In addition to specifying the DataSource property you also need to create series and set their YValueMembers and optionally XValueMember properties. Multiple Y values can be bound if you specify comma separated list of members in the YValueMembers property.

Chart will automatically bind itself to specified data source and members just before rendering. You can force chart to bind at any moment by calling Chart.DataBind() method.

// Set chart data source
chart1.DataSource = myCommand;
 
// Set series members names for the X and Y values
chart1.Series["Series 1"].XValueMember = "Name";
chart1.Series["Series 1"].YValueMembers = "Sales";
 
// Data bind to the selected data source
chart1.DataBind();

 

DataBindCrossTab

The Chart.DataBindCrossTab is different compared to all other binding methods, in that it allows for the grouping of unique values in a column. Each unique value in the specified grouped column results in the creation of a data series. In addition, extended data point properties other than X and Y values can be bound.

These other properties are bound using the otherFields parameter using this syntax:

PointProperty=Field[{Format}] [,PointProperty= Field[{Format}]].

A list of these properties are as follows: AxisLabel, Tooltip, LabelLegendTextLegendTooltip and CustomPropertyName (the name of a custom property). For more information on possible formats see the Formatting Types topic in the MSDN library.

Example

In the sample below we have a table that has the sales and commissions of sales people for three years. We group by the "Name" column, thereby creating one data series per sales person. The X values are bound to the "Year" column, the Y values are bound to the "Sales" column, the Label property of the resulting data points (one per record) is bound to the "Commissions" column, and the LegendText property is bound to the "Name" column. 

image

image

// Group by "Name" column, bind X values to "Year", Y values to "Sales",
// and Label property to "Commissions.
chart1.DataBindCrossTab(myReader, "Name", "Year", "Sales", "Label=Commissions");

 

Points.DataBind

This method allows for data point properties other than X and Y values to be bound to data columns. For example, you want to set data point label to a value in one of the data source columns. These other properties are bound using the otherFields parameter using this syntax:

PointProperty=FieldName[{Format}][,PointProperty= FieldName[{Format}]]

A list of these properties includes: AxisLabel, Tooltip, LabelLegendTextLegendTooltip and CustomPropertyName (the name of a custom property).

This method does not allow you to specify separate data sources for the X and Y values of a series (for this functionality use the DataBind(X)Y methods described in the section above).

Example

Code below demonstrates how to bind X and Y values of the series to columns "Name" and "Sales" respectively. The Label and Tooltip properties of the resulting data points are also bound to the "Commissions" and "Year" column.

Chart1.Series["Series1"].Points.DataBind(
myReader, "Name", "Sales", "Tooltip=Year, Label=Commissions{C2}");
 

 

Points.DataBind[X]Y

The DataBindXY method allows for the binding of X and Y values of a series, while DataBindY binds Y values only. When binding X and Y values using DataBindXY the same or different data sources may be used.

Some data sources support multiple values (e.g. data sources that have columns of data). For example, OleDbDataReader may have access to more than one column of data. If the column to be used is not specified, then the first available column will be used. To use a column other than the first one just specify the column name in the method call.

Note that when specifying the column names to be bound to the Y values a comma can be embedded as part of a column name by specifying a double comma.

Example

Code below demonstrates how to bind series points to the array of doubles.

// Initialize an array of doubles.
double [] array = { 2.8, 4.4, 6.5, 8.3, 3.6, 5.6, 7.3, 9.2, 1.0};
 
// Bind the double array to the Y axis points of the data series.
Chart1.Series["Series1"].Points.DataBindY(array);

'Manual' series population

In case you need to perform some custom actions while binding and none of the above methods works, you can always 'manually' bind chart by iterating through the data source and add data points to the series as needed. This approach is also very useful when series data is calculated using some formula.

Example

// Resolve the address to the Access database
string fileNameString = this.MapPath(".");
fileNameString += "..\\..\\..\\data\\chartdata.mdb";
 
// Initialize a connection string
string myConnectionString = "PROVIDER=Microsoft.Jet.OLEDB.4.0;Data Source=" + fileNameString;
 
// Define the database query
string mySelectQuery="SELECT * FROM SALESCOUNTS;";
 
// Create a database connection object using the connection string
OleDbConnection myConnection = new OleDbConnection(myConnectionString);
 
// Create a database command on the connection using query
OleDbCommand myCommand = new OleDbCommand(mySelectQuery, myConnection);
 
// Open the connection
myCommand.Connection.Open();
 
// Initializes a new instance of the OleDbDataAdapter class
OleDbDataAdapter myDataAdapter = new OleDbDataAdapter();
myDataAdapter.SelectCommand = myCommand;
 
// Initializes a new instance of the DataSet class
DataSet myDataSet = new DataSet();
 
// Adds rows in the DataSet
myDataAdapter.Fill(myDataSet, "Query");
 
foreach(DataRow row in myDataSet.Tables["Query"].Rows)
{
   // For each Row add a new series
   string seriesName = row["SalesRep"].ToString();
   Chart1.Series.Add(seriesName);
   Chart1.Series[seriesName].ChartType = SeriesChartType.Line;
   Chart1.Series[seriesName].BorderWidth = 2;
 
   for(int colIndex = 1; colIndex < myDataSet.Tables["Query"].Columns.Count; colIndex++)
   {
      // For each column (column 1 and onward) add the value as a point
      string columnName = myDataSet.Tables["Query"].Columns[colIndex].ColumnName;
      int YVal = (int) row[columnName];
 
      Chart1.Series[seriesName].Points.AddXY(columnName, YVal);
   }
}
 
DataGrid.DataSource = myDataSet;
DataGrid.DataBind();
 
// Closes the connection to the data source. This is the preferred
// method of closing any open connection.
myCommand.Connection.Close();
 

Other useful things to know

Here are couple things that you should know about when binding chart:

  • Empty Points - Understand what empty points are and how you can use them. Right now the best source of the information is Chart Sample Environment but I will blog about it later.
  • AlignDataPointsByAxisLabel - If you are using a stacked chart type with categorical X axis this helper method can be very useful. Find more information in the documentation and Chart Sample Environment.

ASP.NET Connections 2009

imageHave a question about the ASP.NET chart control? Want to meet and discuss the future visualization roadmap? I will be at the ASP.NET Connections March 22-25. See you there!

http://www.devconnections.com/

Alex.

Posted by alexgor | 1 Comments

Using Chart HTTP Handler

image Delian Tchoparinov just posted on his blog about chart image rendering using Chart HTTP Handlers. This is very useful reading for everybody using the ASP.NET version of the Microsoft Chart control. You can find this post here.

Alex.

Chart SharePoint Web Part

image

You can easily create charting SharePoint Web Part using new Microsoft Chart Control. Wictor Wilen created a "ChartPart for SharePoint" project on Codeplex, which is a ready to use WebPart with source code. If you want to create your own WebPart also check out this tutorial created by Marc Charmois!

Alex.

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.

Hyperlinks and Map Area attributes (ASP.NET only)

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.

Microsoft Chart Control How-to: Using in a SharePoint web site

image Thanks to Marc Charmois we have a very nice example of using the chart control in the SharePoint web site. Here is a link to his post

I will continue collecting links to all the good posts regarding the chart control in my blog.

Alex.

Combining ASP.NET MVC and ASP.NET Charting Controls

image

Melvin Harbour recently posted in his blog about using ASP.NET Chart control with ASP.NET MVC.

Alex

Microsoft Chart Control How-to: Add Rich Content Using Keywords

image

Adding Labels or Tooltips is a simple task in the chart, but what if we want to show more data than just a simple data point value? Keywords allows specifying rich content for many text based properties, so that you can build a tooltip as shown in this Bubble chart image.

A Keyword is a specially formatted character sequence which can be used in many chart string properties to provide rich content. During the rendering of the chart, each Keyword is replaced with a value from the chart series or data point. For example, Keywords may be used to display several series values in the chart data point labels or tooltips. The sample below will display series data point Y value using the currency format string in the tooltip.

chart.Series[0].Tooltip = “Data Point Y Value: #VALY{C0}”

As you may notice, to specify a tooltip on all chart data points we only need to set a single property of the series. You can use multiple keywords in one string and also specify optional formatting string.

Use cases

1) I want series data points to display a label with category name and price. Label example: "Bike -> $2.00"

series.Label = "#AXISLABEL -> #VALY{C}";

2) I'm using a Bubble chart with 2 Y values presenting model price and popularity index and I want to show this to values in my data points tooltip. Here is tooltip example:

"Model:               XR300
Popularity Index: 4.5"

series.ToolTip = "Model: \t#AXISLABEL\nPopularity Index: \t#VALY";

3) I want to enable a postback and get an index of the data point the customer clicked on, so I can perform a drill-down action.

series.PostBack = "#INDEX";

4) I want to add additional columns in the legend to show average, minimum and total of my series as shown in the chart below:

 image

// Add header separator of type line      
Chart1.Legends["Default"].HeaderSeparator = LegendSeparatorStyle.Line;     
Chart1.Legends["Default"].HeaderSeparatorColor = Color.Gray;     
   
// Add Color column      
LegendCellColumn firstColumn = new LegendCellColumn();     
firstColumn.ColumnType = LegendCellColumnType.SeriesSymbol;     
firstColumn.HeaderText = "Color";     
firstColumn.HeaderBackColor = Color.WhiteSmoke;     
Chart1.Legends["Default"].CellColumns.Add(firstColumn);     
   
// Add Legend Text column      
LegendCellColumn secondColumn = new LegendCellColumn();     
secondColumn.ColumnType = LegendCellColumnType.Text;     
secondColumn.HeaderText = "Name";     
secondColumn.Text = "#LEGENDTEXT";     
secondColumn.HeaderBackColor = Color.WhiteSmoke;     
Chart1.Legends["Default"].CellColumns.Add(secondColumn);     
   
// Add AVG cell column      
LegendCellColumn avgColumn = new LegendCellColumn();     
avgColumn.Text = "#AVG{N2}";     
avgColumn.HeaderText = "Avg";     
avgColumn.Name = "AvgColumn";     
avgColumn.HeaderBackColor = Color.WhiteSmoke;     
Chart1.Legends["Default"].CellColumns.Add(avgColumn);     
   
// Add Total cell column      
LegendCellColumn totalColumn = new LegendCellColumn();     
totalColumn.Text = "#TOTAL{N1}";     
totalColumn.HeaderText = "Total";     
totalColumn.Name = "TotalColumn";     
totalColumn.HeaderBackColor = Color.WhiteSmoke;     
Chart1.Legends["Default"].CellColumns.Add(totalColumn);     
   
// Set Min cell column attributes      
LegendCellColumn minColumn = new LegendCellColumn();     
minColumn.Text = "#MIN{N1}";     
minColumn.HeaderText = "Min";     
minColumn.Name = "MinColumn";     
minColumn.HeaderBackColor = Color.WhiteSmoke;     
Chart1.Legends["Default"].CellColumns.Add(minColumn);   
 

Supported Keyword List

Here is the list of supported keywords. Chart control support multiple Y values and all related keywords use the first one by default but also can be used with additional Y values. For example:

“High=#VALY/nLow=#VALY2/nOpen=#VALY3/nClose=#VALY4”

An optional format string can be added at the end of each keyword.  You can find more about possible format strings from here: http://msdn.microsoft.com/en-us/library/427bttx3.aspx Below is an example of using standard currency format and custom format string:

“Price= #VALY2{C0}/nAverage Price = #AVGY2{C0}/nVolume = #VALY3{#,,.;(#,,.);0}”

Keyword Replaced By Supports Multiple Y Values  Supports Formatting String
#VALX X value of the data point. No Yes
#VALY Y value of the data point Yes Yes
#SERIESNAME Series name No No
#LABEL Data point label No No
#AXISLABEL Data point axis label No No
#INDEX Data point index in the series No Yes
#PERCENT Percent of the data point Y value Yes Yes
#LEGENDTEXT Series or data point legend text No No
#CUSTOMPROPERTY(XXX) Series or data point XXX custom property value, where XXX is the name of the custom property. No No
#TOTAL Total of all Y values in the series Yes Yes
#AVG Average of all Y values in the series Yes Yes
#MIN Minimum of all Y values in the series Yes Yes
#MAX Maximum of all Y values in the series Yes Yes
#FIRST Y value of the first point in the series Yes Yes
#LAST Y value of the last point in the series Yes Yes

Objects and Properties where keywords can be used

Series and DataPoint

  • Label
  • AxisLabel
  • ToolTip
  • Url
  • MapAreaAttributes
  • PostBackValue
  • LegendToolTip
  • LegendMapAreaAttributes
  • LegendPostBackValue
  • LegendUrl
  • LegendText
  • LabelToolTip

Annotation (only if anchored to the data point using SetAnchor method)

  • ToolTip
  • Url
  • MapAreaAttributes
  • PostBackValue
  • Text (TextAnnotation)

LegendCellColumn (only for legend items automatically created for series or data points):

  • Text
  • Tooltip
  • Url
  • MapAreaAttributes
  • PostBackValue

Microsoft Chart Control vs. Dundas Chart Control

I get a lot of questions about 'relationship' of our Microsoft Chart Control to the well known Dundas Data Visualization controls. You can definitely see the similarities in the features, appearance, APIs and demos we use.

So I will start with a  little bit of history... Dundas is one of the leaders in data visualization, who provides well known Chart, Gauge, Map and other visual controls for different Microsoft development platforms (ASP.NET, Windows Forms, SQL Reporting Services and SharePoint). Microsoft acquired Dundas Data Visualization Intellectual Property in April 2007 and is integrating this technology in different Microsoft products. New Chart and Gauge report items were already released as part of SQL Reporting Services 2008. We also announced the new Map report item which will be available in the next release of SSRS. Microsoft Chart controls (ASP.NET and Windows Forms), released at PDC 2008, also based on the source code acquired from Dundas! Microsoft Chart control is available as a separate installation for .NET Framework 3.5 SP1 and will be part of .NET Framework 4.0.

Where I can download the new Microsoft Chart controls?

You can download and install chart from this link.

So what are the differences between Microsoft and Dundas controls?

Microsoft Chart control is based on Dundas Chart source code version 5.5. We spent significant amount of time making sure the control passes Microsoft security review and meets accessibility, API and other requirements. As a result there were a few changes including changes in the public API. Several features were also cut:

  • Chart UI (Toolbar, Context Menu and Property Pages)
  • Flash and SVG Rendering and Animations
  • ASP.NET scrolling and zooming

When other controls (Gauge, Map, ...) will be available in the .NET Framework?

Microsoft does not have the exact dates at this moment when other data visualization controls for .NET Framework will be released.

Can I still purchase visualization controls from Dundas?

Yes, you can still purchase visualization controls from Dundas. Our team will continue bringing new visualizations to different Microsoft products; meanwhile they will be available from Dundas directly, where they continue to support and enhance available visualizations.

How do I get technical support?

Standard Microsoft support options are available including dedicated Microsoft Chart Control Forum. Please note that Dundas keeps supporting the products purchased directly from them and is not responsible for any support for Microsoft Chart Controls.

Thanks,
Alex.

Creating 'small' charts with Microsoft Chart Control

Designing a chart when you have limited space available or when it's size can be dynamically changed  usually requires additional planning. I've been playing with a way to display sample data in a 300 by 500 pixels chart and here what I came up with:

image

Figure 1: Chart size 300 by 500 pixels.

I was pretty happy with the results until I resized the chart to the actual required size of 200 by 220 pixels. So how can I fix that? I thought about that for a while and come up with the best practices below...

image

Figure 2: Chart size 200 by 220 pixels. Best practices applied to the right chart.

Best Practices of Creating Small Charts

You can apply this to a small chart you want to integrate into your application or use same approach 'dynamically' if you need to support the chart which may change it's size dynamically. There is no single solution that will work in all cases, so you need to understand what you can do and what is the best for your application.

  1. Don't panic! Will fix it!
  2. Chart Legend
    Legend displays important information in the chart but it also may require significant amount of chart space. Here is what you can do to optimize for space:
    • Hide legend if it is not essential for your chart
    • Restrict how much size legend may possible take. This can be achieved using Chart.Legends[0].MaximumAutoSize property. The default value is 50 and it means that legend can take up to 50% of chart size. You can set this value to 25-30%.
    • Change the position and layout style of the legend. By positioning Legend on the bottom in one row we can defiantly save some space in the chart.
    • Make sure legend text is auto-fitted IsTextAutoFit and set AutoFitMinFontSize property of the legend to 5, to reduce the smallest possible font used by auto-fit algorithm.
  3. Series Data Points
    Consider removing borders, shadows and visual effects which will make it harder to read small chart. Replace data point labels with tooltips.
  4. Chart Titles
    Consider which titles are essential for your chart and make a decision to remove them or to reduce font. This applies to chart, legend and axes titles.
  5. Axes Labels
    Axes labels can be too long, font too big or there can be just too many of them. Here what you can do:
    • Make sure axes labels auto fitting is enabled IsLabelAutoFit=True. You can also adjust LabelAutoFitStyle property to achieve a specific label behavior. 
    • Show numeric values in thousands, millions and so on. You can do that by specifying the labels format string in your code. If you do not know what will be the range of your data, the best approach is to use Customize event and check Maximum property of your axis. Here is a sample format string you can use:
      Chart1.ChartAreas[0].AxisY.LabelStyle.Format = "$#,,,.B;($#,,,.B);0";

    • If there are too many labels you can change the Interval property of the axis or switch to the dynamic interval using the IntervalAutoMode property of the axis.
    • Truncate categorical strings. Using Customize event you can get access to the automatically generated chart labels and customize them. Code below will truncate all labels larger than 10 characters. Full text of the label will be shown in the tooltip.

      protected void Chart2_Customize(object sender, EventArgs e)  
      {  
          foreach (ChartArea area in ((Chart)sender).ChartAreas)  
          {  
              foreach (Axis axis in area.Axes)  
              {  
                  if (axis.Name.StartsWith("X"))  
                  {  
                      foreach (CustomLabel label in axis.CustomLabels)  
                      {  
                          if (String.IsNullOrEmpty(label.ToolTip))  
                          {  
                              label.ToolTip = label.Text;  
                              if (label.Text.Length > 10)  
                              {  
                                  label.Text = label.Text.Substring(0, 10) + "...";  
                              }  
                          }  
                      }  
                  }  
              }  
          }  
      }  
       


  6. Visual Border
    If you are using the visual rounded border around the chart consider disabling this feature.

Hope this was helpful!

Alex.

New Silverlight Charting control announced at PDC 2008!

New Silverlight Charting control was announced today at PDC! It is part of the Silverlight Toolkit availabale for download on Codeplex.

Here is where you can find more information about the control:

Alex.

Posted by alexgor | 1 Comments
Filed under: , ,
More Posts Next page »
 
Page view tracker