Geeks With Blogs
Devin Rader's Blog I write the code...

The standard non-composite charts in the UltraChart control support two primary methods of binding data.  The first method is the traditional .NET Data binding method, which uses a DataSource property to set the actual data source and the DataBind() method to cause the bind to happen.  The second method uses Series objects to provide data to the UltraChart.  In this article I am going to introduce you to the first method, using the traditional .NET Data Binding to bind data to the UltraChart.

Understanding Chart Data Shape Requirements

Before we get started actually talking about binding, its important to first step back and examine exactly how a chart uses a data source to plot a chart.  It is important to note that different chart types have different data shape requirements.  The “data shape“ simply means the data type and number of properties that the data object bound to the chart needs to expose in order to for the chart to properly render itself.

For example, a Column chart expects its data source to expose at least at least one (but more are allowed) numeric property.  Additionally, though not required, the chart can also use a single string property.  The string property, if present, would be used as the chart labels and the numeric property(s) would be plotted on the chart as data points.  By comparison, a Scatter chart requires two numeric properties (and will use an optional string property as labels), and a Bubble chart requires 3 numeric properties (and will use an optional string property as labels).

Since this concept is fairly abstract, lets look at some sample code using a real .NET object, a DataTable.  If we put the data shape required by the Column chart into terms of a DataTable, you would need at least 1 column which stored numbers (they can be Ints or Doubles, etc), and though not required, you can add an additional column which stores strings. 

This is an example of a simple DataTable which could be plotted by the Column chart type:

   1:  DataTable dt = new DataTable();
   2:  dt.Columns.Add("Week", typeof(System.String));
   3:  dt.Columns.Add("ActiveX", typeof(System.Int32));
   4:  dt.Rows.Add(new object[] {"Week 1", 50});

The data in this table will allow us to compare the number of sales of ActiveX controls for a given week.  In this case we see that we sold 50 units of ActiveX in Week 1. 

Note that when we created the DataTable we explicitly set the data type of the columns.  We have to do this so that the UltraChart knows which column to use for the the chart labels and the data points.  Had we not explicitly types the columns, the data table would have simply created each column as the default string type, and the UltraChart would have complained that it expected at least one numeric column.

Of course, if you actually plot this data to a chart, it is a rather pointless chart because you have only plotted a single data point, and charts are generally used to help you compare multiple data points.  For example, perhaps you need to compare the sales of a number of products during Week 1.  To do this you simply expose additional numeric properties, which in this case you do by adding additional numeric columns to the DataTable:

   1:  DataTable dt = new DataTable();
   2:  dt.Columns.Add("Week", typeof(System.String));
   3:  dt.Columns.Add("ActiveX", typeof(System.Int32));
   4:  dt.Columns.Add("Java", typeof(System.Int32));
   5:  dt.Columns.Add("NET", typeof(System.Int32));
   6:  dt.Rows.Add(new object[] {"Week 1", 50, 15, 79});

Plotting this data now lets you compare the Week 1 sales of three products, ActiveX, Java and .NET, as shown in the image below.

As was stated earlier, each chart type can potentially have its own unique data shape requirements.  The NetAdvantage help includes a topic for each chart type.  Each of these topics offer information on exactly what the data shape requires for the chart type, how the specific data requirements are used by the chart, and a sample of a properly shaped table of data.

Adding with Multiple Data Series

So far in the samples presented, each sample is limited to comparing 2 dimensions of data: unit sales by product.  But what if you wanted to add an additional dimension of data to the chart.  For example, while seeing the sample of products for a single week is useful, what if you wanted to compare the product sales across multiple weeks?  Now you are adding a third dimension of data to the chart.  This third dimension is often called a Series.  A Series is simply a way of grouping categories of data together so that you can add an additional dimension of data to a chart.

To continue our example from the previous section, in order to add an additional dimension of data to the data table, you simply add some additional rows to the table.

   1:  DataTable dt = new DataTable();
   2:  dt.Columns.Add("Week", typeof(System.String));
   3:  dt.Columns.Add("ActiveX", typeof(System.Int32));
   4:  dt.Columns.Add("Java", typeof(System.Int32));
   5:  dt.Columns.Add("NET", typeof(System.Int32));
   6:  dt.Rows.Add(new object[] {"Week 1", 50, 15, 79});
   7:  dt.Rows.Add(new object[] {"Week 2", 45, 17, 72});
   8:  dt.Rows.Add(new object[] {"Week 3", 57, 12, 83});
   9:  dt.Rows.Add(new object[] {"Week 4", 55, 14, 85});
  10:  dt.Rows.Add(new object[] {"Week 5", 31, 19, 70});

By adding additional rows, the chart automatically groups the column values for each row into a Series of data.  The image below shows how Series are displayed in the column chart.

Notice that as each group of data is displayed on the chart, a Series label (“Week {n}“) is added below the X axis labels to help you identify each series.  These series labels are by default generated using the values from the first available exposed string property.  In this example, this is the 'Weeks' column in the DataTable.  Later, I will show you how you can explicitly set a source for the series labels.

Data Shaping Options

One of the biggest challenges in using traditional data binding with charting is making sure your data objects are properly shaped given the specific data shape requirements for the chart type you want to plot.  All of the samples we have looked at to this point create a simple DataTable which conforms to the default data shape for a Column chart in the UltraChart control.  To often though, the underlying structures which are providing you with your data, do not provide you with a data object that conforms to that perfect data shape.   In these cases you may need to do some data transformations before you will be able to use the data object as the charts data source.

The UltraChart provides a number of mechanisms which can help you transform the shape of your data object so that it may be used as the data source of your chart.  In this article we will look at three ways the UltraChart can help you re-shape your data object, the SwapRowsAndColumns property, the IncludeColumns method and the UseRowLabelsColumn property.

SwapRowsAndColumns Property

If you look at the Series sample from the previous section, you will see that the structure of the data table means that the chart will allow us to compare units sales of products per week.  But it may be more useful if you could compare the weekly unit sales per product.  In order to do this you need to transform the shape of the DataTable, which you can do by using the charts boolean SwapRowsAndColums property.  The SwapRowsAndColumns property is a simple boolean property exposed from the UltraChart.Data object and as the name indicates, allows you to tell the chart to treat the data source “columns“ as “rows“, and vice-versa.

For example, the image below on the left is the chart which displays the Product Sales Per Week.  This is the same chart we created in the previous section.  The image on the right shows the new chart, which, using the exact same data object as its data source, now displays the Weekly Sales Per Product.

Chart rendered without SwapRowsAndColumns Chart rendered with SwapRowsAndColumns

To create the new chart, you simply set the SwapRowsandColumns property to true:

   1:  this.ultraChart1.Data.SwapRowsAndColumns=true;

Doing this causes the chart to change how it interprets the DataTable bound to it.  The image below on the left shows how by default, the chart interprets our DataTable.  The image on the right is how the chart interprets the same DataTable when SwapRowsAndColumns is set to True:

Data interpretation without
SwapRowsAndColumns
Data interpretation with
SwapRowsAndColumns

IncludeColumns Method

A common scenario for a developer is to create a data structure that contains as much information about the current screen or action as possible.  For example, when you query a database, you may try to return all of the data needed for the sections of a particular screen in a single DataTable or business object.  You can then bind specific columns or properties to the relevant controls on the form. 

Since the default behavior of the chart is to simply to include all possible columns of the appropriate data type, there are obviously situations where you will want to change this behavior and explicitly tell the chart to exclude columns.  For example, your DataTable might contain multiple numeric type columns, but in your chart, you only want to include a subset of these columns as  the source of data for your chart.  The UltraChart includes the IncludeColumns method which allows you to do just that.  Using the IncludeColumns method, you simply specify the index number of the column (or property) you want to exclude.

For example, if we resume our product sales sample and modify the DataTable to include a Totals column, you will see that because the column is a numeric column, the column is automatically added to the chart. 

   1:  DataTable dt = new DataTable();
   2:  dt.Columns.Add("Week", typeof(System.String));
   3:  dt.Columns.Add("ActiveX", typeof(System.Int32));
   4:  dt.Columns.Add("Java", typeof(System.Int32));
   5:  dt.Columns.Add("NET", typeof(System.Int32));
   6:  dt.Columns.Add("Totals", typeof(System.Int32));
   7:  dt.Rows.Add(new object[] {"Week1", 50, 15, 79, 144});
   8:  dt.Rows.Add(new object[] {"Week2", 45, 17, 72, 134});
   9:  dt.Rows.Add(new object[] {"Week3", 57, 12, 83, 152});
  10:  dt.Rows.Add(new object[] {"Week4", 55, 14, 85, 154});
  11:  dt.Rows.Add(new object[] {"Week5", 31, 19, 70, 120});

Including the Totals column to the chart is not useful because it skews the interpretation of the chart, so we probably should tell the chart to exclude the column.

   1:  this.ultraChart1.Data.IncludeColumn(4,false);

Adding this code keeps the chart from including the Totals column, even though it still exists in the DataTable, as shown below.  The image on the left shows the chart rendered without excluding the Totals column, and on the right with the column excluded:

Chart rendered without excluding
the Totals column
Chart rendered excluding
the Totals column

UseRowLabelsColumn & RowLabelsColumn Properties

Finally, the chart includes two properties which allow to you explicitly set which exposed property the chart should use for its Series labels.  This again is useful in scenarios where you are binding a data object which contains many properties of type string to the chart.  By default the chart will use the first exposed string property that it locates for the charts Series labels, which is not always the behavior you want.  The UseRowLabelsColumn property tells the chart that you want to explicitly set which property index it should use for the Series labels, and the RowLabelsColumnProperty allow you to set that index.

Lets modify the Product Sales DataTable one more time to demonstrate the use of these properties.

   1:  DataTable dt = new DataTable();
   2:  dt.Columns.Add("Notes",typeof(System.String));
   3:  dt.Columns.Add("ActiveX", typeof(System.Int32));
   4:  dt.Columns.Add("Java", typeof(System.Int32));
   5:  dt.Columns.Add("NET", typeof(System.Int32));
   6:  dt.Columns.Add("Week", typeof(System.String));
   7:  dt.Rows.Add(new object[] {"Convention in town.  Strong sales", 50, 15, 79, "Week1"});
   8:  dt.Rows.Add(new object[] {"", 45, 17, 72, "Week2"});
   9:  dt.Rows.Add(new object[] {"", 57, 12, 83, "Week3"});
  10:  dt.Rows.Add(new object[] {"", 55, 14, 85, "Week4"});
  11:  dt.Rows.Add(new object[] {"Holiday Week, slow sales", 31, 19, 70, "Week5"});

Notice that there has been a Notes column added as the first column in the DataTable and the Weeks column has been moved to the end of the columns collection.  If you bound this data to the chart, you would see that the chart uses the Notes column as the Series labels, rather than the Week column.  This is because the Notes column is the first property of type string exposed by our DataTable.  We need to tell the chart that we want to use the Weeks column instead, which can be done by setting the Data.UserRowsLabelsColumn to True and specifying a value of 5 (the Weeks columns index in the DataTables columns collection) for the Data.RowLabelsColumn property.

   1:  this.ultraChart1.Data.UseRowLabelsColumn=true;
   2:  this.ultraChart1.Data.RowLabelsColumn=4;

Adding these changes and then rendering the chart will make the series labels appear as we expect them to as shown in the image below.  On the left is the chart rendered by allowing the chart to automatically find the Series labels, and on the right the same chart rendered with the explicit setting of the Series labels using the RowLabelsColumn property.

Chart rendered using
default Series labels
Chart rendered with a
RowLabelsColumn explicitly set

Conclusion

Binding to the UltraChart using traditional .NET data binding techniques is a powerful way to easily create charts which effectively communicate data.  When choosing to use this technique, simply remember that the UltraChart depends on typed properties to locate the data needed to plot the chart, and the required shape of the data needed can vary from chart type to chart type.  Additionally, the UltraChart does include several features which can help you to transforms the shape of your data source so that the it can meet the shape requirements of your chart when using traditional data binding techniques.

In a future article I will introduce you to the second binding technique, Series object binding, which can be used by both composite and non-composite charts.

If you have any questions regarding this topic, or any other topic related to the Infragistics UltraChart control, or Infragistics products in general, I highly recommend visiting our online peer-to-peer support forums at http://forums.infragistics.com

 

Posted on Friday, August 11, 2006 11:52 AM | Back to top


Comments on this post: Using Data Binding with the UltraChart

# how to Display the datatable in ultrachart
Requesting Gravatar...
Plz tell me how to display the chart table data in ultrachart.
Left by venkat on Nov 25, 2006 1:36 AM

# re: Using Data Binding with the UltraChart
Requesting Gravatar...
Thanks for your good tutorial :)
Left by sanme98 on Dec 20, 2006 3:29 AM

# re: Using Data Binding with the UltraChart
Requesting Gravatar...
Thank You very much Sir
I have learned very much from this topic
write more on infragistics
Thank You.
Left by Farooq Afridi on Dec 22, 2006 12:56 AM

# re: Using Data Binding with the UltraChart Control provided in Infragistics tool
Requesting Gravatar...
thanku for providing the information. but could you please tell how to use UltraChart control avaialable in VS Dotnet.How do we bind data into it and get it displayed on the screen. what all namespaces and references required for the same?
Left by Raghav on Feb 08, 2007 12:40 AM

# re: Using Data Binding with the UltraChart
Requesting Gravatar...
Wonderful tutorials for a startet like me!!!
Left by Sirisha on Apr 26, 2007 8:48 AM

# re: Using Data Binding with the UltraChart
Requesting Gravatar...
Great work!!
Left by Guilherme on Mar 13, 2008 1:58 AM

# re: Using Data Binding with the UltraChart
Requesting Gravatar...
what is the link for series binding article?
Left by Kashif on Apr 15, 2008 11:39 PM

# re: Using Data Binding with the UltraChart
Requesting Gravatar...
Great tutorial, I learned more with your article in 30 minutes than reading Infragistics knowledge base for 2 days.

Thank you !
Left by DannyB on Jul 07, 2008 11:14 AM

# re: Using Data Binding with the UltraChart
Requesting Gravatar...
Thanks, it's a great article. It helped me a lot to understand the data binding for UltraChart. Something like this should be included into Infragistics Help. The current Help doesn't have good samples with explanation.
Left by ElenaA on Jul 10, 2008 1:02 PM

# re: Using Data Binding with the UltraChart
Requesting Gravatar...
Solid article... well explain...
Left by Renish on Jun 21, 2009 1:20 AM

# re: Using Data Binding with the UltraChart
Requesting Gravatar...
Gracias, muy buen tutorial.
Thanks, very useful article!!!
Left by José Rafael Giraldo Tenorio on Aug 05, 2009 5:56 PM

# re: Using Data Binding with the UltraChart
Requesting Gravatar...
How to put the chart generated to a word file?
Left by Ankur Tandon on Jan 27, 2010 5:16 AM

# re: Using Data Binding with the UltraChart
Requesting Gravatar...
Thanks for the tutorial, helped me a lot.

cheers
Left by Rui on Mar 31, 2010 12:31 PM

# re: Using Data Binding with the UltraChart
Requesting Gravatar...
maybe u could tell how to bind the datatable to the chart, else it's useless..
Left by osman on Apr 15, 2010 3:55 AM

# re: Using Data Binding with the UltraChart
Requesting Gravatar...
Wonderful tutorial .....some info like setting ranges on X and Y axis could have been helpful.
Left by Ashish on Nov 19, 2010 7:20 AM

Your comment:
 (will show your gravatar)


Copyright © Devin Rader | Powered by: GeeksWithBlogs.net