Index: src/main/resources/hudson/plugins/cobertura/targets/CoverageResult/index.jelly
===================================================================
--- src/main/resources/hudson/plugins/cobertura/targets/CoverageResult/index.jelly	(revision 18710)
+++ src/main/resources/hudson/plugins/cobertura/targets/CoverageResult/index.jelly	(working copy)
@@ -55,8 +55,13 @@
                 <tr>
                     <td>${it.name}</td>
                     <j:forEach var="metric" items="${metrics}">
-                        <td data="${it.getCoverage(metric).percentageFloat}">${it.getCoverage(metric).percentage}%
-                            (${it.getCoverage(metric)})
+                        <td>
+                            <table class="percentgraph" cellpadding="0px" cellspacing="0px">
+                                <tr class="percentgraph">                                   
+                                    <td width="40" data="${it.getCoverage(metric).percentageFloat}">${it.getCoverage(metric).percentage}%</td>
+                                    <td class="percentgraph" data="${it.getCoverage(metric).percentageFloat}"><div class="percentgraph"><div class="greenbar" style="width: ${it.getCoverage(metric).percentageFloat}px;"><span class="text">${it.getCoverage(metric)}</span></div></div></td>
+                                </tr>
+                            </table>
                         </td>
                     </j:forEach>
                 </tr>
@@ -120,9 +125,10 @@
                                 <j:set var="childResult" value="${child.getCoverage(metric)}"/>
                                 <j:choose>
                                     <j:when test="${childResult!=null}">
-                                        <td data="${childResult.percentageFloat}">${childResult.percentage}%
-                                            (${childResult})
-                                        </td>
+                                        <td><table class="percentgraph" cellpadding="0px" cellspacing="0px"><tr class="percentgraph">                                   
+                                            <td width="40" class="percentgraph" data="${childResult.percentageFloat}">${childResult.percentage}%</td>
+                                            <td class="percentgraph" data="${childResult.percentageFloat}"><div class="percentgraph"><div class="greenbar" style="width: ${childResult.percentageFloat}px;"><span class="text">${childResult}</span></div></div></td>
+                                        </tr></table></td>
                                     </j:when>
                                     <j:otherwise>
                                         <td data="101">N/A</td>
Index: src/main/webapp/css/style.css
===================================================================
--- src/main/webapp/css/style.css	(revision 18710)
+++ src/main/webapp/css/style.css	(working copy)
@@ -61,3 +61,56 @@
 table.source tr.noCover {
     background-color: #fff;
 }
+
+div.percentgraph {
+    background-color: #f02020;
+    border: #808080 1px solid;
+    height: 1.1em;
+    margin: 0px;
+    padding: 0px;
+    width: 100px;
+}
+
+div.percentgraph div.greenbar {
+    background-color: #00f000;
+    height: 1.1em;
+    margin: 0px;
+    padding: 0px;
+}
+
+div.percentgraph div.na {
+    background-color: #eaeaea;
+    height: 1.1em;
+    margin: 0px;
+    padding: 0px;
+}
+
+div.percentgraph span.text {
+    display: block;
+    position: absolute;
+    text-align: center;
+    width: 100px;
+}
+
+table.percentgraph {
+    border: 0px;
+    font-size: 130%;
+    margin: 0px;
+    margin-left: 0px;
+    margin-right: 0px;
+    padding: 0px;
+    text-align: left;
+}
+
+table.percentgraph tr.percentgraph {
+    border: 0px;
+    margin: 0px;
+    padding: 0px;
+}
+
+table.percentgraph td.percentgraph {
+    border: 0px;
+    margin: 0px;
+    padding: 0px;
+    padding-left: 4px;
+}