kibana/docs/getting-started/tutorial-visualizing.asciidoc

[[tutorial-visualizing]]
=== Visualizing your data

In the Visualize application, you can shape your data using a variety
of charts, tables, and maps, and more. You'll create four
visualizations: a pie chart, bar chart, coordinate map, and Markdown widget.

. Open *Visualize.*
. Click *Create a visualization* or the *+* button. You'll see all the visualization
types in Kibana.
+
[role="screenshot"]
image::images/tutorial-visualize-wizard-step-1.png[]
. Click *Pie*.

. In *New Search*, select the `ba*` index pattern. You'll use the pie chart to
gain insight into the account balances in the bank account data.
+
[role="screenshot"]
image::images/tutorial-visualize-wizard-step-2.png[]

=== Pie chart

Initially, the pie contains a single "slice."
That's because the default search matched all documents.

[role="screenshot"]
image::images/tutorial-visualize-pie-1.png[]

To specify which slices to display in the pie, you use an Elasticsearch
{ref}/search-aggregations.html[bucket aggregation]. This aggregation
sorts the documents that match your search criteria into different
categories, also known as _buckets_.

Use a bucket aggregation to establish
multiple ranges of account balances and find out how many accounts fall into
each range.

. In the *Buckets* pane, click *Split Slices.*
. In the *Aggregation* dropdown menu, select *Range*.
. In the *Field* dropdown menu, select *balance*.
. Click *Add Range* four times to bring the total number of ranges to six.
. Define the following ranges:
+
[source,text]
0             999
1000         2999
3000         6999
7000        14999
15000       30999
31000       50000

. Click *Apply changes* image:images/apply-changes-button.png[].

Now you can see what proportion of the 1000 accounts fall into each balance
range.

[role="screenshot"]
image::images/tutorial-visualize-pie-2.png[]

Add another bucket aggregation that looks at the ages of the account
holders.

. At the bottom of the *Buckets* pane, click *Add sub-buckets*.
. In *Select buckets type,* click *Split Slices*.
. In the *Sub Aggregation* dropdown, select *Terms*.
. In the *Field* dropdown, select *age*.
. Click  *Apply changes* image:images/apply-changes-button.png[].

Now you can see the break down of the ages of the account holders, displayed
in a ring around the balance ranges.

[role="screenshot"]
image::images/tutorial-visualize-pie-3.png[]

To save this chart so you can use it later:

* Click *Save* in the top menu bar and enter `Pie Example`.

=== Bar chart

You'll use a bar chart to look at the Shakespeare data set and compare
the number of speaking parts in the plays.

* Create a *Vertical Bar* chart and set the search source to `shakes*`.

Initially, the chart is a single bar that shows the total count
of documents that match the default wildcard query.

[role="screenshot"]
image::images/tutorial-visualize-bar-1.png[]

Show the number of speaking parts per play along the Y-axis.
This requires you to configure the Y-axis
{ref}/search-aggregations.html[metric aggregation.]
This aggregation computes metrics based on values from the search results.

. In the *Metrics* pane, expand *Y-Axis*.
. Set *Aggregation* to *Unique Count*.
. Set *Field* to *speaker*.
. In the *Custom Label* box, enter `Speaking Parts`.
. Click  *Apply changes* image:images/apply-changes-button.png[].


[role="screenshot"]
image::images/tutorial-visualize-bar-1.5.png[]


Show the plays along the X-axis.

. In the *Buckets* pane, click *X-Axis*.
. Set *Aggregation* to *Terms* and *Field* to *play_name*.
. To list plays alphabetically, in the *Order* dropdown menu, select *Ascending*.
. Give the axis a custom label, `Play Name`.
. Click  *Apply changes* image:images/apply-changes-button.png[].

[role="screenshot"]
image::images/0[]

Hovering over a bar shows a tooltip with the number of speaking parts for
that play.

Notice how the individual play names show up as whole phrases, instead of
broken into individual words. This is the result of the mapping
you did at the beginning of the tutorial, when you marked the `play_name` field
as `not analyzed`.

*Save* this chart with the name `Bar Example`.

=== Coordinate map

Using a coordinate map, you can visualize geographic information in the log file sample data.

. Create a *Coordinate map* and set the search source to `logstash*`.
. In the top menu bar, click the time picker on the far right.
. Click *Absolute*.
. Set the start time to May 18, 2015 and the end time to May 20, 2015.
. Click *Go*.

You haven't defined any buckets yet, so the visualization is a map of the world.

[role="screenshot"]
image::images/tutorial-visualize-map-1.png[]

Now map the geo coordinates from the log files.

. In the *Buckets* pane, click *Geo Coordinates*.
. Set *Aggregation* to *Geohash* and *Field* to *geo.coordinates*.
. Click *Apply changes* image:images/apply-changes-button.png[].

The map now looks like this:

[role="screenshot"]
image::images/tutorial-visualize-map-2.png[]

You can navigate the map by clicking and dragging.  The controls
on the top left of the map enable you to zoom the map and set filters.
Give them a try.

[role="screenshot"]
image::images/tutorial-visualize-map-3.png[]

*Save* this map with the name `Map Example`.

=== Markdown

The final visualization is a Markdown widget that renders formatted text.

. Create a *Markdown* visualization.
. In the text box, enter the following:
+
[source,markdown]
# This is a tutorial dashboard!
The Markdown widget uses **markdown** syntax.
> Blockquotes in Markdown use the > character.

. Click  *Apply changes* image:images/apply-changes-button.png[].

The Markdown renders in the preview pane:

[role="screenshot"]
image::images/tutorial-visualize-md-2.png[]

*Save* this visualization with the name `Markdown Example`.