diff --git a/modules/samples/watertank/component/ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.watertank.realtime.analytics-view/analytics-view.hbs b/modules/samples/watertank/component/ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.watertank.realtime.analytics-view/analytics-view.hbs
index 2967d0cf..2e31a33c 100644
--- a/modules/samples/watertank/component/ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.watertank.realtime.analytics-view/analytics-view.hbs
+++ b/modules/samples/watertank/component/ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.watertank.realtime.analytics-view/analytics-view.hbs
@@ -1,35 +1,24 @@
-{{!
-  Copyright (c) 2016, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
-
-  WSO2 Inc. licenses this file to you under the Apache License,
-  Version 2.0 (the "License"); you may not use this file except
-  in compliance with the License.
-  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-  Unless required by applicable law or agreed to in writing,
-  software distributed under the License is distributed on an
-  "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-  KIND, either express or implied. See the License for the
-  specific language governing permissions and limitations
-  under the License.
-}}
-{{unit "cdmf.unit.lib.rickshaw-graph"}}
-
+{{unit "cdmf.unit.lib.handlebars"}}
+{{#zone "topCss"}}
+    {{css "css/coffee.css"}}
+{{/zone}}
 <div id="chartWrapper">
 </div>
 <div id="div-chart" data-websocketurl="{{websocketEndpoint}}">
-    <div id="chartWrapper-temperature" class="chartWrapper">
-        <div id="y_axis-temperature" class="custom_y_axis" style="margin-top: -20px;">Temperature</div>
-        <div id="chart-temperature" class="custom_rickshaw_graph"></div>
-        <div class="custom_x_axis">Time</div>
-    </div>
 
-    <div id="chartWrapper-humidity" class="chartWrapper">
-        <div id="y_axis-humidity" class="custom_y_axis" style="margin-top: -20px;">Humidity</div>
-        <div id="chart-humidity" class="custom_rickshaw_graph"></div>
-        <div class="custom_x_axis">Time</div>
+    <div class="coffee-wrapper">
+                    <div class="coffee">
+                        <div class="coffee_main">
+                            <div class="coffee_inner">
+                                <div class="water" id="water"></div>
+                            </div>
+                            <div class="highlight"></div>
+                        </div>
+                    </div>
+    </div>
+    
+    <div>
+    
     </div>
 
 </div>
@@ -45,4 +34,5 @@
     {{js "js/moment.min.js"}}
     {{js "js/socket.io.min.js"}}
     {{js "js/device-stats.js"}}
-{{/zone}}
\ No newline at end of file
+    {{js "js/coffee.js"}}
+{{/zone}}
diff --git a/modules/samples/watertank/component/ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.watertank.realtime.analytics-view/public/js/device-stats.js b/modules/samples/watertank/component/ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.watertank.realtime.analytics-view/public/js/device-stats.js
index 8314bed4..484c1379 100644
--- a/modules/samples/watertank/component/ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.watertank.realtime.analytics-view/public/js/device-stats.js
+++ b/modules/samples/watertank/component/ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.watertank.realtime.analytics-view/public/js/device-stats.js
@@ -24,71 +24,68 @@ var temperatureData = [];
 var humidity;
 var humidityData = [];
 
-var palette = new Rickshaw.Color.Palette({scheme: "classic9"});
+//var palette = new Rickshaw.Color.Palette({scheme: "classic9"});
 
 $(window).load(function () {
-
-    temperature = lineGraph("temperature", temperatureData);
-    humidity = lineGraph("humidity", humidityData);
-
     var websocketUrl = $("#div-chart").data("websocketurl");
-    connect(websocketUrl)
+    connect(websocketUrl);
+    updateCoffee(20);
 });
 
 $(window).unload(function () {
     disconnect();
 });
 
-function lineGraph(type, chartData) {
-    var tNow = new Date().getTime() / 1000;
-    for (var i = 0; i < 30; i++) {
-        chartData.push({
-                           x: tNow - (30 - i) * 15,
-                           y: parseFloat(0)
-                       });
-    }
-
-    var graph = new Rickshaw.Graph({
-        element: document.getElementById("chart-" + type),
-        width: $("#div-chart").width() - 50,
-        height: 300,
-        renderer: "line",
-        padding: {top: 0.2, left: 0.0, right: 0.0, bottom: 0.2},
-        xScale: d3.time.scale(),
-        series: [{
-            'color': palette.color(),
-            'data': chartData,
-            'name': type && type[0].toUpperCase() + type.slice(1)
-        }]
-    });
-
-    graph.render();
-
-    var xAxis = new Rickshaw.Graph.Axis.Time({
-        graph: graph
-    });
-
-    xAxis.render();
-
-    new Rickshaw.Graph.Axis.Y({
-        graph: graph,
-        orientation: 'left',
-        height: 300,
-        tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
-        element: document.getElementById('y_axis-' + type)
-    });
-
-    new Rickshaw.Graph.HoverDetail({
-        graph: graph,
-        formatter: function (series, x, y) {
-            var date = '<span class="date">' + moment(x * 1000).format('Do MMM YYYY h:mm:ss a') + '</span>';
-            var swatch = '<span class="detail_swatch" style="background-color: ' + series.color + '"></span>';
-            return swatch + series.name + ": " + parseInt(y) + '<br>' + date;
-        }
-    });
-
-    return graph;
-}
+//function lineGraph(type, chartData) {
+//    var tNow = new Date().getTime() / 1000;
+//    for (var i = 0; i < 30; i++) {
+//        chartData.push({
+//                           x: tNow - (30 - i) * 15,
+//                           y: parseFloat(0)
+//                       });
+//    }
+//
+//    var graph = new Rickshaw.Graph({
+//        element: document.getElementById("chart-" + type),
+//        width: $("#div-chart").width() - 50,
+//        height: 300,
+//        renderer: "line",
+//        padding: {top: 0.2, left: 0.0, right: 0.0, bottom: 0.2},
+//        xScale: d3.time.scale(),
+//        series: [{
+//            'color': palette.color(),
+//            'data': chartData,
+//            'name': type && type[0].toUpperCase() + type.slice(1)
+//        }]
+//    });
+//
+//    graph.render();
+//
+//    var xAxis = new Rickshaw.Graph.Axis.Time({
+//        graph: graph
+//    });
+//
+//    xAxis.render();
+//
+//    new Rickshaw.Graph.Axis.Y({
+//        graph: graph,
+//        orientation: 'left',
+//        height: 300,
+//        tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
+//        element: document.getElementById('y_axis-' + type)
+//    });
+//
+//    new Rickshaw.Graph.HoverDetail({
+//        graph: graph,
+//        formatter: function (series, x, y) {
+//            var date = '<span class="date">' + moment(x * 1000).format('Do MMM YYYY h:mm:ss a') + '</span>';
+//            var swatch = '<span class="detail_swatch" style="background-color: ' + series.color + '"></span>';
+//            return swatch + series.name + ": " + parseInt(y) + '<br>' + date;
+//        }
+//    });
+//
+//    return graph;
+//}
 
 //websocket connection
 function connect(target) {
@@ -112,12 +109,7 @@ function connect(target) {
 }
 
 function graphUpdate(chartData, xValue, yValue, graph) {
-    chartData.push({
-                       x: parseInt(xValue),
-                       y: parseFloat(yValue)
-                   });
-    chartData.shift();
-    graph.update();
+    updateCoffee(xValue);
 }
 
 function disconnect() {