Introduction
Licensing
Knowledge Base
Knowledge Base / Group Chart Data Source
New to Telerik UI for ASP.NET AJAX? Start a free 30-day trial

Group Chart Data Source

Environment

ProductTelerik WebForms HtmlChart for ASP.NET AJAX

Description

This article illustrates how to manually group a data source, so that its structure is suitable for a chart data-binding. The 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.

Solution

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.

ASP.NET
<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="800" Height="500" />
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        //Group data source and bind it to category series:
        RadHtmlChartGroupDataSource.GroupDataSource(RadHtmlChart1, GetRawDataSource(), "Year", "ColumnSeries", "Sales", "Quarter");

        //Group data source and bind it to numeric series:
        //RadHtmlChartGroupDataSource.GroupDataSource(RadHtmlChart1, GetRawDataSource(), "Year", "ScatterLineSeries", "Sales", "Purchases");
    }
}

private DataTable GetRawDataSource()
{
    DataTable dtDataPoints = new DataTable();

    dtDataPoints.Columns.Add(new DataColumn("Year", typeof(string)));
    dtDataPoints.Columns.Add(new DataColumn("Quarter", typeof(string)));
    dtDataPoints.Columns.Add(new DataColumn("Sales", typeof(int)));
    dtDataPoints.Columns.Add(new DataColumn("Purchases", typeof(int)));

    dtDataPoints.Rows.Add(new object[] { "2012", "Q1", 210000, 110000 });
    dtDataPoints.Rows.Add(new object[] { "2012", "Q2", 320000, 250000 });
    dtDataPoints.Rows.Add(new object[] { "2012", "Q3", 280000, 300000 });
    dtDataPoints.Rows.Add(new object[] { "2012", "Q4", 400000, 350000 });
    dtDataPoints.Rows.Add(new object[] { "2014", "Q1", 350000, 100000 });
    dtDataPoints.Rows.Add(new object[] { "2014", "Q2", 380000, 180000 });
    dtDataPoints.Rows.Add(new object[] { "2014", "Q3", 350000, 280000 });
    dtDataPoints.Rows.Add(new object[] { "2014", "Q4", 420000, 300000 });

    return dtDataPoints;
}
RadHtmlChartGroupDataSource.CS
/// <summary>
/// A Class that provides functionality for grouping RadHtmlChart's data source
/// </summary>
public static class RadHtmlChartGroupDataSource
{
	/// <summary>
	/// Groups the RadHtmlChart's data source.
	/// </summary>
	/// <param name="HtmlChart">The RadHtmlChart instance.</param>
	/// <param name="DataSource">The raw DataTable data source.</param>
	/// <param name="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.</param>
	/// <param name="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.</param>
	/// <param name="DataFieldY">The name of the column in the raw data source that stores the y-values.</param>
	/// <param name="DataFieldX">The name of the column in the raw data source that stores the x-values. </param>
	public static void GroupDataSource(RadHtmlChart HtmlChart, DataTable DataSource, string DataGroupColumn, string SeriesType, string DataFieldY, string DataFieldX)
	{
		//Get number of distinct rows by DataGroupColumn (e.g., Year column)
		DataTable distinctValuesDT = DataSource.DefaultView.ToTable(true, DataGroupColumn);
		int numDistinctValues = distinctValuesDT.Rows.Count;

		//Add RadHtmlChart series
		ConfigureChartSeries(HtmlChart, numDistinctValues, distinctValuesDT, SeriesType, DataFieldY, DataFieldX);

		//Group data source and bind it to the chart
		HtmlChart.DataSource = GetGroupedData(DataSource, DataGroupColumn, DataFieldY, numDistinctValues, distinctValuesDT);
		HtmlChart.DataBind();
	}
	/// <summary>
	/// Configures chart series. For example sets series names, define tooltips/labels template, etc.
	/// </summary>
	private static void ConfigureChartSeries(RadHtmlChart HtmlChart, int NumDistinctValues, DataTable DistinctValuesDT, string SeriesType, string DataFieldY, string DataFieldX)
	{
		HtmlChart.PlotArea.Series.Clear();
		//Detect whether series are of category type
		string[] categorySeriesArray = { "AreaSeries", "BarSeries", "ColumnSeries", "LineSeries" };
		bool isCategorySeries = Array.IndexOf(categorySeriesArray, SeriesType) > -1 ? true : false;

		//Configure x-axis DataLabelsField if series are of category type
		if (isCategorySeries)
		{
			HtmlChart.PlotArea.XAxis.DataLabelsField = DataFieldX + "0";
		}

		for (int i = 0; i < NumDistinctValues; i++)
		{
			//Construct the series name, tooltips template and labels format string
			string seriesName = DistinctValuesDT.Columns[0].ColumnName + " : " + DistinctValuesDT.Rows[i][0].ToString();
			string tooltipsTemplate = "Category: #=dataItem." + DataFieldX + i + "#<br />Value: #=dataItem." + DataFieldY + i + "#";
			string labelsFormatString = "{0:N0}";

			//Add the corresponding series type to the chart
			AddChartSeriesType(HtmlChart, SeriesType, DataFieldY, DataFieldX, i, seriesName, tooltipsTemplate, labelsFormatString);
		}
	}
	/// <summary>
	/// Adds chart series. Currently the method supports Area, Bar, Column, Line, Scatter and ScatterLine series. You can, however, expand that list here.
	/// </summary>
	private static void AddChartSeriesType(RadHtmlChart HtmlChart, string SeriesType, string DataFieldY, string DataFieldX, int Index, string SeriesName, string TooltipsTemplate, string LabelsFormatString)
	{
		switch (SeriesType)
		{
			case "AreaSeries":
				AreaSeries areaSeries1 = new AreaSeries();
				areaSeries1.Name = SeriesName;
				areaSeries1.DataFieldY = DataFieldY + Index;
				areaSeries1.TooltipsAppearance.ClientTemplate = TooltipsTemplate;
				areaSeries1.LabelsAppearance.DataFormatString = LabelsFormatString;
				HtmlChart.PlotArea.Series.Add(areaSeries1);
				break;

			case "BarSeries":
				BarSeries barSeries1 = new BarSeries();
				barSeries1.Name = SeriesName;
				barSeries1.DataFieldY = DataFieldY + Index;
				barSeries1.TooltipsAppearance.ClientTemplate = TooltipsTemplate;
				barSeries1.LabelsAppearance.DataFormatString = LabelsFormatString;
				HtmlChart.PlotArea.Series.Add(barSeries1);
				break;

			case "ColumnSeries":
				ColumnSeries columnSeries1 = new ColumnSeries();
				columnSeries1.Name = SeriesName;
				columnSeries1.DataFieldY = DataFieldY + Index;
				columnSeries1.TooltipsAppearance.ClientTemplate = TooltipsTemplate;
				columnSeries1.LabelsAppearance.DataFormatString = LabelsFormatString;
				HtmlChart.PlotArea.Series.Add(columnSeries1);
				break;

			case "LineSeries":
				LineSeries lineSeries1 = new LineSeries();
				lineSeries1.Name = SeriesName;
				lineSeries1.DataFieldY = DataFieldY + Index;
				lineSeries1.TooltipsAppearance.ClientTemplate = TooltipsTemplate;
				lineSeries1.LabelsAppearance.DataFormatString = LabelsFormatString;
				HtmlChart.PlotArea.Series.Add(lineSeries1);
				break;

			case "ScatterSeries":
				ScatterSeries scatterSeries1 = new ScatterSeries();
				scatterSeries1.Name = SeriesName;
				scatterSeries1.DataFieldY = DataFieldY + Index;
				scatterSeries1.DataFieldX = DataFieldX + Index;
				scatterSeries1.TooltipsAppearance.ClientTemplate = TooltipsTemplate;
				scatterSeries1.LabelsAppearance.DataFormatString = LabelsFormatString;
				HtmlChart.PlotArea.Series.Add(scatterSeries1);
				break;

			case "ScatterLineSeries":
				ScatterLineSeries scatterLineSeries1 = new ScatterLineSeries();
				scatterLineSeries1.Name = SeriesName;
				scatterLineSeries1.DataFieldY = DataFieldY + Index;
				scatterLineSeries1.DataFieldX = DataFieldX + Index;
				scatterLineSeries1.TooltipsAppearance.ClientTemplate = TooltipsTemplate;
				scatterLineSeries1.LabelsAppearance.DataFormatString = LabelsFormatString;
				HtmlChart.PlotArea.Series.Add(scatterLineSeries1);
				break;

			default:
				break;
		}
	}
	/// <summary>
	/// The actual data source grouping manipulations.
	/// </summary>
	private static DataTable GetGroupedData(DataTable RawDataTable, string DataGroupColumn, string DataFieldY, int NumDistinctValues, DataTable DistinctValuesDT)
	{
		DataTable commonDT = new DataTable();

		//Split the raw DataTable by numDistinctValues to an array of temporary DataTables
		DataTable[] tempDTarray = new DataTable[NumDistinctValues];
		tempDTarray = SplitDataTable(RawDataTable, DataGroupColumn, NumDistinctValues, DistinctValuesDT);

		//Add rows to the common DataTable
		for (int i = 0; i < tempDTarray[0].Rows.Count; i++)
		{
			commonDT.Rows.Add();
		}

		//Add columns to the common DataTable and fill values from each temp DataTable
		for (int i = 0; i < NumDistinctValues; i++)
		{
			//Loop through the columns of each temp DataTable
			for (int g = 0; g < tempDTarray[i].Columns.Count; g++)
			{
				string columnName = tempDTarray[i].Columns[g].ColumnName;
				//Add columns from the temp DataTables to the common DataTable
				commonDT.Columns.Add(columnName, tempDTarray[i].Columns[g].DataType);

				//Loop through the rows of the each temp DataTable
				for (int f = 0; f < tempDTarray[i].Rows.Count; f++)
				{
					//Fill values from each temp DataTable to the common DataTable
					commonDT.Rows[f][columnName] = tempDTarray[i].Rows[f][columnName];
				}
			}
		}
		return commonDT;
	}
	/// <summary>
	/// A helper method for the data source grouping manipulations.
	/// </summary>
	private static DataTable[] SplitDataTable(DataTable RawDataTable, string DataGroupColumn, int NumDistinctValues, DataTable DistinctValuesDT)
	{
		DataTable[] tempDTarray = new DataTable[NumDistinctValues];

		for (int i = 0; i < NumDistinctValues; i++)
		{
			//Split the raw DataTable to multiple temporary DataTables by distinct DataGroupColumn values
			tempDTarray[i] = RawDataTable.Select(DataGroupColumn + "='" + DistinctValuesDT.Rows[i][0].ToString() + "'").CopyToDataTable();

			for (int g = 0; g < tempDTarray[i].Columns.Count; g++)
			{
				//Add g-th index to column names for each i-th DataTable from the temporary DataTable array
				string columnName = tempDTarray[i].Columns[g].ColumnName + i;
				tempDTarray[i].Columns[g].ColumnName = columnName;
			}
		}

		return tempDTarray;
	}
}

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.

In this article
EnvironmentDescriptionSolution
Not finding the help you need?
Contact Support