diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/bower.json b/xos/core/xoslib/ngXosViews/ceilometerDashboard/bower.json
index 5d64575..326f286 100644
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/bower.json
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/bower.json
@@ -15,8 +15,8 @@
     "tests"
   ],
   "dependencies": {
-    "angular-charts": "teone/angular-charts#~0.2.7",
-    "n3-line-chart": "~1.1.12"
+    "Split.js": "~1.0.4",
+    "angular-chart.js": "~0.8.7"
   },
   "devDependencies": {
     "jquery": "~2.1.4",
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/css/ceilometerDashboard.css b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/css/ceilometerDashboard.css
index 0868702..56ae00f 100644
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/css/ceilometerDashboard.css
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/css/ceilometerDashboard.css
@@ -1,67 +1,123 @@
-.chart {
-  width: 100%;
-  height: 500px;
-}
-.loader {
-  font-size: 10px;
-  margin: 50px auto;
-  text-indent: -9999em;
-  width: 11em;
-  height: 11em;
-  border-radius: 50%;
-  background: #ffffff;
-  background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
-  background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
-  background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
-  background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
-  background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
-  position: relative;
-  -webkit-animation: load3 1.4s infinite linear;
-  animation: load3 1.4s infinite linear;
-  -webkit-transform: translateZ(0);
-  -ms-transform: translateZ(0);
-  transform: translateZ(0);
-}
-.loader:before {
-  width: 50%;
-  height: 50%;
-  background: #105E9E;
-  border-radius: 100% 0 0 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  content: '';
-}
-.loader:after {
-  background: #fff;
-  width: 75%;
-  height: 75%;
-  border-radius: 50%;
-  content: '';
-  margin: auto;
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-}
-@-webkit-keyframes load3 {
-  0% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
+/*ceilometer-dashboard{*/
+
+  /* Panel Layout */
+  .panel {
+    margin-top: 10px;
   }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
+
+  .panel-body:not(:first-child) {
+    border-top: 1px solid #e3e3e3;
   }
-}
-@keyframes load3 {
-  0% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
+
+  .panel-body .row {
+    margin-top: 10px;
   }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
+
+  /* Chart details */
+  .chart {
+    width: 100%;
+    height: 300px;
   }
-}
+
+  /* Loader */
+  .loader {
+    font-size: 10px;
+    margin: 50px auto;
+    text-indent: -9999em;
+    width: 11em;
+    height: 11em;
+    border-radius: 50%;
+    background: #ffffff;
+    background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+    background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+    background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+    background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+    background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+    position: relative;
+    -webkit-animation: load3 1.4s infinite linear;
+    animation: load3 1.4s infinite linear;
+    -webkit-transform: translateZ(0);
+    -ms-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+  .loader:before {
+    width: 50%;
+    height: 50%;
+    background: #105E9E;
+    border-radius: 100% 0 0 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    content: '';
+  }
+  .loader:after {
+    background: #fff;
+    width: 75%;
+    height: 75%;
+    border-radius: 50%;
+    content: '';
+    margin: auto;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+  @-webkit-keyframes load3 {
+    0% {
+      -webkit-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes load3 {
+    0% {
+      -webkit-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+
+  /* Split.js */
+
+  html, body {
+    height: 100%;
+  }
+
+  body {
+    box-sizing: border-box;
+  }
+
+  .split {
+    -webkit-box-sizing: border-box;
+       -moz-box-sizing: border-box;
+            box-sizing: border-box;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  .gutter {
+    background-color: transparent;
+    background-repeat: no-repeat;
+    background-position: 50%;
+  }
+  .gutter.gutter-horizontal {
+    cursor: col-resize;
+    background-image: url('grips/vertical.png');
+  }
+  .gutter.gutter-vertical {
+    cursor: row-resize;
+    background-image: url('grips/horizontal.png');
+  }
+  .split.split-horizontal, .gutter.gutter-horizontal {
+    height: 100%;
+    float: left;
+  }
+
+
+/*}
\ No newline at end of file
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/css/grips/vertical.png b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/css/grips/vertical.png
new file mode 100644
index 0000000..0ac8fa1
--- /dev/null
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/css/grips/vertical.png
Binary files differ
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/index.html b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/index.html
index a3d4845..adaa2ee 100644
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/index.html
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/index.html
@@ -2,6 +2,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1, max-scale=1">
 <!-- browserSync -->
 <!-- bower:css -->
+<link rel="stylesheet" href="vendor/angular-chart.js/dist/angular-chart.css" />
 <link rel="stylesheet" href="vendor/bootstrap-css/css/bootstrap.min.css" />
 <!-- endbower --><!-- endcss -->
 <!-- inject:css -->
@@ -15,11 +16,10 @@
 </div>
 
 <!-- bower:js -->
-<script src="vendor/d3/d3.js"></script>
+<script src="vendor/Split.js/split.js"></script>
 <script src="vendor/angular/angular.js"></script>
-<script src="vendor/angular-charts/dist/angular-charts.js"></script>
-<script src="vendor/moment/moment.js"></script>
-<script src="vendor/n3-line-chart/build/line-chart.min.js"></script>
+<script src="vendor/Chart.js/Chart.js"></script>
+<script src="vendor/angular-chart.js/dist/angular-chart.js"></script>
 <script src="vendor/jquery/dist/jquery.js"></script>
 <script src="vendor/angular-mocks/angular-mocks.js"></script>
 <script src="vendor/angular-ui-router/release/angular-ui-router.js"></script>
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/js/main.js b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/js/main.js
index c0180fa..0dfa92b 100644
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/js/main.js
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/js/main.js
@@ -6,7 +6,8 @@
   'ngLodash',
   'ui.router',
   'xos.helpers',
-  'angularCharts'
+  // 'angularCharts',
+  'chart.js'
 ])
 .config(($stateProvider) => {
   $stateProvider
@@ -17,6 +18,16 @@
   .state('samples', {
     url: '/:name/:tenant/samples',
     template: '<ceilometer-samples></ceilometer-samples>'
+  })
+  .state('split', {
+    url: '/split',
+    controller: () => {
+      console.log('split', Split);
+      Split(['#one', '#two', '#three'], {
+        
+      });
+    },
+    templateUrl: 'templates/split.html'
   });
 })
 .config(function($httpProvider){
@@ -120,14 +131,30 @@
         return lodash.sortBy(formatted, 'timestamp');
       }
 
+      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;
+        }, []);
+      };
+
+      this.getData = (data) => {
+        return data.reduce((list, item) => {
+          list.push(item.volume);
+          return list;
+        }, []);
+      }
+
       this.showSamples = () => {
         this.loader = true;
         Ceilometer.getSamples(this.name, this.tenant)
         .then(res => {
-          console.log(res.length, lodash.groupBy(res, 'timestamp'));
-          this.sampleChartData = {
-            series: [$stateParams.name],
-            data: this.formatSamplesData(res)
+          res = lodash.sortBy(res, 'timestamp');
+          this.chart = {
+            series: [this.name],
+            labels: this.getLabels(res),
+            data: [this.getData(res)]
           }
         })
         .catch(err => {
@@ -139,19 +166,6 @@
       };
 
       this.showSamples();
-
-      this.sampleChartConfig = {
-        title: false,
-        tooltips: true,
-        labels: false,
-        legend: {
-          display: false,
-          //could be 'left, right'
-          position: 'right'
-        },
-        lineLegend: 'traditional',
-        waitForHeightAndWidth: true
-      }
     }
   }
 });
\ No newline at end of file
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/ceilometer-dashboard.tpl.html b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/ceilometer-dashboard.tpl.html
index 67a5284..3eee429 100644
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/ceilometer-dashboard.tpl.html
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/ceilometer-dashboard.tpl.html
@@ -11,11 +11,15 @@
 </div>
 
 <section ng-hide="vm.loader">
-
+  <div class="row">
+    <div class="col-xs-12">
+      <h2>Projects</h2>
+    </div>
+  </div>
   <div class="well" ng-repeat="(project, resources) in vm.projects">
     <div class="row">
       <div class="col-xs-11">
-        {{project}}
+        <h3>{{project}}</h3>
       </div>
       <div class="col-xs-1">
         <a ng-click="expandProject = !expandProject" class="btn btn-primary">
@@ -23,70 +27,57 @@
         </a>
       </div>
     </div>
-
-    <div class="panel panel-default" ng-show="expandProject">
-<!--       <div class="panel-body">
-        <div class="col-xs-3"><b>
-          Resource
-        </b></div>
-        <div class="col-xs-3"><b>
-          Name
-        </b></div>
-        <div class="col-xs-3"><b>
-          Unit
-        </b></div>
-        <div class="col-xs-3"><b>
-          Actions
-        </b></div>
-      </div>
-      <div class="panel-body">
-        <div class="col-xs-3">
-          <input class="form-control" ng-model="vm.query.resource_id" type="text"/>
+    
+    <div class="row">
+      <div class="panel panel-default" ng-show="expandProject">
+        <div class="panel-heading">
+          <h4>Resources</h4>
         </div>
-        <div class="col-xs-3">
-          <input class="form-control" ng-model="vm.query.name" type="text"/>
-        </div>
-        <div class="col-xs-3">
-          <input class="form-control" ng-model="vm.query.unit" type="text"/>
-        </div>
-      </div> -->
-      <div class="panel-body" ng-repeat="(resource, meters) in resources">
-        <div class="row">
-          <div class="col-xs-11">
-            <b>{{resource}}</b>
+        <div class="panel-body" ng-repeat="(resource, meters) in resources">
+          <div class="row">
+            <div class="col-xs-11">
+              <b>{{resource}}</b>
+            </div>
+            <div class="col-xs-1">
+              <a ng-click="expandResource = !expandResource" class="btn btn-primary">
+                <i class="glyphicon glyphicon-plus"></i>
+              </a>
+            </div>
           </div>
-          <div class="col-xs-1">
-            <a ng-click="expandResource = !expandResource" class="btn btn-primary">
-              <i class="glyphicon glyphicon-plus"></i>
-            </a>
+          <div class="row" ng-show="expandResource">
+            <div class="col-xs-4">
+              <b>Meter:</b>
+            </div>
+            <div class="col-xs-4">
+              <b>Unit:</b>
+            </div>
+            <div class="col-xs-4">
+              <b>Actions:</b>
+            </div>
           </div>
-        </div>
-        <div class="row" ng-repeat="meter in meters" ng-show="expandResource">
-          <div class="col-xs-3">
-            {{meter.resource_id}}
-          </div>
-          <div class="col-xs-3">
-            {{meter.name}}
-          </div>
-          <div class="col-xs-3">
-            {{meter.unit}}
-          </div>
-          <div class="col-xs-3">
-            <a ng-click="showMeter = !showMeter" class="btn btn-primary">
-              <i class="glyphicon glyphicon-search"></i> Details
-            </a>
-            <a ng-click="showChart = !showChart" class="btn btn-primary">
-              <i class="glyphicon glyphicon-search"></i> Samples
-            </a>
-          </div>
-          <div class="col-xs-12" ng-show="showMeter">
-            <pre>{{ meter | json }}</pre>
-          </div>
-          <div class="col-xs-12" ng-show="showChart">
-            <ceilometer-samples name="meter.name" tenant="meter.project_id" ng-if="showChart"></ceilometer-samples>
+          <div class="row" ng-repeat="meter in meters" ng-show="expandResource">
+            <div class="col-xs-4">
+              {{meter.name}}
+            </div>
+            <div class="col-xs-4">
+              {{meter.unit}}
+            </div>
+            <div class="col-xs-4">
+              <!-- <a ng-click="showMeter = !showMeter" class="btn btn-primary">
+                <i class="glyphicon glyphicon-search"></i> Details
+              </a> -->
+              <a ng-click="showChart = !showChart" class="btn btn-primary">
+                <i class="glyphicon glyphicon-search"></i> View chart
+              </a>
+            </div>
+            <!--   -->
+            <div class="col-xs-12" ng-show="showChart">
+              <ceilometer-samples name="meter.name" tenant="meter.project_id" ng-if="showChart"></ceilometer-samples>
+            </div>
           </div>
         </div>
       </div>
     </div>
+
   </div>
 </section>
\ No newline at end of file
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/ceilometer-samples.tpl.html b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/ceilometer-samples.tpl.html
index cb4e8be..d935e27 100644
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/ceilometer-samples.tpl.html
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/ceilometer-samples.tpl.html
@@ -1,14 +1,13 @@
 <div class="row">
-  <div class="col-xs-12">
-    <a ui-sref="ceilometerDashboard" class="btn btn-primary">Back</a>
-    <h1>{{vm.stateParams.name}} Samples</h1>
-  </div>
-
   <div class="col-xs-12" ng-show="vm.loader">
     <div class="loader">Loading</div>
   </div>
 
   <div class="col-xs-12" ng-if="!vm.loader">
-    <div ac-chart="'line'" ac-data="vm.sampleChartData" ac-config="vm.sampleChartConfig" class="chart"></div>
+    <!-- <div ac-chart="'line'" ac-data="vm.sampleChartData" ac-config="vm.sampleChartConfig" class="chart"></div> -->
+    <canvas id="line" class="chart chart-line" chart-data="vm.chart.data"
+      chart-labels="vm.chart.labels" chart-legend="true" chart-series="vm.chart.series">
+    </canvas> 
+    <!-- <pre> {{ vm.chart | json }} </pre> -->
   </div>
 </div>
\ No newline at end of file
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/split.html b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/split.html
new file mode 100644
index 0000000..534d3d5
--- /dev/null
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/split.html
@@ -0,0 +1,21 @@
+<div id="one" class="split split-horizontal">
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, eos debitis repellendus corrupti vel dolores asperiores, ipsam voluptatibus nesciunt ipsum architecto harum magnam similique doloremque rerum illum. Magnam, nesciunt magni.
+  Minus nostrum dolores perspiciatis dolorum eos? Sed, ad fugiat natus amet voluptas officiis, reiciendis tempora error quia repudiandae odit nisi distinctio atque ipsam iste officia ab porro et quo magni.
+  Voluptatem ab rem necessitatibus nam voluptas quo, velit nobis id ea temporibus illum corrupti sequi, aperiam reprehenderit cum! Placeat quas quod minima expedita beatae totam numquam veritatis adipisci doloremque, sit.
+  Suscipit doloremque voluptatum maiores architecto ipsa quis, nihil provident totam, quos qui. Ipsa quibusdam sit, cumque eum provident ratione molestiae quia in ex! Rem voluptates officiis aperiam ullam dignissimos sequi.
+  Ad sed quasi et, dolorem autem perferendis dolor. Cupiditate nemo delectus minus sint mollitia accusantium odio, explicabo nihil illum ut possimus ducimus! Recusandae excepturi, est deleniti accusamus aut quasi. Sit!
+</div>
+<div id="two" class="split split-horizontal">
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit accusamus laboriosam, quo, ipsa quisquam, neque alias animi esse quia, doloremque nulla nihil. Id aliquid necessitatibus atque eum, fugit sed nobis!
+  Blanditiis ab earum placeat tenetur in eos, omnis quidem accusantium voluptate corporis, labore, cum voluptatibus totam sunt mollitia et rerum sit. Voluptatem fugiat eaque dolore explicabo ex veritatis deleniti delectus.
+  Nobis aliquam blanditiis cumque nesciunt repellendus voluptate ullam, eligendi dicta voluptates tenetur molestias omnis itaque eius voluptas dignissimos inventore repellat distinctio velit ducimus ipsam placeat. Quo amet aut, doloremque incidunt.
+  Asperiores sed cupiditate animi aliquam, facilis vitae nobis deserunt ipsa fugiat, at incidunt eum delectus error inventore itaque fuga sunt aspernatur beatae saepe maxime id. Fuga consequatur hic debitis ipsum.
+  Animi dolorum ullam, dolorem ut quibusdam tempora repellendus iste veritatis doloribus nam? Minima veritatis omnis deleniti illo? Vero, perferendis ipsum, ea dicta illum non reiciendis obcaecati sunt dolorem esse hic.
+</div>
+<div id="three" class="split split-horizontal">
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem quod expedita vero voluptatibus modi, dolores assumenda ex atque aliquam accusamus, deserunt quibusdam pariatur eaque optio ducimus minima. Commodi, odit. Nulla.
+  Rerum, nostrum, officiis! Nam vel in ea ut et nemo quae quis suscipit dolores voluptatum odio, qui ratione dolor vero perspiciatis enim incidunt error harum hic ad numquam nostrum magni.
+  Minus illo vel ipsa, ullam unde itaque cum mollitia nihil! Voluptatibus quaerat ab ut quo, repudiandae qui reprehenderit eligendi maiores harum labore sit, laudantium expedita reiciendis hic nostrum beatae id!
+  Laborum magni iusto sunt commodi dolor quis voluptatibus fugiat alias, aliquid fugit nisi facere. Eaque harum laudantium sint, veniam laborum illum beatae cumque quis reprehenderit tempore, animi perferendis officiis quos.
+  Quam iusto id necessitatibus nam asperiores quod inventore itaque ullam laborum quis. Excepturi, suscipit, autem! Pariatur commodi nisi quia, sit perspiciatis necessitatibus, tempore neque nulla nemo eum aspernatur placeat voluptate!
+</div>
\ No newline at end of file