Closes-Bug:#1581650

Did the following changes,
1)Using the start time and end time in query response for bucketizing the data, instead of the min & max time stamp of
response to make sure always the bars are of same width irrespective of data
2)When there is not data for a given bucket, adding 0.01 time the max value as data to improve look and feel.

Unit test results:
-----------------
Web Controller
-------------
PhantomJS 1.9.8 (Mac OS X 0.0.0): Executed 376 of 376 SUCCESS (3 mins 20.63 secs / 3 mins 7.78 secs)

Server Manager
-------------
PhantomJS 1.9.8 (Mac OS X 0.0.0): Executed 89 of 89 SUCCESS (24.105 secs / 22.555 secs)

Web Storage
-------
PhantomJS 1.9.8 (Mac OS X 0.0.0): Executed 84 of 84 SUCCESS (25.606 secs / 22.872 secs)

Change-Id: Ice947a7bff468992e111f20b64af5ba3ca5c359a
(cherry picked from commit 02b72c5)

webroot/js/views/StackedBarChartWithFocusView.js

@@ -89,7 +89,7 @@ define([
                 sliceTooltipFn = viewConfig['chartOptions']['sliceTooltipFn'];
             }
             if (contrail.checkIfFunction(viewConfig['parseFn'])) {
-                data = viewConfig['parseFn'](data);
+                data = viewConfig['parseFn'](data, chartViewModel);
             }
             if ($(selector).find('.stacked-bar-chart-container').find("svg") != null &&
                     $(selector).find('.stacked-bar-chart-container').find("svg").length > 0) {
@@ -212,6 +212,20 @@ define([
             }
             var dateExtent;
             var yAxisMaxValue = d3.max(data, function(d) { return d.total; });
+            if (yAxisMaxValue == 0) {
+                yAxisMaxValue = height;
+            }
+            //inserting the dummy values where the no data in the given bucket
+            $.each(data, function (idx, obj) {
+                if (obj.total == 0) {
+                    ifNull(obj['counts'], []).push({
+                        tooltip: false,
+                        color: obj.colorCodes[0],
+                        y0: 0,
+                        y1: yAxisMaxValue * 0.01
+                    })
+                }
+            });
             yAxisMaxValue = yAxisMaxValue + (yAxisOffset/100) * yAxisMaxValue;
             var yExtent = [0, yAxisMaxValue];
             var filter = cfDataSource != null ? cfDataSource.getFilter('timeFilter') : null;
@@ -332,7 +346,7 @@ define([
                     .style("fill", function(d) { return d.color; })
                     .on("mouseover", function(d) {
                         if (sliceTooltipFn != null &&
-                            typeof sliceTooltipFn == 'function') {
+                            typeof sliceTooltipFn == 'function' && d.tooltip != false) {
                             var event = d3.event;
                             tooltipDiv.transition()
                                 .duration(200)