Defining Tooltips for DataBound Wijmo Charts

Our customers have asked us how to show multiple columns of the bound data source in the single tooltip for bound Wijmo Charts. So this blog post is for all those customers. The implementation is pretty simple. The Wijmo Charts have a property called HintField which gets and sets the name of field from the data source that indicates C1Chart. That is user just needs to set the datacolumn name in the HintField property and the column data will be shown in the data point tooltip. This blog will help you set tooltips for chart created at design time or using code.

Step 1 : Define datacolumn for HintField

The HintField is bound to a column of a data table. To display multiple columns in the tooltip, modify the sql query and club the columns with an alias name. In our implementation, we will club ProductName and Discontinued columns of Products table. SELECT 'Product '+ ProductName + ' is '+ iif(Discontinued,'Discontinued','Available') AS NewColumn, * FROM Products; Here NewColumn will be used as HintField. Set this Sql query as SelectCommand for AccessDataSource object.

Step 2 : Bind C1LineChart at Design Time

Place C1LineChart on the webpage and set the DataSourceID property to the AccessDataSource1 object. Next we need to define the chart bindings. Open the C1ChartBinding Collection Editor by clicking on the ellipsis button of 'DataBindings' property in the property grid. Click on Add button and set the following properties and save the changes : DataMember = Products XField = ProductID YField = UnitPrice HintField = NewColumn Once the above mentioned properties are set the C1LineChart is bound to Products table with HintField set to NewColumn. Also set the Axis.X.Text and Axis.Y.Text properties to ProductID and Unit Price respectively to display the axis labels.

Step 3 : Bind C1BarChart using Code

In this step we will create a C1BarChart object at runtime with the following code and bind it at runtime :

C1BarChart C1BarChart1 = new C1BarChart();

The data binding of Wijmo Charts through code is as easy and simple as it is through designer. First specify the datasource with a sql query similar to Step 1.

string Conn = @"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=|DataDirectory|\\Product.mdb";  
 OleDbConnection co = new OleDbConnection(Conn);  
 string sql = "SELECT 'Product  '+ ProductName + ' is '+ iif(Discontinued,'Discontinued','Available') AS NewColumn, * FROM Products;";  
 OleDbDataAdapter adapter = new OleDbDataAdapter(sql, co);  
 DataTable dt = new DataTable();  
 adapter.Fill(dt); 

Next set the C1BarChart's DataSource to the datatable dt. Create an object of C1.Web.Wijmo.Controls.C1Chart.C1ChartBinding object and specify the XField, YField and HintField properties :

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 = "UnitPrice";  
 cb.YFieldType = C1.Web.Wijmo.Controls.C1Chart.ChartDataYFieldType.Number;  

cb.HintField = "NewColumn";  
 C1BarChart1.Axis.X.Text = "ProductID";  
 C1BarChart1.Axis.Y.Text = "Unit Price";  
 C1BarChart1.DataBindings.Add(cb);  
 C1BarChart1.DataBind();

Add this C1Barchart object to the PlaceHolder placed on the webpage. Now run the application and hover mouse over the charts to view the tooltips. Download Sample