diff --git a/views/ngXosViews/ceilometerDashboard/src/js/samples.directive.js b/views/ngXosViews/ceilometerDashboard/src/js/samples.directive.js
new file mode 100644
index 0000000..1bcb838
--- /dev/null
+++ b/views/ngXosViews/ceilometerDashboard/src/js/samples.directive.js
@@ -0,0 +1,164 @@
+/**
+ * © OpenCORD
+ *
+ * Visit http://guide.xosproject.org/devguide/addview/ for more information
+ *
+ * Created by teone on 3/21/16.
+ */
+
+(function () {
+  'use strict';
+
+  angular.module('xos.ceilometerDashboard')
+  .directive('ceilometerSamples', function(lodash, $stateParams){
+    return {
+      restrict: 'E',
+      scope: {},
+      bindToController: true,
+      controllerAs: 'vm',
+      templateUrl: 'templates/ceilometer-samples.tpl.html',
+      controller: function(Ceilometer) {
+
+        // console.log(Ceilometer.selectResource);
+
+        this.chartColors = [
+          '#286090',
+          '#F7464A',
+          '#46BFBD',
+          '#FDB45C',
+          '#97BBCD',
+          '#4D5360',
+          '#8c4f9f'
+        ];
+
+        this.chart = {
+          series: [],
+          labels: [],
+          data: []
+        }
+
+        Chart.defaults.global.colours = this.chartColors;
+
+        this.chartType = 'line';
+
+        if($stateParams.name && $stateParams.tenant){
+          this.name = $stateParams.name;
+          this.tenant = $stateParams.tenant;
+          // TODO rename tenant in project_id
+        }
+        else{
+          throw new Error('Missing Name and Tenant Params!');
+        }
+
+        /**
+         * Goes trough the array and format date to be used as labels
+         *
+         * @param Array data
+         * @returns Array a list of labels
+         */
+
+        this.getLabels = (data) => {
+          return data.reduce((list, item) => {
+            let date = new Date(item.timestamp);
+            list.push(`${date.getHours()}:${(date.getMinutes()<10?'0':'') + date.getMinutes()}:${date.getSeconds()}`);
+            return list;
+          }, []);
+        };
+
+        /**
+         * Goes trough the array and return a flat array of values
+         *
+         * @param Array data
+         * @returns Array a list of values
+         */
+
+        this.getData = (data) => {
+          return data.reduce((list, item) => {
+            list.push(item.volume);
+            return list;
+          }, []);
+        }
+
+        /**
+         * Add a samples to the chart
+         *
+         * @param string resource_id
+         */
+        this.chartMeters = [];
+        this.addMeterToChart = (resource_id) => {
+          this.chart['labels'] = this.getLabels(lodash.sortBy(this.samplesList[resource_id], 'timestamp'));
+          this.chart['series'].push(resource_id);
+          this.chart['data'].push(this.getData(lodash.sortBy(this.samplesList[resource_id], 'timestamp')));
+          this.chartMeters.push(this.samplesList[resource_id][0]); //use the 0 as are all samples for the same resource and I need the name
+          lodash.remove(this.sampleLabels, {id: resource_id});
+        }
+
+        this.removeFromChart = (meter) => {
+          this.chart.data.splice(this.chart.series.indexOf(meter.resource_id), 1);
+          this.chart.series.splice(this.chart.series.indexOf(meter.resource_id), 1);
+          this.chartMeters.splice(lodash.findIndex(this.chartMeters, {resource_id: meter.resource_id}), 1);
+          this.sampleLabels.push({
+            id: meter.resource_id,
+            name: meter.resource_name || meter.resource_id
+          })
+        };
+
+        /**
+         * Format samples to create a list of labels and ids
+         */
+
+        this.formatSamplesLabels = (samples) => {
+
+          return lodash.uniq(samples, 'resource_id')
+            .reduce((labels, item) => {
+              labels.push({
+                id: item.resource_id,
+                name: item.resource_name || item.resource_id
+              });
+
+              return labels;
+            }, []);
+        }
+
+
+        /**
+         * Load the samples and format data
+         */
+
+        this.showSamples = () => {
+          this.loader = true;
+          // Ceilometer.getSamples(this.name, this.tenant) //fetch one
+          Ceilometer.getSamples(this.name) //fetch all
+            .then(res => {
+
+              // rename things in UI
+              res.map(m => {
+                m.resource_name = m.resource_name.replace('mysite_onos_vbng', 'ONOS_FABRIC');
+                m.resource_name = m.resource_name.replace('mysite_onos_volt', 'ONOS_CORD');
+                m.resource_name = m.resource_name.replace('mysite_vbng', 'mysite_vRouter');
+                return m;
+              });
+              // end rename things in UI
+
+              // setup data for visualization
+              this.samplesList = lodash.groupBy(res, 'resource_id');
+              this.sampleLabels = this.formatSamplesLabels(res);
+
+              // add current meter to chart
+              this.addMeterToChart(this.tenant);
+
+            })
+            .catch(err => {
+              this.error = err.data.detail;
+            })
+            .finally(() => {
+              this.loader = false;
+            });
+        };
+
+        this.showSamples();
+      }
+    }
+  });
+})();
+