Skip to main content Skip to footer

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.

MESCIUS inc.

comments powered by Disqus