Tags

Using Kibana for Worklight Analytics [Pie Chart]

Currently, Operational Analytics provides an area in which customer can visually see into mobile operations to better pinpoint the source of operational issues and plan where to best to make adjustments. This blog post will show how to further customize their own graphs and reports. There are alternatives ways to customize some aspects of customer data, one in particular is called Kibana.

Note: The processes of adding Kibana is consider a hack as there is no official support for this.

Kibana is an interface that allows users to create visual logs and time stamped data that utilizes elastic search. You can learn more about elasticsearch by going the main site. The goal of this blog is to explain the basics of Kibana by installing and and creating various graphs. In this entry I will explain how to install Kibana and create a simple pie chart.

To install Kibana you will need to first download the software from the main elastic search site here. Once you have it installed you will need to include configure kibana to point to the elastic search engine. To do this open up your Worklight project in your file system.

[Figure 1 : Worklight project directory]

Like in Figure 1 you will go through the following path : WorklightServerConfig → servers → worklight → apps

You will eventually see a series of war files such as _analytics.war. We will be adding Kibana to the _analytics war file so that when we to go into Kibana it will be simple as going to /_analytics/kibana.

Create a copy of your _analytics.war file and change the extension to .zip, then unzip it like in Figure 2.

Open the the folder that you have extracted and copy your kibana folder into it like in Figure 3.

[Figure 3 : Copy Kibana into your copy of _analytics.war]

Go into your kibana folder and you will see a file called config.js. Config.js is the file where you will be pointing kibana to elasticsearch so that kibana can get your data.

You will see a line containing something like

elasticsearch: "http://"+window.location.hostname+":9200"

change it to

elasticsearch: "http://localhost:9500”

Save config.js.

[Figure 4 : Kibana directory]

Now you will need to create a new _analytics war file containing kibana. To do this simple create a zip named _analytics containing the following folders: console, META_INF, WEB-INF, and kibana then change the extension to .war. Copy and replace the _analytics.war file you have created with the old one then restart your Worklight Server from Eclipse.

Note: Do not simply compress/zip the analytics folder you must compress/zip the folders mentioned above.

Open up your browser and go to the following url: http://localhost:10080/_analytics/kibana/index.html. You should see a page like Figure 5.

[Figure 5 : Kibana Start Page]

Congratulations! You have successfully installed Kibana into Worklight. Now I will show you how to create a simple pie chart. Note that the data that will not be the same as yours but the process of creating the chart is the same.

If you look at the bottom right you will see three options: Sample Dashboard, Unconfigured Dashboard, and Blank Dashboard. We are going to start from scratch so click on BlankDashboard. You should see a screen like the following:

[Figure 6 : Kibana Blank Dashboard]

Worklight indexes various different data from application activities to server logs. In the future blog posts I will explain in depth what are the indexes and how to use them in creating your charts and graphs for Worklight 6.2.

We will be using the environment property to analyze the different operating system that are used throughout all your apps in your project. First you will need to create a row and a panel. A row is a single row that will hold several graphs and charts that you will create. A panel is a graph or report that will sit in your created row. To create a row click the Add Row button on the bottom right.

[Figure 7: Add Row Button]

The screen you will see is pretty self-explanatory. Title is where you will set the title of your row and height is the height of your report/graph in pixels. For the purpose of this tutorial, call your row “Usages”. Once you have created your row you will see a panel on the far left side of your screen. The panel will expand and you will see three options: “collapse row”, “configure row”, and “add panel”. Click on the “add panel” button and you will see a page like the following:

[Figure 8 : Add Panel]

The dropdown will present you a list of different types of panels. If you click on either of them the menu will give you a brief description of what each one does. For this example we want to create a pie chart showcasing the different operating system our Worklight apps are using. Select “terms” from the dropdown. The menu will expand presenting you with more options.

Stable

Title - the title of the panel/graph/report

Span - how long should the graph expand on the row. If you plan on using displaying more than one graph in a row make sure you span each graph accordingly.

Editable - the option to edit your panel after it has been created

Inspect - inspect the query that was used to help generate this graph

Parameters

Terms mode - You have the option to choose terms or terms_stats. Terms_stats computes stats computed on a field that is driven by another field. For example, revenue per customer.

Field - The property or field to generate the graph against. In this case the highlighted red properties.

Length - Display x amount of unique values/terms for the field.

Order - Order by either ascending/descending count or term.

Excluding Terms - What terms do you wish to exclude each separated by a comma.

View Options

Style - The style/type of graph. For terms it would be either pie, bar, or table.

Legend - The location of the legend relative to the graph.

Legend Format - The format of the legend.

Etc...

For this example set the fields as follows like in Figure 9. Click Save.

Panel Type - terms

Title - Environment Usages

Terms Mode - terms

Field - worklight_data.environment

Length - 10

Order - count

Style - Pie

Legend - above

Legend Format - horizontal

Queries - all

Note: worklight_data must be appended to most fields. The reason why is because worklight_data is the main prefix for most if not all of your elastic search data.

[Figure 9 : Creating a pie chart]

You will see a screen similar to Figure 10.

[Figure 10 : Pie chart of environment usages]

Note: For clarification environment usages is the same as device operating system usages. The version of the operating system is not relevant.

You will see that out for 19668 hits on the server nearly half were from android devices and the other half were from an iphone. There are ways to customize this even further by limiting the number hits in the last 30 day by adding a time filter.

Before you can add a time filter to your graphs you have to properly set the timestamp field. You will see a gear icon the top right corner of your screen. Click on it and got to the Timepicker tab. You will see a field called Time Field change the current field to timestamp, then exit.

You will see a dropdown on the top right hand side of your screen labeled Time Filter. If you click on it you will see several options such as Last 5m and Last 30d. If you click on Last 30d Kibana will filter out data that is between now and the last 30 days. You will see a screen similar to Figure 11.