Changing C1BarChart Bar Colors in Accordance with Third Field

DESCRIPTION

C1BarChart is one of the most frequently used control in the 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 Studio for ASP.NET control which is C1GridView. How, we will find out in this blog. 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"  
            });  
         }  
      }  
   });  
});

This is all we require. Add this code to your project and you are good to go. A sample application demonstrating this implementation can be download from the link below. Download Sample