added graph examples

.docker/kibana/Dockerfile

@@ -2,4 +2,6 @@ FROM docker.elastic.co/kibana/kibana:5.6.2
 
 ENV ELASTICSEARCH_URL "http://elasticsearch:9200"
 
+RUN bin/kibana-plugin remove x-pack
+
 EXPOSE 5601:5601

routes/graphs.js

@@ -1,8 +1,67 @@
 var express = require('express');
 var router = express.Router();
+var productGraphService = require('../services/productGraphService');
+var waterfall = require('async/waterfall');
+
+var dynamicColors = function() {
+  var r = Math.floor(Math.random() * 255);
+  var g = Math.floor(Math.random() * 255);
+  var b = Math.floor(Math.random() * 255);
+  return "rgb(" + r + "," + g + "," + b + ")";
+};
+
 
 router.get('/', function(req, res, next) {
-  res.render('graphs');
+
+  waterfall(
+    [
+      function(waterfallCallback) {
+        productGraphService.getProductCountByDate({}, function(err, result) {
+          if(err) { waterfallCallback(true, {}); }
+          var colors = [];
+          for (var i in result['vals']) {
+            colors.push(dynamicColors());
+          }
+          waterfallCallback(false, {"chart1": {'labels':'"' + result['keys'].join('","') + '"', 'datasets': [ {'data': result['vals'].join(','), 'label': 'Num of Product', 'colors': '"'+colors.join('","')+'"'} ]}});
+          return;
+        });
+      },
+      function(data, waterfallCallback) {
+        productGraphService.getProductQuantities({}, function(err, result) {
+          if(err) { waterfallCallback(true, {}); }
+          var colors = [];
+          for (var i in result['vals']) {
+            colors.push(dynamicColors());
+          }
+          data['chart2'] = {'labels':'"' + result['keys'].join('","') + '"', 'datasets': [ {'data': result['vals'].join(','), 'label': 'Total Product Quantity', 'colors': '"'+colors.join('","')+'"'}, {'data': result['counts'].join(','), 'label': 'Num of Product'} ]};
+          waterfallCallback(false, data);
+          return;
+        });  
+      },
+      function(data, waterfallCallback) {
+        productGraphService.getCategoriyQuantitySum({}, function(err, result) {
+          if(err) { waterfallCallback(true, {}); }
+          var colors1 = [];
+          var colors2 = [];
+          for (var i in result['vals']) {
+            colors1.push(dynamicColors());
+          }
+
+          for (var i in result['counts']) {
+            colors2.push(dynamicColors());
+          }
+          data['chart3'] = {'labels':'"' + result['keys'].join('","') + '"', 'datasets': [ {'data': result['vals'].join(','), 'label': 'Total Quantity of Category', 'colors': '"'+colors1.join('","')+'"'  }, {'data': result['counts'].join(','), 'label': 'Num of Product by Category', 'colors': '"'+colors2.join('","')+'"'} ]};
+          waterfallCallback(false, data);
+          return;
+        });  
+      }
+    ],
+    function(err, data) {
+      if(err) { res.send(500,"Server Error"); return; }
+      console.log(data);
+      res.render('graphs', data);
+    }
+  );
   return;
 });
 

services/productGraphService.js

@@ -0,0 +1,128 @@
+var db = require('./../libraries/elasticsearch');
+
+exports.getProductCountByDate = function(params, callback) {
+  body = {
+    "size": 0, 
+    "aggs": {
+      "product_counts": {
+        "date_histogram": {
+          "field": "created_at",
+          "interval": "week"
+        }
+      }
+    }
+  };
+
+  db.search({
+    index: 'products',
+    type: 'product',
+    body: body
+  }).then(function (resp) {
+    var aggs = resp.aggregations.product_counts.buckets;
+    var result = {
+      "keys": [],
+      "vals": []
+    };
+    for (i in aggs) {
+      result['keys'].push(aggs[i].key_as_string);
+      result['vals'].push(aggs[i].doc_count);
+    }
+    callback(false, result);
+    return;
+  }, function (err) {
+    callback(true);
+    console.trace(err.message);
+    return;
+  });
+};
+
+exports.getCategoriyQuantitySum = function(params, callback) {
+  body = {
+    "size": 0, 
+    "aggs": {
+      "product_categories": {
+        "terms": {
+          "field": "categories.id",
+          "size": 10
+        },
+        "aggs": {
+          "sum": {
+            "sum": {
+              "field": "quantity"
+            }
+          }
+        }
+      }
+    }
+  };
+
+  db.search({
+    index: 'products',
+    type: 'product',
+    body: body
+  }).then(function (resp) {
+    var aggs = resp.aggregations.product_categories.buckets;
+    var result = {
+      "keys": [],
+      "vals": [],
+      "counts": []
+    };
+    for (i in aggs) {
+      result['keys'].push(aggs[i].key);
+      result['counts'].push(aggs[i].doc_count);
+      result['vals'].push(aggs[i].sum.value);
+    }
+    callback(false, result);
+    return;
+  }, function (err) {
+    callback(true);
+    console.trace(err.message);
+    return;
+  });
+};
+
+
+exports.getProductQuantities = function(params, callback) {
+  body = {
+    "size": 0, 
+    "aggs": {
+      "product_counts": {
+        "date_histogram": {
+          "field": "created_at",
+          "interval": "week"
+        },
+        "aggs": {
+          "product_quantities": {
+            "sum": {
+              "field": "quantity"
+            }
+          }
+        }
+      }
+    }
+  };
+
+  db.search({
+    index: 'products',
+    type: 'product',
+    body: body
+  }).then(function (resp) {
+    var aggs = resp.aggregations.product_counts.buckets;
+    var result = {
+      "keys": [],
+      "vals": [],
+      "counts": []
+    };
+    for (i in aggs) {
+      result['keys'].push(aggs[i].key_as_string);
+      result['counts'].push(aggs[i].doc_count);
+      result['vals'].push(aggs[i].product_quantities.value);
+    }
+    callback(false, result);
+    return;
+  }, function (err) {
+    callback(true);
+    console.trace(err.message);
+    return;
+  });
+};

views/graphs.twig

@@ -1,8 +1,109 @@
 {% extends 'layout.twig' %}
 
 {% block body %}
-  <div class="row">
-    <h1>From Kibana</h1>
-    <iframe src="http://127.0.0.1:5601/app/kibana#/visualize/edit/c46522a0-a9d5-11e7-aba8-ad0a02c02284?embed=true&_g=(refreshInterval:(display:Off,pause:!f,value:0),time:(from:'2015-11-29T04:09:45.541Z',mode:absolute,to:'2017-10-31T21:00:00.000Z'))&_a=(filters:!(),linked:!f,query:(query_string:(analyze_wildcard:!t,query:'*')),uiState:(),vis:(aggs:!((enabled:!t,id:'1',params:(field:quantity),schema:metric,type:sum),(enabled:!t,id:'2',params:(field:categories.name.keyword,order:desc,orderBy:'1',size:5),schema:segment,type:terms)),listeners:(),params:(addLegend:!t,addTooltip:!t,isDonut:!f,legendPosition:right),title:'New+Visualization',type:pie))" class="col-6 border-0"></iframe>
+<div class="row">
+  <div class="col-6">
+    <canvas id="firstChart" height="200"></canvas>
   </div>
+  <div class="col-6">
+    <canvas id="thirdChart" height="200"></canvas>
+  </div>
+  <div class="col-6">
+    <canvas id="secondChart" height="200"></canvas>
+  </div>
+  <div class="col-6">
+    <canvas id="fourthChart" height="200"></canvas>
+  </div>
+</div>
+
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.min.js"></script>
+<script type="text/javascript">
+
+var data1 = {
+    labels: [{{chart1['labels']}}],
+    datasets: [
+    {% for dataset in chart1['datasets'] %}
+      {
+        label: '{{dataset['label']}}',
+        data: [{{dataset['data']}}],
+        backgroundColor: [{{dataset['colors']}}],
+        borderWidth: 1
+      }
+    {% endfor %}
+    ]
+};
+
+var ctx = document.getElementById("firstChart");
+var firstChart = new Chart(ctx, {
+    type: 'bar',
+    data: data1,
+    options: {
+      responsive: true,
+      scales: {
+        yAxes: [
+          {
+            ticks: {
+              beginAtZero:true
+            }
+          }
+        ]
+      }
+    }
+});
+
+var data2 = {
+    labels: [{{chart2['labels']}}],
+    datasets: [
+    {% for dataset in chart2['datasets'] %}
+      {
+        label: '{{dataset['label']}}',
+        data: [{{dataset['data']}}],
+        borderWidth: 1
+      },
+    {% endfor %}
+    ]
+};
+
+var ctx = document.getElementById("secondChart");
+var secondChart = new Chart(ctx, {
+    type: 'line',
+    data: data2,
+    options: {
+      responsive: true,
+      scales: {
+        yAxes: [
+          {
+            ticks: {
+              beginAtZero:true
+            }
+          }
+        ]
+      } 
+    }
+});
+
+var data3 = {
+    labels: [{{chart3['labels']}}],
+    datasets: [
+    {% for dataset in chart3['datasets'] %}
+      {
+        label: '{{dataset['label']}}',
+        data: [{{dataset['data']}}],
+        backgroundColor: [{{dataset['colors']}}],
+        borderWidth: 1
+      },
+    {% endfor %}
+    ]
+};
+
+var ctx = document.getElementById("thirdChart");
+var thirdChart = new Chart(ctx, {
+    type: 'pie',
+    data: data3,
+    options: {
+      responsive: true
+    }
+});
+
+</script>
 {% endblock %}