Added images and reorganized content

docs/timelion/getting-started/timelion-conditional.asciidoc

@@ -1,9 +1,28 @@
 [[timelion-conditional]]
 === Using conditional logic and tracking trends
 
-In this section you will learn how to modify time series data with conditional logic and create a trend with a moving average. This is helpful to easily detect outliers and patterns over time.
+Modify time series data with conditional logic and create a trend with a moving average, which is helpful to easily detect outliers and patterns over time.
 
-For the purposes of this tutorial, you will continue to use https://www.elastic.co/downloads/beats/metricbeat[Metricbeat data] to add another visualization that monitors memory consumption. To start, use the following expression to chart the maximum value of  `system.memory.actual.used.bytes`.
+[[timelion-math-before-you-begin]]
+==== Before you begin
+
+In this tutorial, you'll continue to use the time series data from https://www.elastic.co/guide/en/beats/metricbeat/current/index.html[Metricbeat].
+
+[[math-add-timelion-visualization]]
+==== Add a Timelion visualization to the sheet
+
+. Click *Visualize*.
+
+. On the *Visualizations* page, click *Create new visualization*.
+
+. On the *New Visualization* window, click *Timelion*.
++
+You’ll notice that the query bar has been replaced with the default `.es(*)` expression. 
+
+image::images/timelion-math01.png[]
+{nbsp}
+
+. To chart the maximum value of `system.memory.actual.used.bytes`, enter the following in the *Timelion Expression* field:
 
 [source,text]
 ----------------------------------
@@ -13,11 +32,13 @@ For the purposes of this tutorial, you will continue to use https://www.elastic.
 image::images/timelion-conditional01.png[]
 {nbsp}
 
-Let’s create two thresholds to keep an eye on the amount of used memory. For the purposes of this tutorial, your warning threshold will be 12.5GB and your severe threshold will be 15GB. When the maximum amount of used memory exceeds either of these thresholds, the series will be colored accordingly.
+. Create two thresholds to keep an eye on the amount of used memory. 
++
+For the purposes of this tutorial, your warning threshold will be 12.5GB and your severe threshold will be 15GB. When the maximum amount of used memory exceeds either of these thresholds, the series will be colored accordingly.
 
 NOTE: If the threshold values are too high or low for your machine, please adjust accordingly.
 
-To configure these two threshold values, you can utilize Timelion's conditional logic. In this tutorial you will use `if()` to compare each point to a number, adjust the styling if the condition evaluates to `true` and use the default styling if the condition evaluates to `false`. Timelion offers the following six operator values for comparison.
+To configure these two threshold values, you can utilize Timelion's conditional logic. In this tutorial you will use `if()` to compare each point to a number, adjust the styling if the condition evaluates to `true` and use the default styling if the condition evaluates to `false`. Timelion offers the following operator values for comparison.
 
 [horizontal]
 `eq`:: equal

docs/timelion/getting-started/timelion-create.asciidoc

@@ -1,11 +1,21 @@
 [[timelion-create]]
-=== Creating time series visualizations
+=== Create time series visualizations
 
-This tutorial will be using the time series data from https://www.elastic.co/guide/en/beats/metricbeat/current/index.html[Metricbeat] to walk you through a number of functions that Timelion offers. To get started, download Metricbeat and follow the https://www.elastic.co/downloads/beats/metricbeat[instructions here] to start ingesting the data locally.
+To compare independent data sources within a single visualization, create a time series visualization.
 
-The first visualization you'll create will compare the real-time percentage of CPU time spent in user space to the results offset by one hour. In order to create this visualization, we’ll need to create two Timelion expressions. One with the real-time average of `system.cpu.user.pct` and another with the average offset by one hour.
+[[timelion-create-before-you-begin]]
+==== Before you begin
 
-To start, you will need to define an `index`, `timefield` and `metric` in the first expression. Go ahead and enter the below expression into the Timelion query bar.
+In this tutorial, you'll use the time series data from https://www.elastic.co/guide/en/beats/metricbeat/current/index.html[Metricbeat].
+
+To ingest the data locally, link:https://www.elastic.co/downloads/beats/metricbeat[download Metricbeat].
+
+[[timelion-create-comparison-visualization]]
+==== Create the visualization
+
+Compare the real-time percentage of CPU time spent in user space to the results offset by one hour.
+
+. To define an `index`, `timefield`, and `metric`, enter the following in the *Timelion Expression* field:
 
 [source,text]
 ----------------------------------
@@ -15,7 +25,7 @@ To start, you will need to define an `index`, `timefield` and `metric` in the fi
 image::images/timelion-create01.png[]
 {nbsp}
 
-Now you need to add another series with data from the previous hour for comparison. To do so, you'll have to add an `offset` argument to the `.es()` function. `offset` will offset the series retrieval by a date expression. For this example, you'll want to offset the data back one hour and will be using the date expression `-1h`. Using a comma to separate the two series, enter the following expression into the Timelion query bar:
+. For comparison, add another series with data from the previous hour, separated by a comma:  
 
 [source,text]
 ----------------------------------
@@ -25,7 +35,8 @@ Now you need to add another series with data from the previous hour for comparis
 image::images/timelion-create02.png[]
 {nbsp}
 
-It’s a bit hard to differentiate the two series. Customize the labels in order to easily distinguish them. You can always append the `.label()` function to any expression to add a custom label. Enter the below expression into the Timelion query bar to customize your labels:
+. To easily distinguish between the two series, customize the labels:
+
 [source,text]
 ----------------------------------
 .es(offset=-1h,index=metricbeat-*, timefield='@timestamp', metric='avg:system.cpu.user.pct').label('last hour'), .es(index=metricbeat-*, timefield='@timestamp', metric='avg:system.cpu.user.pct').label('current hour')

docs/timelion/getting-started/timelion-customize.asciidoc

@@ -1,16 +1,9 @@
 [[timelion-customize]]
 === Customize and format visualizations
 
-Timelion has plenty of options for customization. You can personalize nearly every aspect of a chart with the functions available. For this tutorial, you will perform the following modifications.
+Personalize nearly every aspect of a chart with the available customization functions.
 
-* Add a title
-* Change a series type
-* Change the color and opacity of a series
-* Modify the legend
-
-In the <<timelion-create, previous section>>, you created a Timelion chart with two series. Let’s continue to customize this visualization.
-
-Before making any other modifications, append the `title()` function to the end of an expression to add a title with a meaningful name. This will make it much easier for unfamiliar users to understand the visualizations purpose. For this example, add `title('CPU usage over time')` to the original series. Use the following expression in your Timelion querybar:
+. To add a title with a meaningful name, append the `title()` function to the end of an expression:
 
 [source,text]
 ----------------------------------
@@ -20,7 +13,7 @@ Before making any other modifications, append the `title()` function to the end
 image::images/timelion-customize01.png[]
 {nbsp}
 
-To differentiate the last hour series a bit more, you are going to change the chart type to an area chart. In order do so, you'll need to use the `.lines()` function to customize the line chart. You'll be setting the `fill` and `width` arguments to set the fill of the line chart and line width respectively. In this example, you will set the fill level to 1 and the width of the border to 0.5 by appending  `.lines(fill=1,width=0.5)`. Use the following expression in the Timelion query bar:
+. To differentiate the last hour series a bit more, change the chart type to an area chart:
 
 [source,text]
 ----------------------------------
@@ -30,7 +23,7 @@ To differentiate the last hour series a bit more, you are going to change the ch
 image::images/timelion-customize02.png[]
 {nbsp}
 
-Let’s color these series so that the current hour series pops a bit more than the last hour series. The `color()` function can be used to change the color of any series and accepts standard color names, hexadecimal values or a color schema for grouped series. For this example you will use `.color(gray)` for the last hour and `.color(#1E90FF)` for the current hour. Enter the following expression into the Timelion query bar to make the adjustments:
+. Change the color of the series so that the current hour series pops a bit more than the last hour series:
 
 [source,text]
 ----------------------------------
@@ -40,7 +33,7 @@ Let’s color these series so that the current hour series pops a bit more than
 image::images/timelion-customize03.png[]
 {nbsp}
 
-Last but not least, adjust the legend so that it takes up as little space as possible. You can utilize the `.legend()` function to set the position and style of the legend. For this example, place the legend in the north west position of the visualization with two columns by appending `.legend(columns=2, position=nw)` to the original series. Use the following expression to make the adjustments:
+. Adjust the legend so that it takes up as little space as possible:
 
 [source,text]
 ----------------------------------
@@ -49,5 +42,3 @@ Last but not least, adjust the legend so that it takes up as little space as pos
 
 image::images/timelion-customize04.png[]
 {nbsp}
-
-Continue on to the next section to learn about mathematical functions.

docs/timelion/getting-started/timelion-math.asciidoc

@@ -1,14 +1,28 @@
 [[timelion-math]]
-=== Using mathematical functions
+=== Use mathematical functions
 
-You’ve learned how to create and style a Timelion visualization in the previous two sections. This section will explore the mathematical functions Timelion offers. You will continue to use the https://www.elastic.co/downloads/beats/metricbeat[Metricbeat data] to create a new Timelion visualization for inbound and outbound network traffic. To start, you'll need to add a new Timelion visualization to the sheet.
+Create a Timelion visualization for inbound and outbound network traffic.
 
-In the top menu, click `Add` to add a second visualization. When added to the sheet, you’ll notice that the query bar has been replaced with the default `.es(*)` expression. This is because the query is associated with the visualization on the Timelion sheet you have selected. 
+[[timelion-math-before-you-begin]]
+==== Before you begin
+
+In this tutorial, you'll continue to use the time series data from https://www.elastic.co/guide/en/beats/metricbeat/current/index.html[Metricbeat].
+
+[[math-add-timelion-visualization]]
+==== Add a Timelion visualization to the sheet
+
+. Click *Visualize*.
+
+. On the *Visualizations* page, click *Create new visualization*.
+
+. On the *New Visualization* window, click *Timelion*.
++
+You’ll notice that the query bar has been replaced with the default `.es(*)` expression. 
 
 image::images/timelion-math01.png[]
 {nbsp}
 
-To start tracking the inbound / outbound network traffic, your first expression will calculate the maximum value of `system.network.in.bytes`. Enter the expression below into your Timelion query bar:
+. To start tracking the inbound and outbound network traffic, enter the following in the *Timelion Expression* field:
 
 [source,text]
 ----------------------------------
@@ -18,7 +32,7 @@ To start tracking the inbound / outbound network traffic, your first expression
 image::images/timelion-math02.png[]
 {nbsp}
 
-Monitoring network traffic is much more valuable when plotting the rate of change. The `derivative()` function is used do just that - plot the change in values over time. This can be easily done by appending the `.derivative()` to the end of an expression. Use the following expression to update your visualization:
+. Plot the change in values over time:
 
 [source,text]
 ----------------------------------
@@ -28,7 +42,7 @@ Monitoring network traffic is much more valuable when plotting the rate of chang
 image::images/timelion-math03.png[]
 {nbsp}
 
-Now for the outbound traffic. You'll need to add a similar calculation for `system.network.out.bytes`. Since outbound traffic is leaving your machine, it makes sense to represent this metric as a negative number. The `.multiply()` function will multiply the series by a  number, the result of a series or a list of series. For this example, you will use `.multiply(-1)` to convert the outbound network traffic to a negative value. Use the following expression to update your visualization:
+. Add a similar calculation for `system.network.out.bytes`:
 
 [source,text]
 ----------------------------------
@@ -38,7 +52,7 @@ Now for the outbound traffic. You'll need to add a similar calculation for `syst
 image::images/timelion-math04.png[]
 {nbsp}
 
-To make this visualization a bit easier to consume, convert the series from bytes to megabytes. Timelion has a `.divide()` function that can be used. `.divide()` accepts the same input as `.multiply()` and will divide the series by the divisor defined. Use the following expression to update your visualization:
+. To make this visualization a bit easier to consume, convert the series from bytes to megabytes:
 
 [source,text]
 ----------------------------------
@@ -48,7 +62,7 @@ To make this visualization a bit easier to consume, convert the series from byte
 image::images/timelion-math05.png[]
 {nbsp}
 
-Utilizing the formatting functions `.title()`, `.label()`, `.color()`, `.lines()` and `.legend()` learned in <<timelion-customize, the last section>>, let’s clean up the visualization a bit. Use the following expression to update your visualization:
+. Update your visualization:
 
 [source,text]
 ----------------------------------
@@ -57,5 +71,3 @@ Utilizing the formatting functions `.title()`, `.label()`, `.color()`, `.lines()
 
 image::images/timelion-math06.png[]
 {nbsp}
-
-Continue on to the next section to learn about conditional logic and tracking trends.