3 files changed, 56 insertions, 16 deletions
diff --git a/assets/js/src/CompareHoursColumnChart.js b/assets/js/src/CompareHoursColumnChart.js
new file mode 100644
index 00000000..ce6df7f1
--- /dev/null
+++ b/assets/js/src/CompareHoursColumnChart.js
@@ -0,0 +1,37 @@
+function CompareHoursColumnChart(app) {
+    this.app = app;
+}
+
+CompareHoursColumnChart.prototype.execute = function() {
+    var metrics = $("#chart").data("metrics");
+    var spent = [$("#chart").data("label-spent")];
+    var estimated = [$("#chart").data("label-estimated")];
+    var categories = [];
+
+    for (var status in metrics) {
+        spent.push(parseInt(metrics[status].time_spent));
+        estimated.push(parseInt(metrics[status].time_estimated));
+        categories.push(status);
+    }
+
+    c3.generate({
+        data: {
+            columns: [spent, estimated],
+            type: 'bar'
+        },
+        bar: {
+            width: {
+                ratio: 0.2
+            }
+        },
+        axis: {
+            x: {
+                type: 'category',
+                categories: categories
+            }
+        },
+        legend: {
+           show: true
+        }
+    });
+};
diff --git a/assets/js/src/Gantt.js b/assets/js/src/Gantt.js
index 380371d1..6f536552 100644
--- a/assets/js/src/Gantt.js
+++ b/assets/js/src/Gantt.js
@@ -185,7 +185,7 @@ Gantt.prototype.addBlocks = function(slider, start) {
 
         var block = jQuery("<div>", {
             "class": "ganttview-block tooltip" + (this.options.allowMoves ? " ganttview-block-movable" : ""),
-            "title": this.getBarTooltip(this.data[i]),
+            "title": this.getBarTooltip(series),
             "css": {
                 "width": ((size * this.options.cellWidth) - 9) + "px",
                 "margin-left": (offset * this.options.cellWidth) + "px"
@@ -193,23 +193,25 @@ Gantt.prototype.addBlocks = function(slider, start) {
         }).append(text);
 
         if (size >= 2) {
-            text.append(this.data[i].progress);
+            text.append(series.progress);
         }
 
-        block.data("record", this.data[i]);
-        this.setBarColor(block, this.data[i]);
-
-        block.append(jQuery("<div>", {
-            "css": {
-                "z-index": 0,
-                "position": "absolute",
-                "top": 0,
-                "bottom": 0,
-                "background-color": series.color.border,
-                "width": series.progress,
-                "opacity": 0.4
-            }
-        }));
+        block.data("record", series);
+        this.setBarColor(block, series);
+
+        if (series.progress != "0%") {
+            block.append(jQuery("<div>", {
+                "css": {
+                    "z-index": 0,
+                    "position": "absolute",
+                    "top": 0,
+                    "bottom": 0,
+                    "background-color": series.color.border,
+                    "width": series.progress,
+                    "opacity": 0.4
+                }
+            }));
+        }
 
         jQuery(rows[rowIdx]).append(block);
         rowIdx = rowIdx + 1;
diff --git a/assets/js/src/Router.js b/assets/js/src/Router.js
index 0c96262c..ab23c0fd 100644
--- a/assets/js/src/Router.js
+++ b/assets/js/src/Router.js
@@ -30,6 +30,7 @@ jQuery(document).ready(function() {
     router.addRoute('analytic-avg-time-column', AvgTimeColumnChart);
     router.addRoute('analytic-task-time-column', TaskTimeColumnChart);
     router.addRoute('analytic-lead-cycle-time', LeadCycleTimeChart);
+    router.addRoute('analytic-compare-hours', CompareHoursColumnChart);
     router.addRoute('gantt-chart', Gantt);
     router.dispatch(app);
     app.listen();