Color code status indicator to sharepoint list column using javascript

Reference url:
http://www.sharepointkings.com/2010/04/sharepoint-custom-so-called-kpi.html

Sharepoint Custom so called KPI

Hay Guys,

In general KPI most of the time we are having simple requirement.

Like if Risk is high or status is incomplete then it should show in RED.
If Low then Green and Medium then orange.

Same functionality we had done for listview webpart which show Red/green/yellow icon based on status.

Here is the example
In our list we had a column called criticality with dropdown values

High
Low
Medium

Check the screenshot below

And check another one after what we had done.

So you can see it looks like KPI
This is similar like
http://www.sharepointkings.com/2008/12/highlight-sharepoint-list-rows.html
but everyone is asking regarding this KPI so we had done this.

Now, What we had done
It’s nothing just a trick of javascript/jquery
Here is the code

$(document).ready(function() {
var strURL = window.location.href;
if ((strURL.toUpperCase().indexOf("Lists/Risk%20Management".toUpperCase()) != -1) ||
(strURL.toUpperCase().indexOf("Lists/Risk Management".toUpperCase()) != -1)) {
//alert('pp');
$(".ms-vb2:contains('High')").each(function() {
var tempDIV = document.createElement("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.innerHTML = "<img src='_LAYOUTS/SPKings/Images/Red.gif' />"; //$(this).text();
//alert($(this).html());
$(this).text("");
$(this).append(tempDIV);

});
$(".ms-vb2:contains('Low')").each(function() {
var tempDIV = document.createElement("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.innerHTML = "<img src='_LAYOUTS/SPKings/Images/Green.gif' />"; //$(this).text();
//alert($(this).html());
$(this).text("");
$(this).append(tempDIV);

});
$(".ms-vb2:contains('Medium')").each(function() {
var tempDIV = document.createElement("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.innerHTML = "<img src='_LAYOUTS/SPKings/Images/Amber.gif' />"; //$(this).text();
//alert($(this).html());
$(this).text("");
$(this).append(tempDIV);

});
$(".ms-vb2:contains('No Criticality')").each(function() {
var tempDIV = document.createElement("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.innerHTML = "<img src='_LAYOUTS/SPKings/Images/NoData.gif' />"; //$(this).text();
//alert($(this).html());
$(this).text("");
$(this).append(tempDIV);

});
}

});

What we had done is we are checking URL
If it is out target list, then we apply javascript and as you can see we are finding High and replacing that with Red.gif.

Same way for other criticality also

You can use image from image library also. We had used images from layouts.

Don’t forget to include jquery.JS to make it work.

Guys, this is not recommended way for authentic KPI but for time being or for demo purpose where we are not having time and have to show a lot of thing this will act as icings on the cake