Binding the Wijmo BarChart to a DataTable

Recently it was brought to my attention that there are no examples of how to use a DataTable as a datasource for the Wijmo BarChart. So I began to dig and found a few very handy things about the DataBinding in the Wijmo BarChart that makes binding to a datatable a snap. Let's not mince words, and get right to it.

Creating the datatable

First we will create a datatable using the Northwind database using the following code. NOTE: You will need to replace the line Data Source="C:\Users\\Documents\ComponentOne Samples\Common\c1nwind.mdb" with your own connection string where your database is stored. [c] string Conn = @"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=C:\Users\\Documents\ComponentOne Samples\Common\c1nwind.mdb"; OleDbConnection connection1 = new OleDbConnection(Conn); string sql = "SELECT TOP 5 * FROM Prodcuts;"; OleDbDataAdapter adapter1 = new OleDbDataAdapter(sql, connection1); DataTable dt = new DataTable(); adapter1.Fill(dt); [/c] Keep in mind that there are a number of ways to create a datatable. This is the fastest method for this sample's purpose and it works really well, but you can use any method you like when creating the datatable to hook the C1BarChart up to.

Adding the C1BarChart

Now you can head to the design tab of your aspx page and drag the C1BarChart onto the design surface. The C1BarChart should automatically be given a name simiar to "C1BarChart1", but the name can be changed to anything that is familiar to you. If everything has been added appropriately, your aspx markup should look something like the following.

<wijmo:C1BarChart ID="C1BarChart1" runat="server" Horizontal="false"/>  

The Wire Up

Next, we will switch back to the aspx.cs page to write some more code. Use the following code to assign the newly created datatable as the C1BarChart's datasource. [c] C1BarChart1.DataSource = dt; [/c] Once that is done, it's time to get down to the actual binding. The next bit of code uses the C1ChartBinding object to populate the chart elements like the series and the legend with data from the datatable and will also allow us to specify what type each of the series on the axis should be. [c] C1.Web.Wijmo.Controls.Chart.C1ChartBinding cb = new C1.Web.Wijmo.Controls.C1Chart.C1ChartBinding(); cb.XField = "ProductID"; cb.XFieldType = C1.Web.Wijmo.Controls.C1Chart.ChartDataXFieldType.String; cb.YField = "UnitsInStock"; cb.YFieldType = C1.Web.Wijmo.Controls.C1Chart.ChartDataYFieldType.Number; C1BarChart1.DataBindings.Add(cb); C1BarChart1.DataBind(); [/c] When all is said and done, you should have a fully functioning chart that looks like the following.

Adding Additional Series

In the event that you need to add additional series to the chart, all you need to do, via the magic of the Wijmo chart, is add additional chart bindings. The next bit of code does just that. Notice that in addition to the "cb" chart binding, we now have added "cb2". This will add another series with the data that you define in this code. [c] C1.Web.Wijmo.Controls.C1Chart.C1ChartBinding cb2 = new C1.Web.Wijmo.Controls.C1Chart.C1ChartBinding(); cb2.XField = "ProductID"; cb2.XFieldType = C1.Web.Wijmo.Controls.C1Chart.ChartDataXFieldType.String; cb2.YField = "UnitPrice"; cb2.YField = C1.Web.Wijmo.Controls.C1Chart.ChartDataYFieldType.String; C1BarChart1.DataBindings.Add(cb2); C1BarChart.DataBind(); [/c] This is the code that adds the next series to the C1BarChart. Put the code all together and it should look something like this. [c] C1BarChart1.DataSource = dt; C1.Web.Wijmo.Controls.C1Chart.C1ChartBinding cb = new C1.Web.Wijmo.Controls.C1Chart.C1ChartBinding(); cb.XField = "ProductID"; cb.XFieldType = C1.Web.Wijmo.Controls.C1Chart.ChartDataXFieldType.String; cb.YField = "UnitsInStock"; cb.YFieldType = C1.Web.Wijmo.Controls.C1Chart.ChartDataYFieldType.Number; C1.Web.Wijmo.Controls.C1Chart.C1ChartBinding cb2 = new C1.Web.Wijmo.Controls.C1Chart.C1ChartBinding(); cb2.XField = "ProductID"; cb2.XFieldType = C1.Web.Wijmo.Controls.C1Chart.ChartDataXFieldType.String; cb2.YField = "UnitPrice"; cb2.YFieldType = C1.Web.Wijmo.Controls.C1Chart.ChartDataYFieldType.Number; C1BarChart1.DataBindings.Add(cb); C1BarChart1.DataBindings.Add(cb2); C1BarChart1.DataBind(); [/c]

The End Result

After all of 34 lines of code, you should have a professional looking, data capable Wijmo BarChart that is getting it's data from a datatable. It really is that simple...