* Update tutorial-visualizing.asciidoc adds alt text to images * Update docs/getting-started/tutorial-visualizing.asciidoc * Update docs/getting-started/tutorial-visualizing.asciidoc * Update docs/getting-started/tutorial-visualizing.asciidoc * Update docs/getting-started/tutorial-visualizing.asciidoc * Update docs/getting-started/tutorial-visualizing.asciidoc * Update docs/getting-started/tutorial-visualizing.asciidoc Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Kaarina Tungseth <kaarina.tungseth@elastic.co>
194 lines
6.1 KiB
Plaintext
194 lines
6.1 KiB
Plaintext
[[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>>.
|