Data Binding of Wijmo Composite Charts

Composite charts are used to display and analyze complex data in a single chart, so as the name suggests, its data binding is a little different from normal charts. In this blog, we will see how we can easily create a complex chart in code. Since it is a data bound chart, the first requirement is to create a connection and fill a datatable through an adapter. Here is the basic code for the same:

 string Conn = @"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=C:\\Users\\stduser\\Documents\\ComponentOne Samples\\Common\\c1nwind.mdb";  
 OleDbConnection co = new OleDbConnection(Conn);  
 string sql = "SELECT TOP 15 * FROM Products;";  
 OleDbDataAdapter adapter = new OleDbDataAdapter(sql, co);  
 DataTable dt = new DataTable();  
 adapter.Fill(dt);

Now we will create objects of C1CompositeChartBinding class for each chart we want to display in the composite chart. If we want to display a line chart we can create a C1CompositeChartBinding object and set it to Type property of Line. After doing so, we need to set the XField/YField properties of same to the corresponding columns of the datatable which we want to use for plotting the chart. The code will look like:

 //creating Line Chart  
 C1CompositeChartBinding cbLine = new C1CompositeChartBinding();  
 cbLine.Type = ChartSeriesType.Line;  

 cbLine.XField = "ProductId";  
 cbLine.XFieldType = ChartDataXFieldType.Number;  

 cbLine.YField = "UnitPrice";  
 cbLine.YFieldType = ChartDataYFieldType.Number; 

In the same way we can create a Bar chart by creating another object of C1CompositeChartBinding as done below:

 //creating bar chart  
 C1CompositeChartBinding cbBar = new C1CompositeChartBinding();  
 cbBar.Type = ChartSeriesType.Bar;  

 cbBar.XField = "ProductId";  
 cbBar.XFieldType = ChartDataXFieldType.Number;  

 cbBar.YField = "UnitsInStock";  
 cbBar.YFieldType = ChartDataYFieldType.Number; 

After creating various objects of C1CompositeChartBinding for different types of charts you may add them to the DataBindings collection of the Composite chart and then set the DataSource of the chart to the required datatable. You may use the following code:

 // adding the data bindings to the chart and setting the datasource  
 C1CompositeChart1.DataBindings.Add(cbLine);  
 C1CompositeChart1.DataBindings.Add(cbBar);  
 C1CompositeChart1.DataSource = dt;  
 C1CompositeChart1.DataBind(); 

A complete sample implementing the same in VB and C# is attached. Download C# Sample Download VB Sample