Elasticsearch deki Verileri Echart.js ile Görselleştirme

Posted on | In

Elasticsearch deki Verileri Echart.js ile Görselleştirme

Elasticsearch de tutulan loglar, Echarts.js ile kendi uygulamanızda nasıl görselleştirilir sorusuna yönelik bir yazı olacak. Böylece verilerinizi grafikler halinde sunduğunuzda kullanıcı ya da kendiniz için anlamlı bilgilere ulaşabilirsiniz.

Resim:Makalede anlatılan grafiklerin ekran görüntüsü

Adım 1: package.json

npm üzerinden elasticsearch (bu paket ile elasticsearch’e istemci olunur) ve echarts‘ın paketleri indirilir.

1
2
npm i elasticsearch
npm i echarts

Adım 2: index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
    <table>
        <tr>
            <th>
                <div id="pieChart" style="width:700px; height:400px;"></div>
            </th>
            <th>
                <div id="lineChart" style="width:700px; height:400px;"></div>
            </th>
        </tr>
    </table>
    <script src="underscore.min.js"></script>
    <script src="index.bundle.js"></script>
</body>
</html>

Adım 3: index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
var elasticsearch = require('elasticsearch');
var echarts = require('echarts');

// burada es sunucusuna istemci olunur
var client = new elasticsearch.Client({
  host: 'http://localhost:9200',
  // es sunucusuna gönderilen istek ve cevap konsolda görülür
  // 'trace' yerine 'error' yazıldığında istek ya da cevapta bir hata olduğunda konsolda ilgili hata görüntülenir
  log: 'error'
});

// elasticsearch sunucusuna ping göndererek etkin olup olmadığına bakılabilir
client.ping({
  requestTimeout: 30000,
}, function (error) {
  if (error) {
    console.error('elasticsearch etkin değil');
  } else {
    console.log('herşey yolunda');
  }
});

var phone, store, app, web;

// pie chart için search api ye gönderilecek olan sorgu
client.search({
  index: 'mockdata',
  type: '_doc',
  body: {
    "size": 0,
    "aggs": {
      "queryName": {
        "terms": {
          "field": "sales_channel.keyword",
          "order": {
            "_term": "asc"
          }
        }
      }
    }
  }
}).then(resp => {
  var result = resp.aggregations.queryName.buckets;

  app = result[0].doc_count;
  phone = result[1].doc_count;
  store = result[2].doc_count;
  web = result[3].doc_count;

  console.log(app + " " + phone + " " + store + " " + web);

  var myChart = echarts.init(document.getElementById('pieChart'));
  //grafiğin özellikleri ayarlanır
  var chartOption = {
    title: {
      text: 'Ürünlerin Satıldığı Kanallar',
      subtext: 'Ürünlerin hangi kanal üzerinden satıldığına dair oranları görülmektedir.',
      x: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
      orient: 'vertical',
      right: 'right',
      top: '50%',
      data: ['Application', 'Phone', 'Store', 'Web']
    },
    series: [
      {
        name: 'Kanal Adı:',
        type: 'pie',
        radius: '55%',
        center: ['50%', '60%'],
        data: [
          { value: app, name: 'Application' },
          { value: phone, name: 'Phone' },
          { value: store, name: 'Store' },
          { value: web, name: 'Web' }
        ],
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  myChart.setOption(chartOption);

}, function (error) {
  console.trace(error.message)
});

var dateInfo = [];
var totalSales = [];

// line chart için search api ye gönderilecek olan sorgu
client.search({
  index: 'mockdata',
  type: '_doc',
  body: {
    "size": 0,
    "aggs": {
      "dateRangeSearch": {
        "date_range": {
          "field": "purchased_at",
          "ranges": [
            {
              "from": "now-6d",
              "to": "now"
            }
          ]
        },
        "aggs": {
          "dateHistogramSearch": {
            "date_histogram": {
              "field": "purchased_at",
              "interval": "day",
              "order": {
                "_key": "desc"
              },
              "format": "dd-MM-yyyy"

            }
          }
        }
      }
    }
  }
}).then(resp => {
  var lineResult = resp.aggregations.dateRangeSearch.buckets[0].dateHistogramSearch.buckets;

  // for (var i = 0; i < resp.aggregations.dateRangeSearch.buckets[0].dateHistogramSearch.buckets.length; i++) {
  //   dateInfo = lineResult[i].key;
  //   totalSales = lineResult[i].doc_count;

  //   console.log("dateInfo " + dateInfo[i] + " totalSales " + totalSales[i]);
  // }

  dateInfo = [lineResult[0].key_as_string, lineResult[1].key_as_string, lineResult[2].key_as_string, lineResult[3].key_as_string, lineResult[4].key_as_string, lineResult[5].key_as_string, lineResult[6].key_as_string]
  totalSales = [lineResult[0].doc_count, lineResult[1].doc_count, lineResult[2].doc_count, lineResult[3].doc_count, lineResult[4].doc_count, lineResult[5].doc_count, lineResult[6].doc_count]

  // console.log(lineResult.length);
  // console.log(dateInfo);
  // console.log(totalSales);

  var myLineChart = echarts.init(document.getElementById('lineChart'));

  // grafiğin özellikleri ayarlanır
  var lineChartOption = {
    title: {
      text: 'Son 1 Haftanın Satış Grafiği ',
      subtext: 'Son 7 günde ne kadar ürün satıldığı görülmektedir.',
      x: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    xAxis: {
      type: 'category',
      data: dateInfo
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: totalSales,
      type: 'line'
    }]
  };

  myLineChart.setOption(lineChartOption);
}, function (error) {
  console.trace(error.message)
});
  • Echarts.js ile yapılan örnekler ve örneklerin kodlarını bulmak için link 1 ve link 2 ye bakabilirsiniz.
  • Echarts.js, dokümantasyonuna ulaşmak için linke tıklayabilirsiz.
  • Kodlara buradaki linkten erişebilirsiniz.

Kodu güzelleştirmek için kullanılan diğer paketler;

  • Browserify - Browserify, js dosyasını tarayıcının anlayabileceği bir js dosyasına dönüştürür. Yaptığınız ekranda birden fazla grafik var ve tüm grafikleri bir js dosyası üzerinden html ile eşleştirdiyseniz, browserify paketini kullanarak, tüm js dosyalarını bir bundle altında toplayabilirsiniz.

  • Watchify - Terminal üzerinde sürekli bundle oluşturmak yerine Watchify paketi ile js dosyasızı kaydettiğinizde değişiklikler otomatik uygulanır.

  • babel-minify - Js dosyanızın boyutunu indirmek isterseniz babel-minify paketini kullanabilirsiniz.

package.json dosyası üzerinden kullanımı;

1
2
3
4
5
6
...
"scripts": {
  "script": "npx index.js -o index.bundle.js",
  "watch": "npx watchify index.js -o index.bundle.js",
}
...