* WIP - add shakespeare data for getting started guide * Refactor of getLineChartData, getBarChartData, getAreaChartData * Added changing extents and test * Fix opening axis options * Change precision from 8 to 7 * lower precision to 6 * Fix index pattern creation * update from review, remove comments, add others
193 lines
7.6 KiB
Plaintext
193 lines
7.6 KiB
Plaintext
[[tutorial-visualizing]]
|
|
== Visualizing Your Data
|
|
|
|
To start visualizing your data, click *Visualize* in the side navigation.
|
|
|
|
The *Visualize* tools enable you to view your data in several ways. For example,
|
|
let's use that venerable visualization, the pie chart, to get some insight
|
|
into the account balances in the sample bank account data. To get started, click the big blue
|
|
**Create a visualization** button in the center of the screen.
|
|
|
|
image::images/tutorial-visualize-landing.png[]
|
|
|
|
There are a number of visualization types to choose from. Let's click the one
|
|
called *Pie*.
|
|
|
|
image::images/tutorial-visualize-wizard-step-1.png[]
|
|
|
|
You can build visualizations from saved searches, or enter new search criteria. To enter
|
|
new search criteria, you first need to select an index pattern to specify
|
|
what indices to search. We want to search the account data, so select the `ba*`
|
|
index pattern.
|
|
|
|
image::images/tutorial-visualize-wizard-step-2.png[]
|
|
|
|
The default search matches all documents. Initially, a single "slice"
|
|
encompasses the entire pie:
|
|
|
|
image::images/tutorial-visualize-pie-1.png[]
|
|
|
|
To specify what slices to display in the chart, you use an Elasticsearch
|
|
{ref}/search-aggregations.html[bucket aggregation]. A bucket aggregation
|
|
simply sorts the documents that match your search criteria into different
|
|
categories, aka _buckets_. For example, the account data includes the balance
|
|
of each account. Using a bucket aggregation, you can establish multiple ranges
|
|
of account balances and find out how many accounts fall into each range.
|
|
|
|
To define a bucket for each range:
|
|
|
|
. Click the *Split Slices* buckets type.
|
|
. Select *Range* from the *Aggregation* list.
|
|
. Select the *balance* field from the *Field* list.
|
|
. 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[] to update the chart.
|
|
|
|
Now you can see what proportion of the 1000 accounts fall into each balance
|
|
range.
|
|
|
|
image::images/tutorial-visualize-pie-2.png[]
|
|
|
|
Let's take a look at another dimension of the data: the account holder's
|
|
age. By adding another bucket aggregation, you can see the ages of the account
|
|
holders in each balance range:
|
|
|
|
. Click *Add sub-buckets* below the buckets list.
|
|
. Click *Split Slices* in the buckets type list.
|
|
. Select *Terms* from the aggregation list.
|
|
. Select *age* from the field list.
|
|
. Click *Apply changes* image:images/apply-changes-button.png[].
|
|
|
|
Now you can see the break down of the account holders' ages displayed
|
|
in a ring around the balance ranges.
|
|
|
|
image::images/tutorial-visualize-pie-3.png[]
|
|
|
|
To save this chart so we can use it later, click *Save* and enter the name _Pie Example_.
|
|
|
|
Next, we're going to look at data in the Shakespeare data set. Let's find out how the
|
|
plays compare when it comes to the number of speaking parts and display the information
|
|
in a bar chart:
|
|
|
|
. Click *New* and select *Vertical bar chart*.
|
|
. Select the `shakes*` index pattern. Since you haven't defined any buckets yet,
|
|
you'll see a single big bar that shows the total count of documents that match
|
|
the default wildcard query.
|
|
+
|
|
image::images/tutorial-visualize-bar-1.png[]
|
|
|
|
. To show the number of speaking parts per play along the y-axis, you need to
|
|
configure the Y-axis {ref}/search-aggregations.html[metric aggregation]. A metric
|
|
aggregation computes metrics based on values extracted from the search results.
|
|
To get the number of speaking parts per play, select the *Unique Count*
|
|
aggregation and choose *speaker* from the field list. You can also give the
|
|
axis a custom label, _Speaking Parts_.
|
|
|
|
. To show the different plays long the x-axis, select the X-Axis buckets type,
|
|
select *Terms* from the aggregation list, and choose *play_name* from the field
|
|
list. To list them alphabetically, select *Ascending* order. You can also give
|
|
the axis a custom label, _Play Name_.
|
|
|
|
. Click *Apply changes* image:images/apply-changes-button.png[] to view the
|
|
results.
|
|
|
|
image::images/tutorial-visualize-bar-2.png[]
|
|
|
|
Notice how the individual play names show up as whole phrases, instead of being broken down into individual words. This
|
|
is the result of the mapping we did at the beginning of the tutorial, when we marked the *play_name* field as 'not
|
|
analyzed'.
|
|
|
|
Hovering over each bar shows you the number of speaking parts for each play as a tooltip. To turn tooltips
|
|
off and configure other options for your visualizations, select the Visualization builder's *Options* tab.
|
|
|
|
Now that you have a list of the smallest casts for Shakespeare plays, you might also be curious to see which of these
|
|
plays makes the greatest demands on an individual actor by showing the maximum number of speeches for a given part.
|
|
|
|
. Click *Add metrics* to add a Y-axis aggregation.
|
|
. Choose the *Max* aggregation and select the *speech_number* field.
|
|
. Click *Options* and change the *Bar Mode* from *stacked* to *normal*.
|
|
. Click *Apply changes* image:images/apply-changes-button.png[]. Your chart should now look like this:
|
|
|
|
image::images/tutorial-visualize-bar-3.png[]
|
|
|
|
As you can see, _Love's Labours Lost_ has an unusually high maximum speech number, compared to the other plays, and
|
|
might therefore make more demands on an actor's memory.
|
|
|
|
Note how the *Number of speaking parts* Y-axis starts at zero, but the bars don't begin to differentiate until 18. To
|
|
make the differences stand out, starting the Y-axis at a value closer to the minimum, go to Options and select
|
|
*Scale Y-Axis to data bounds*.
|
|
|
|
Save this chart with the name _Bar Example_.
|
|
|
|
Next, we're going to use a coordinate map chart to visualize geographic information in our log file sample data.
|
|
|
|
. Click *New*.
|
|
. Select *Coordinate map*.
|
|
. Select the `logstash-*` index pattern.
|
|
. Set the time window for the events we're exploring:
|
|
. Click the time picker in the Kibana toolbar.
|
|
. Click *Absolute*.
|
|
. Set the start time to May 18, 2015 and the end time to May 20, 2015.
|
|
+
|
|
image::images/tutorial-timepicker.png[]
|
|
|
|
. Once you've got the time range set up, click the *Go* button and close the time picker by
|
|
clicking the small up arrow in the bottom right corner.
|
|
|
|
You'll see a map of the world, since we haven't defined any buckets yet:
|
|
|
|
image::images/tutorial-visualize-map-1.png[]
|
|
|
|
To map the geo coordinates from the log files select *Geo Coordinates* as
|
|
the bucket and click *Apply changes* image:images/apply-changes-button.png[].
|
|
Your chart should now look like this:
|
|
|
|
image::images/tutorial-visualize-map-2.png[]
|
|
|
|
You can navigate the map by clicking and dragging, zoom with the
|
|
image:images/viz-zoom.png[] buttons, or hit the *Fit Data Bounds*
|
|
image:images/viz-fit-bounds.png[] button to zoom to the lowest level that
|
|
includes all the points. You can also include or exclude a rectangular area
|
|
by clicking the *Latitude/Longitude Filter* image:images/viz-lat-long-filter.png[]
|
|
button and drawing a bounding box on the map. Applied filters are displayed
|
|
below the query bar. Hovering over a filter displays controls to toggle,
|
|
pin, invert, or delete the filter.
|
|
|
|
image::images/tutorial-visualize-map-3.png[]
|
|
|
|
Save this map with the name _Map Example_.
|
|
|
|
Finally, create a Markdown widget to display extra information:
|
|
|
|
. Click *New*.
|
|
. Select *Markdown widget*.
|
|
. Enter the following text in the field:
|
|
+
|
|
[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[] render the Markdown in the
|
|
preview pane.
|
|
+
|
|
image::images/tutorial-visualize-md-1.png[]
|
|
|
|
|
|
|
|
|
|
|
|
image::images/tutorial-visualize-md-2.png[]
|
|
|
|
Save this visualization with the name _Markdown Example_.
|