How to color bar chart based on 3rd data value

C1BarChart is one of the most frequently used control in the ASP.NET Web Forms Edition (formerly Studio for ASP.NET Wijmo) suite. Typically when we bind C1BarChart to a datasource, we bind one field value to the X-Axis and another field value to the Y-Axis. However recently we got a request from one of the users where he wanted to set the color of the bars of one series, according to a field value which is not bound with the chart. The situation was that there are three fields in a list viz Task, Time and Status, The Task and Time were plotted on X and Y axis respectively but the color of the bar should represent the Status of the task being performed. If we consider the default behavior, then of course this functionality is not possible. However thanks to the highly customizable structure of Wijmo controls, we can easily workaround this situation with the help of another ASP.NET Web Forms control which is C1GridView. Let us take a look at the image below which will give you some idea about what we are exactly looking to achieve.

IMPLEMENTATION

Since C1BarChart is not bound to the status field, a question arises that how will we get its current value? The answer is by using C1GridView, The idea here is to bind the same datasource to C1GridView control so that we can access its data on the client side, get the current value for the Status field and set the colors for the bars accordingly. So the first thing which we need is to set up a datasource. Please note that I would not recommend this approach if you have a really large datasource since it might impact the performance.

protected void Page_Load(object sender, EventArgs e)  
{  
   DataTable dt = new DataTable();  
   dt.Columns.Add("Week", typeof(string));  
   dt.Columns.Add("Time", typeof(double));  
   dt.Columns.Add("Status", typeof(string));  

   dt.Rows.Add("Wk1", 6, "Running");  
   dt.Rows.Add("Wk1", 10, "Failed");  
   dt.Rows.Add("Wk1", 19, "Failed");  
   dt.Rows.Add("Wk1", 25, "Finished");  
   dt.Rows.Add("Wk1", 7, "Running");  

   C1BarChart1.DataSource = dt;  

   C1.Web.Wijmo.Controls.C1Chart.C1ChartBinding cb = new C1.Web.Wijmo.Controls.C1Chart.C1ChartBinding();  
   cb.XField = "Week";  
   cb.XFieldType = C1.Web.Wijmo.Controls.C1Chart.ChartDataXFieldType.String;  
   cb.YField = "Time";  
   cb.YFieldType = C1.Web.Wijmo.Controls.C1Chart.ChartDataYFieldType.Number;  

   C1BarChart1.DataBindings.Add(cb);  
   C1BarChart1.DataBind();  

   C1GridView1.DataSource = dt;  
   C1GridView1.DataBind();  
}

The next step involves the client side code. Here we get the Data array for C1GridView. Next we iterate over the array and according to the value of the Status field, create another array which stores the corresponding color for the status value. Here is the client side code:

var color = [];  
$(document).ready(function () {  
   var data = $("#C1GridView1").c1gridview("data");  
   for (var i = 0; i < data.length; i++) {  
      var status = data[i][2];  
      if (status === "Running") {  
         color.push("Yellow");  
      }  
      else if (status === "Finished") {  
         color.push("Green");  
      }  
      else if (status === "Failed") {  
         color.push("Red");  
      }  
   }  
   $("#C1BarChart1").c1barchart({  
      painted: function (args) {  
         var count = $(this).data().fields.chartElements.bars.length;  
         for (var i = 0; i < count; i++) {  
            var bar = $(this).c1barchart("getBar", i);  
            bar.attr({  
               fill: color[i],  
               stroke: "black"  
            });  
         }  
         $(".wijmo-wijgrid").css("display", "none");  
      },  
      mouseOut: function (args) {  
         var count = $(this).data().fields.chartElements.bars.length;  
         for (var i = 0; i < count; i++) {  
            var bar = $(this).c1barchart("getBar", i);  
            bar.attr({  
               fill: color[i],  
               stroke: "black"  
            });  
         }  
      }  
   });  
});