Alex Gorev's Weblog : ASP.NET

Charting With ASP.NET and LINQ

alexgor — Fri, 06 Mar 2009 20:47:00 GMT

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.

Data Binding Microsoft Chart Control

alexgor — Sat, 21 Feb 2009 05:42:00 GMT

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");

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, Label, LegendText, LegendTooltip 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.

// 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, Label, LegendText, LegendTooltip 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

alexgor — Fri, 20 Feb 2009 09:49:00 GMT

Have 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.

Using Chart HTTP Handler

alexgor — Mon, 12 Jan 2009 22:56:00 GMT

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.

Combining ASP.NET MVC and ASP.NET Charting Controls

alexgor — Thu, 27 Nov 2008 00:50:00 GMT

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

alexgor — Tue, 11 Nov 2008 21:57:00 GMT

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:

// 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

Creating 'small' charts with Microsoft Chart Control

alexgor — Wed, 05 Nov 2008 04:09:00 GMT

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:

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...

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.

Don't panic! Will fix it!
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.
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.
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.

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) + "...";   

                        }   

                    }   

                }   

            }   

        }   

    }   

}

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

Hope this was helpful!

Alex.

Microsoft Chart control for .NET Framework Released!

alexgor — Mon, 27 Oct 2008 06:43:00 GMT

I glad to announce the release of Microsoft Chart for .NET Framework 3.5 SP1, which includes the ASP.NET and Windows Forms Chart Controls. Our Data Visualization team in SSRS worked really hard to deliver those controls!

Here is where you can download it:

Microsoft Chart Controls for Microsoft .NET Framework 3.5 – This installs the ASP.NET and Windows Forms Controls. The assemblies will be installed in the GAC as well as in the “%Program File%\Microsoft Chart Controls\Assemblies” folder. If you build an application using the controls, your setup and deployment should add MSChart.exe installer as a pre-requisite.
Microsoft Chart Controls for Microsoft .NET Framework 3.5 Language Pack – This installs the language pack for the Chart Controls. It is available in 23 .NET Framework languages.
Microsoft Chart Controls Add-on for Microsoft Visual Studio 2008 – This installs the IntelliSense file in English for the controls and also adds the controls to the toolbox for ASP.NET and Windows Forms.

Where to find more information?

Alex.