Traffic light (color code) a field based on percentage value

Question

Any one have done traffic light (color code) a field based on percentage value on SharePoint 2013 using code? With out Sp designer or visual only using Clint side?

When you enter the % value,

• If the value is 0 to 30% =green
• If the value is 30 to 70% ......yellow
• If the value is 70 to 100%........red

Answer 1

Tray jsLink. This code is for a view:

CSR code samples #1 (Task Priority color)

You can see the reference to a view here:

priorityFiledContext.Templates.Fields = { 
  // Apply the new rendering for Priority field on List View 
  "Priority": { "View": priorityFiledTemplate } 
};

And you can add your own html and css in these lines:

// Return html element with appropriate color based on priority value 
    switch (priority) { 
        case "(1) High": 
            return "<span style='color :#f00'>" + priority + "</span>"; 
            break; 
        case "(2) Normal": 
            return "<span style='color :#ff6a00'>" + priority + "</span>"; 
            break; 
        case "(3) Low": 
            return "<span style='color :#cab023'>" + priority + "</span>"; 
    }

Result is:

Answer 2

You can use JSLink/CSR concept of SharePoint, available in SP2013. The CSR is technique to represent the data. Most of the web part in SP2013 has ability of custom rendering using CSR. Here is an example of exactly what you are trying to achieve (refer to Sample 1 in the page).

https://code.msdn.microsoft.com/office/Client-side-rendering-JS-2ed3538a