Telerik Product and Version
|
Telerik UI for ASP.NET AJAX Q1 2014 SP1
|
Supported Browsers and Platforms
|
All browsers and platforms supported by Telerik UI for ASP.NET AJAX
|
Components/Widgets used (JS frameworks, etc.)
|
|
PROJECT DESCRIPTION
This project illustrates how to manually group a data source, so that its structure is suitable for a chart data-binding. The VS example uses a DataTable data source for the purpose. Generally each series of a data bound chart must reference a separate data source field to get values. If, however, these values are stored in a common field you must group them in separate fields.
Table 1 shows the structure of a raw data source that is not suitable for a chart data-binding while Table2 illustrates our target data source structure after the grouping.
Table 1: Raw Data Source.
|
|
Table 2: Grouped Data Source by Year field from Table1.
|
|
Year
|
Quarter
|
Sales
|
Purchases
|
|
Year0
|
Quarter0
|
Sales0
|
Purchases0
|
Year1
|
Quarter1
|
Sales1
|
Purchases1
|
2012
|
"Q1"
|
210000
|
110000
|
|
2012
|
"Q1"
|
210000
|
110000
|
2014
|
"Q1"
|
350000
|
100000
|
2012
|
"Q2"
|
320000
|
250000
|
|
2012
|
"Q2"
|
320000
|
250000
|
2014
|
"Q2"
|
380000
|
180000
|
2012
|
"Q3"
|
280000
|
300000
|
|
2012
|
"Q3"
|
280000
|
300000
|
2014
|
"Q3"
|
350000
|
280000
|
2012
|
"Q4"
|
400000
|
350000
|
|
2012
|
"Q4"
|
400000
|
350000
|
2014
|
"Q4"
|
420000
|
300000
|
2014
|
"Q1"
|
350000
|
100000
|
|
|
|
|
|
|
|
|
|
2014
|
"Q2"
|
380000
|
180000
|
|
|
|
|
|
|
|
|
|
2014
|
"Q3"
|
350000
|
280000
|
|
|
|
|
|
|
|
|
|
2014
|
"Q4"
|
420000
|
300000
|
|
|
|
|
|
|
|
|
|
How to Start the Data Source Grouping
The main method that must be called to trigger the data source grouping manipulations is RadHtmlChartGroupDataSource.GroupDataSource(HtmlChart, DataSource, DataGroupColumn, SeriesType, DataFieldY, DataFieldX) and takes the following arguments:
- HtmlChart – The RadHtmlChart instance.
- DataSource –The raw DataTable data source.
- DataGroupColumn – The name of the column in the raw data source which will be the criteria for grouping the chart series items into series. There will be as many series as the number of distinct values in this column.
- SeriesType – The type of the series. Currently the example supports Area, Bar, Column, Line, Scatter and ScatterLine series. You can, however, expand that list in the AddChartSeriesType() method.
- DataFieldY - The name of the column in the raw data source that stores the y-values.
- DataFieldX - The name of the column in the raw data source that stores the x-values.
You can make additional series configurations (e.g., set series names, define tooltips/labels template, etc.) in the RadHtmlChartGroupDataSource.ConfigureChartSeries() method.
Requirements and Limitations of Data Source Grouping Example
In order for this example to work properly the following conditions must be met:
- The number of rows for each series must match. For example Table 1, Year field has a set of 4 rows with a value of “2012” that will be used for the first series and another set of 4 rows with a value of “2014” that will be used for the second series.
- The x-axis items sequence must match for each series from a category chart. For example Table 1, Quarter field has 2 sets of rows that form identical sequences – Q1, Q2, Q3, Q4.
You can review the project attached at the bottom of this article for additional reference.