Page Comparison

Kibana Canvas presentation is a bit like a PowerPoint presentation. We can generate bar charts, plots, and graphs or fully customised visualisations to showcase data that address specific needs. But Canvas goes way beyond PowerPoint. Kibana Canvas extracts whatever live data from our Elasticsearch cluster we need, processes it to prepare it for our visualizations, and then generates the graphical representations that we define.

Image Added

Elements that Kibana Canvas has to offer:

• Charts which include area, bubble, coordinate, donut, bar and other types of charts

• Shapes and text boxes that are formatted with Markdown, which is a plain-text-formatting syntax

• Images that can either repeat a number of times based on dynamic data or the image can be revealed, based on the data they represent.

• Other supporting elements such as dropdown filters or time filters, which give us a way to limit what data is considered for graphical representation. For example, we can select to only include data inserted in the last month. This means we can create workpads that change their content on the fly based on user input – making it more of an app-like experience.

Canvas Data Sources

Each element needs a way to extract the data that will be represented. The data sources an element can use include:

• Elasticsearch SQL queries. The SQL syntax gives us a lot of flexibility in terms of what data we want to pull from Elasticsearch and how we want to present it to Canvas.

• Timelion expressions to work with time-based data.

• Raw documents pulled directly from indexed documents.

Image Added

Sample Data

To get started with the exercise, we need to get some sample data to work with. We’ll accomplish this with the NGINX web server log provided by Elastic.

Adding a New Element

In the top-right corner, above our workpad, notice the Add element button. Let’s click on it and reveal a list of available elements with clear visual representations and descriptions. 

Let’s add a new element and pick the Shape type from that list. We’ll use this to create a green background for the right side of our infographic.

Let’s open the Display section in the right pane and find the Fill box. We’ll use the following color code for the green:

Copy

#0b974d

Metrics

Now it’s time to add our metrics on the right side. To do this, we add a new element and select the Metric type from that list. After we drag it to its place, we also change the Metric and Label text color to white.

Finally, we get to the most important part, bringing in the data from our Nginx index. 

After we select the element we want to work with (in this case, the metric we just added), look in the right pane of Canvas for Selected element. Switch from the Display tab to the Data tab, (as we see in this image), and change the data source to Elasticsearch SQL. To change the data source, we click on the underlined, bold text, which might display “Demo data” initially, on some installations.

We’ll use the following SQL query, which will return the total number of documents in our index:

Copy

SELECT COUNT(*) AS count_documents FROM nginx

After hitting Save we’ll see a warning sign on the screen. The metric doesn’t yet have a source value to use to display data. To fix this, we need to switch back to the Display tab and select count_documents as our Value, (as seen in this image). “count_documents” is generated by our previous SQL query.

We should also enter the text “Logs”, to use as our Label.

The general procedure for the rest of the metrics is the same.

On the right side, in the Selected element pane, we can see the three vertical dots menu option, in the top-right corner. By clicking on it, we can then Clone the element to quickly add similar ones. We can also do this by simply copying with CTRL+C and then pasting with CTRL+V. There’s also an option for saving elements, which we find in the My elements tab when adding a new element.

To add the rest of the metrics, clone the previous one three times and then add the following SQL queries under each one’s Data source.

For the first metric we’ll do the following:

Copy

SELECT SUM(bytes) as bytes FROM nginx

And for the second metric:

Copy

SELECT COUNT(DISTINCT remote_ip) as remote_ip FROM nginx

Finally, for the third metric:

Copy

SELECT COUNT(DISTINCT agent) as agents FROM nginx

Don’t forget to follow the same procedure as we did with our first metric:

• Point the Value field to use the column resulting from the SQL query.

• And change the label of the metric.

Image and Image Repeat

We have two image elements in our infographic.

The first one will be used as the logo. To add the logo, we add an Image element and then change the link to point to the Nginx logo.

Next, we’ll add an Image repeat element. As the name suggests, this repeats the defined image, for a number of times, based on underlying data. Similarly, Image reveal shows a portion (or percentage) of the image, based on underlying data.

We’ll use a simple globe icon from wikipedia to represent the 136 unique agents in the right green section of our workpad. After adding the element, you need to explicitly add the Image Size property. We then use the same SQL query in the data section as we used for our “Unique agents” metric. 

We’ll also need to adjust the size of the repeated image so that they all fit in:

Copy

SELECT COUNT(DISTINCT agent) as agents FROM nginx

Now the globe image should appear 136 times. Pretty cool! But there’s a lot more. 

Text

Now, let’s add the Text elements.

After inserting the first one, we navigate to the Display section to edit the text, where we copy and paste the following Markdown-formatted content:

Copy

## REQUESTS STATISTICS - **NUMBER OF REQUESTS**

For the next text element, we add this content:

Copy

## TOP 5 IP ADDRESSES - **TRANSFERRED BYTES**

Tables

Now it’s time to add the two Data table elements. The first one will display our request statistics. 

The following SQL will select the data we need, grouping results based on the request field and ordering them in descending order, according to the count of requests:

Copy

SELECT request, COUNT(*) AS count_requests FROM nginx GROUP BY request ORDER BY count_requests DESC

For nicer formatting, we can go to the Display section and hide the Pagination and column Header.

The second table will be very similar, but we’ll learn how to use functions as well.

First, let’s insert the following SQL content for our data source:

Copy

SELECT remote_ip, SUM(bytes) AS total_transferred FROM nginx GROUP BY remote_ip ORDER BY total_transferred DESC NULLS LAST LIMIT 5

Now let’s open up the Expression editor, from the bottom-right corner, and use the mapColumn function. Paired with getCell and formatnumber functions, it allows us to change the number format of each value in the total_transferred column and display them in so-called “human-readable” formats, such as GB, MB, KB for gigabytes, megabytes and kilobytes.

So this is the expression we’ll add to do that:

Copy

| mapColumn "total_transferred" fn={ getCell column="total_transferred" | formatnumber  "0.00b"}

It should be placed right after the ESSQL source definitions, after the SQL query line.

The function uses the NumeralJS library, which defines the formatting notations that can be applied.

Charts

The final elements that we’ll add are the charts.

Bar Charts

First, let’s add the Horizontal bar chart to visualize the request statistics from our table. We’ll use this SQL query in the Data section:

Copy

SELECT request, COUNT(*) AS count_requests FROM nginx GROUP BY request ORDER BY count_requests DESC

Now, we need to link it with the data returned by the query:

• For the X-axis, we pick Value and count_requests

• For the Y-axis, we also pick Value and then request.

We can also disable the axis labels, to give it a cleaner look. To do that, we click on the sliding buttons next to X-axis and Y-axis.

Under the Default style, we’ll pick a green fill color to make it fit with the rest of the design.

Progress Charts

Let’s try taking this even further using Canvas expressions. We’ll apply it to a new element that we’ll add, a Progress Gauge chart. 

This progress chart will show the percentage of traffic transferred to the top 5 IP addresses. 

After inserting this chart element, we apply this SQL query to its Data section:

Copy

SELECT SUM(bytes) AS total_transferred_top5 FROM nginx GROUP BY remote_ip ORDER BY total_transferred_top5 DESC NULLS LAST LIMIT 5

This query alone, however, isn’t enough. That’s because the Progress Gauge chart expects a single value, between 0 and 1, where something like 0.56 would represent 56%. Once again, we’ll achieve what we need with the very useful Expression editor. 

The expression will divide the total transferred to the top 5 IPs (which we get from the first SQL query) to the grand total, transferred to all IPs, which we get from the second essql query.

The whole expression will look like this:

And this is the important part that calculates the number between 0 and 1 (the percentage), for the progress gauge element.

Copy

| math
 {string "sum(total_transferred_top5)/" {filters | essql query="SELECT SUM(bytes) AS total_transferred FROM nginx GROUP BY remote_ip ORDER BY total_transferred DESC NULLS LAST" | math "sum(total_transferred)"}}

After adding this to the expression editor, we click Run.