diff --git a/web/gui/src/main/webapp/app/fw/widget/chartBuilder.js b/web/gui/src/main/webapp/app/fw/widget/chartBuilder.js
new file mode 100644
index 0000000..f1df146
--- /dev/null
+++ b/web/gui/src/main/webapp/app/fw/widget/chartBuilder.js
@@ -0,0 +1,146 @@
+/*
+ * Copyright 2016-present Open Networking Laboratory
+ *
+ * Licensed 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.
+ */
+
+/*
+ ONOS GUI -- Widget -- Chart Service
+ */
+(function () {
+    'use strict';
+
+    // injected references
+    // fs -> FnService
+    // wss -> WebSocketService
+    // ls -> LoadingService
+    var $log, $interval, $timeout, fs, wss, ls;
+
+    // constants
+    var refreshInterval = 2000;
+
+    // example params to buildChart:
+    // {
+    //    scope: $scope,     <- controller scope
+    //    tag: 'device',     <- chart identifier
+    //    respCb: respCb,    <- websocket response callback (optional)
+    //    query: params      <- query parameters in URL (optional)
+    // }
+    //          Note: query is always an object (empty or containing properties)
+    //                 it comes from $location.search()
+    function buildChart(o) {
+        var handlers = {},
+            root = o.tag + 's',
+            req = o.tag + 'DataRequest',
+            resp = o.tag + 'DataResponse',
+            onResp = fs.isF(o.respCb),
+            oldChartData = [],
+            refreshPromise;
+
+        o.scope.chartData = [];
+        o.scope.changedData = [];
+        o.scope.reqParams = o.reqParams || {};
+        o.scope.autoRefresh = true;
+        o.scope.autoRefreshTip = 'Toggle auto refresh';
+
+        // === websocket functions ===
+        // response
+        function respCb(data) {
+            ls.stop();
+            o.scope.chartData = data[root];
+            onResp && onResp();
+
+            // check if data changed
+            if (!angular.equals(o.scope.chartData, oldChartData)) {
+                o.scope.changedData = [];
+                // only refresh the chart if there are new changes
+                if (oldChartData.length) {
+                    angular.forEach(o.scope.chartData, function (item) {
+                        if (!fs.containsObj(oldChartData, item)) {
+                            o.scope.changedData.push(item);
+                        }
+                    });
+                }
+                angular.copy(o.scope.chartData, oldChartData);
+            }
+            o.scope.$apply();
+        }
+        handlers[resp] = respCb;
+        wss.bindHandlers(handlers);
+
+        // request
+        function requestCb(params) {
+            var p = angular.extend({}, params, o.query);
+            if (wss.isConnected()) {
+                wss.sendEvent(req, p);
+                ls.start();
+            }
+        }
+        o.scope.requestCallback = requestCb;
+
+        // === autoRefresh functions ===
+        function fetchDataIfNotWaiting() {
+            if (!ls.waiting()) {
+                if (fs.debugOn('widget')) {
+                    $log.debug('Refreshing ' + root + ' page');
+                }
+                requestCb(o.scope.reqParams);
+            }
+        }
+
+        function startRefresh() {
+            refreshPromise = $interval(fetchDataIfNotWaiting, refreshInterval);
+        }
+
+        function stopRefresh() {
+            if (refreshPromise) {
+                $interval.cancel(refreshPromise);
+                refreshPromise = null;
+            }
+        }
+
+        function toggleRefresh() {
+            o.scope.autoRefresh = !o.scope.autoRefresh;
+            o.scope.autoRefresh ? startRefresh() : stopRefresh();
+        }
+        o.scope.toggleRefresh = toggleRefresh;
+
+        // === Cleanup on destroyed scope ===
+        o.scope.$on('$destroy', function () {
+            wss.unbindHandlers(handlers);
+            stopRefresh();
+            ls.stop();
+        });
+
+        requestCb(o.scope.reqParams);
+        startRefresh();
+    }
+
+    angular.module('onosWidget')
+        .factory('ChartBuilderService',
+        ['$log', '$interval', '$timeout', 'FnService', 'WebSocketService',
+            'LoadingService',
+
+            function (_$log_, _$interval_, _$timeout_, _fs_, _wss_, _ls_) {
+                $log = _$log_;
+                $interval = _$interval_;
+                $timeout = _$timeout_;
+                fs = _fs_;
+                wss = _wss_;
+                ls = _ls_;
+
+                return {
+                    buildChart: buildChart
+                };
+            }]);
+}());
diff --git a/web/gui/src/main/webapp/index.html b/web/gui/src/main/webapp/index.html
index 02bbafd..4f550d2 100644
--- a/web/gui/src/main/webapp/index.html
+++ b/web/gui/src/main/webapp/index.html
@@ -78,6 +78,7 @@
     <script src="app/fw/widget/tooltip.js"></script>
     <script src="app/fw/widget/button.js"></script>
     <script src="app/fw/widget/tableBuilder.js"></script>
+    <script src="app/fw/widget/chartBuilder.js"></script>
 
     <script src="app/fw/layer/layer.js"></script>
     <script src="app/fw/layer/panel.js"></script>
diff --git a/web/gui/src/main/webapp/tests/app/fw/widget/chartBuilder-spec.js b/web/gui/src/main/webapp/tests/app/fw/widget/chartBuilder-spec.js
new file mode 100644
index 0000000..7780c7f
--- /dev/null
+++ b/web/gui/src/main/webapp/tests/app/fw/widget/chartBuilder-spec.js
@@ -0,0 +1,91 @@
+/*
+ * Copyright 2016-present Open Networking Laboratory
+ *
+ * Licensed 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.
+ */
+
+/*
+ ONOS GUI -- Widget -- Chart Builder Service - Unit Tests
+ */
+
+describe('factory: fw/widget/chartBuilder.js', function () {
+    var $log, $rootScope, fs, cbs, is;
+
+    var mockObj;
+        mockWss = {
+            bindHandlers: function () {},
+            sendEvent: function () {},
+            unbindHandlers: function () {}
+        };
+
+    beforeEach(module('onosWidget', 'onosUtil', 'onosRemote', 'onosSvg'));
+
+    beforeEach(function () {
+        module(function ($provide) {
+            $provide.value('WebSocketService', mockWss);
+        });
+    });
+
+    beforeEach(inject(function (_$log_, _$rootScope_,
+                                FnService, ChartBuilderService, IconService) {
+        $log = _$log_;
+        $rootScope = _$rootScope_;
+        fs = FnService;
+        cbs = ChartBuilderService;
+        is = IconService;
+    }));
+
+    beforeEach(function () {
+        mockObj = {
+            scope: $rootScope.$new(),
+            tag: 'foo'
+        };
+    });
+
+    afterEach(function () {
+        mockObj = {};
+    });
+
+    it('should define ChartBuilderService', function () {
+        expect(cbs).toBeDefined();
+    });
+
+    it('should define api functions', function () {
+        expect(fs.areFunctions(cbs, [
+            'buildChart'
+        ])).toBeTruthy();
+    });
+
+    it('should verify requestCb', function () {
+        spyOn(mockWss, 'sendEvent');
+        expect(mockObj.scope.requestCallback).not.toBeDefined();
+        cbs.buildChart(mockObj);
+        expect(mockObj.scope.requestCallback).toBeDefined();
+        expect(mockWss.sendEvent).toHaveBeenCalled();
+    });
+
+    it('should set chartData', function () {
+        expect(mockObj.scope.chartData).not.toBeDefined();
+        cbs.buildChart(mockObj);
+        expect(fs.isA(mockObj.scope.chartData)).toBeTruthy();
+        expect(mockObj.scope.chartData.length).toBe(0);
+    });
+
+    it('should unbind handlers on destroyed scope', function () {
+        spyOn(mockWss, 'unbindHandlers');
+        cbs.buildChart(mockObj);
+        expect(mockWss.unbindHandlers).not.toHaveBeenCalled();
+        mockObj.scope.$destroy();
+        expect(mockWss.unbindHandlers).toHaveBeenCalled();
+    });
+}
\ No newline at end of file