Multiple DataBindings in C1CompositeChart
C1CompositeChart in Wijmo is an advanced chart which can be used to show more than one type of chart within the same chart area. Recently, a new feature has been introduced which provides the option to bind the Chart data from different tables of a DataSource. All we have to do is add objects of type C1CompositeChartBinding to the DataBindings collection of C1CompositeChart. This blog implementation shows how to bind a C1CompositeChart with multiple DataTables. For this blog implementation, we are adding two objects to the DataBindings collection of the chart, showing the TotalCosts and TrainingExpenses of Products. Data is retrieved from two tables, namely "Products" and "TrainingExpenses". Following is the code implementation of C1CompositeChart at design time:
<wijmo:C1CompositeChart ID="C1CompositeChart1" runat="server">
<Axis>
<X Visible="true" TickMajor-Position="Cross" Labels-AxisLabelStyle-Rotation="-45">
</X>
</Axis>
</wijmo:C1CompositeChart>
Given code snippet adds two C1CompositeChartBinding objects to DataBindings collection wherein data is retrieved from different DataTables.
protected void Page_Load(object sender, EventArgs e)
{
//Get Data from Database.
DataSet ds = GetDataSource();
//Create 1st DataTable
DataTable dt1 = ds.Tables[0];
//Calculate TotalCost of products
DataColumn totalcost = new DataColumn("TotalCost", typeof(double));
dt1.Columns.Add(totalcost);
dt1.Columns["TotalCost"].Expression = dt1.Columns[2].ColumnName + "*" + dt1.Columns[3].ColumnName;
//Adding 1st object to DataBindings.
//ProductName-TotalCost
C1CompositeChartBinding cBindingItem = new C1CompositeChartBinding();
cBindingItem.DataMember = dt1.TableName;
cBindingItem.XField = "ProductName";
cBindingItem.XFieldType = ChartDataXFieldType.String;
cBindingItem.YField = "TotalCost";
cBindingItem.YFieldType = ChartDataYFieldType.Number;
cBindingItem.Label = "ProductName-TotalCost";
cBindingItem.Type = ChartSeriesType.Line;
C1CompositeChart1.DataBindings.Add(cBindingItem);
//Create 2nd DataTable
DataTable dt2 = ds.Tables[1];
//Adding 1st object to DataBindings.
//ProductName-TrainingExpenses-Year 2012
C1CompositeChartBinding cBindingItem2 = new C1CompositeChartBinding();
cBindingItem2.DataMember = dt2.TableName;
cBindingItem2.XField = "ProductName";
cBindingItem2.XFieldType = ChartDataXFieldType.String;
cBindingItem2.YField = "Expenses";
cBindingItem2.YFieldType = ChartDataYFieldType.Number;
cBindingItem2.LegendEntry = true;
cBindingItem2.Label = "TrainingExpenses-2012";
cBindingItem2.Type = ChartSeriesType.Column;
C1CompositeChart1.DataBindings.Add(cBindingItem2);
//---------------------------------
//Setting DataSource of C1CompositeChart
C1CompositeChart1.DataSource = ds;
C1CompositeChart1.DataBind();
}
private DataSet GetDataSource()
{
DataSet ds = new DataSet();
OleDbConnection con = new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" + Server.MapPath("~/App_Data/ChartBinding.mdb"));
OleDbCommand cmd = new OleDbCommand("Select Top 5 * from Products", con);
OleDbDataAdapter da = new OleDbDataAdapter(cmd);
da.Fill(ds, "Products");
da.SelectCommand = new OleDbCommand("Select Top 5 [Training ID], ProductName, Expenses from TrainingExpenses where StartDate Like '%2012'", con);
da.Fill(ds, "TrainingExpenses");
return ds;
}
Attached screenshot shows a LineChart series for Product-TotalCost and ColumnChart for Product-TrainingExpenses. Download Sample for complete implementation.