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

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

Shape your data using a variety
of {kib} supported visualizations, tables, and more. In this tutorial, you'll create four
visualizations that you'll use to create a dashboard.

To begin, open the menu, go to *Dashboard*, then click *Create new dashboard*.

[float]
[[compare-the-number-of-speaking-parts-in-the-play]]
=== Compare the number of speaking parts in the plays

To visualize the Shakespeare data and compare the number of speaking parts in the plays, create a bar chart using *Lens*.

. Click *Create new*, then click *Lens* on the *New Visualization* window.
+
[role="screenshot"]
image::images/tutorial-visualize-wizard-step-1.png[Image showing different options for your new visualization]

. Make sure the index pattern is *shakes*.

. Display the play data along the x-axis.

.. From the *Available fields* list, drag and drop *play_name* to the *X-axis* field.

.. Click *Top values of play_name*.

.. From the *Order direction* dropdown, select *Ascending*.

.. In the *Label* field, enter `Play Name`. 

. Display the number of speaking parts per play along the y-axis.

.. From the *Available fields* list, drag and drop *speaker* to the *Y-axis* field.

.. Click *Unique count of speaker*.

.. In the *Label* field, enter `Speaking Parts`. 
+
[role="screenshot"]
image::images/tutorial-visualize-bar-1.5.png[Bar chart showing the speaking parts  data]

. *Save* the chart with the name `Bar Example`.
+
To show a tooltip with the number of speaking parts for that play, hover over a bar.
+
Notice how the individual play names show up as whole phrases, instead of
broken up 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`.

[float]
[[view-the-average-account-balance-by-age]]
=== View the average account balance by age

To gain insight into the account balances in the bank account data, create a pie chart. In this tutorial, you'll use the {es}
{ref}/search-aggregations.html[bucket aggregation] to specify the pie slices to display. The bucket aggregation sorts the documents that match your search criteria into different
categories and establishes multiple ranges of account balances so that you can find how many accounts fall into each range.

. Click *Create new*, then click *Pie* on the *New Visualization* window.

. On the *Choose a source* window, select `ba*`.
+
Since the default search matches all documents, the pie contains a single slice. 

. In the *Buckets* pane, click *Add > Split slices.*

.. From the *Aggregation* dropdown, select *Range*.

.. From the *Field* dropdown, select *balance*.

.. Click *Add range* until there are six rows of fields, then define the following ranges:
+
[source,text]
0             999
1000         2999
3000         6999
7000        14999
15000       30999
31000       50000

. Click *Update*.
+
The pie chart displays the proportion of the 1,000 accounts that fall into each of the ranges.
+
[role="screenshot"]
image::images/tutorial-visualize-pie-2.png[Pie chart displaying accounts that fall into each of the ranges, scaled to 1000 accounts]

. Add another bucket aggregation that displays the ages of the account holders.

.. In the *Buckets* pane, click *Add*, then click *Split slices*.

.. From the *Sub aggregation* dropdown, select *Terms*.

.. From the *Field* dropdown, select *age*, then click *Update*.
+
The break down of the ages of the account holders are displayed
in a ring around the balance ranges.
+
[role="screenshot"]
image::images/tutorial-visualize-pie-3.png[Final pie chart showing all of the changes]

. Click *Save*, then enter `Pie Example` in the *Title* field.

[float]
[role="xpack"]
[[visualize-geographic-information]]
=== Visualize geographic information

To visualize geographic information in the log file data, use <<maps,Maps>>.

. Click *Create new*, then click *Maps* on the *New Visualization* window.

. To change the time, use the time filter.

.. Set the *Start date* to `May 18, 2015 @ 12:00:00.000`.

.. Set the *End date* to `May 20, 2015 @ 12:00:00.000`.
+
[role="screenshot"]
image::images/gs_maps_time_filter.png[Image showing the time filter for Maps tutorial]

.. Click *Update*

. Map the geo coordinates from the log files.

.. Click *Add layer > Clusters and grids*.

.. From the *Index pattern* dropdown, select *logstash*.

.. Click *Add layer*.

. Specify the *Layer Style*.

.. From the *Fill color* dropdown, select the yellow to red color ramp.

.. In the *Border width* field, enter `3`.

.. From the *Border color* dropdown, select *#FFF*, then click *Save & close*.
+
[role="screenshot"]
image::images/tutorial-visualize-map-2.png[Example of a map visualization]

. Click *Save*, then enter `Map Example` in the *Title* field.

. Add the map to your dashboard.

.. Open the menu, go to *Dashboard*, then click *Add*. 

.. On the *Add panels* flyout, click *Map Example*.

[float]
[[tutorial-visualize-markdown]]
=== Add context to your visualizations with Markdown

Add context to your new visualizations with Markdown text.

. Click *Create new*, then click *Markdown* on the *New Visualization* window.

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

. Click *Update*.
+
The Markdown renders in the preview pane.
+
[role="screenshot"]
image::images/tutorial-visualize-md-2.png[Image showing example markdown editing field]

. Click *Save*, then enter `Markdown Example` in the *Title* field.

[role="screenshot"]
image::images/tutorial-dashboard.png[Final visualization with bar chart, pie chart, map, and markdown text field]

[float]
=== Next steps

Now that you have the basics, you're ready to start exploring your own system data with {kib}.

* To add your own data to {kib}, refer to <<connect-to-elasticsearch,Add data to {kib}>>.

* To search and filter your data, refer to {kibana-ref}/discover.html[Discover].

* To create a dashboard with your own data, refer to <<dashboard, Dashboard>>.

* To create maps that you can add to your dashboards, refer to <<maps,Maps>>.

* To create presentations of your live data, refer to <<canvas,Canvas>>.