1. Home
  2. Docs
  3. InfoCaptor
  4. How to add bells and whistles to any dashboard
  5. Example of dashboard with color coding based on Dates

Example of dashboard with color coding based on Dates

The following code is an example of how you can use two dates in the SQL result to add color coding to each row

var cols=glb["_odata"].length;
var rows=glb["_odata"][0].length;
var cellVal,cellDtVal,todayDt,timeDiff,diffDays; 

todayDt=new Date();
var dateColIndex=7; //this is the deciding date column 

for (var i=0; i < rows; i++)
   cellDtVal= new Date(cellVal);

   //date diff value
    timeDiff = (cellDtVal.getTime() - todayDt.getTime());

    // days difference
    diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));

   if (diffDays>2)
      glb["_odata"][0][i] = "<span style='color:white;background-color:green;padding:5px;'>"+glb["_odata"][0][i] +"</span>";
      glb["_odata"][dateColIndex][i] = "<span style='color:white;background-color:green;padding:5px;'>"+glb["_odata"][dateColIndex][i] +"</span>";

   else if (diffDays<0)
      glb["_odata"][0][i] = "<span style='color:white;background-color:red;padding:5px;'>"+glb["_odata"][0][i] +"</span>";
      glb["_odata"][dateColIndex][i] = "<span style='color:white;background-color:red;padding:5px;'>"+glb["_odata"][dateColIndex][i] +"</span>";

      glb["_odata"][0][i] = "<span style='color:black;background-color:yellow;padding:5px;'>"+glb["_odata"][0][i] +"</span>";
      glb["_odata"][dateColIndex][i] = "<span style='color:black;background-color:yellow;padding:5px;'>"+glb["_odata"][dateColIndex][i] +"</span>";


Was this article helpful to you? Yes No

How can we help?