## Timelion tutorial: Create visualizations with mathematical functionsedit

To create a visualization for inbound and outbound network traffic, use mathematical functions.

#### Define the functionsedit

To start tracking the inbound and outbound network traffic, enter the following in the Timelion Expression field:

.es(index=metricbeat*,
timefield=@timestamp,
metric=max:system.network.in.bytes)

#### Plot the rate of changeedit

Change how the data is displayed so that you can easily monitor the inbound traffic:

.es(index=metricbeat*,
timefield=@timestamp,
metric=max:system.network.in.bytes)
.derivative()
 .derivative plots the change in values over time.

Add a similar calculation for outbound traffic:

.es(index=metricbeat*,
timefield=@timestamp,
metric=max:system.network.in.bytes)
.derivative(),
.es(index=metricbeat*,
timefield=@timestamp,
metric=max:system.network.out.bytes)
.derivative()
.multiply(-1)
 .multiply() multiplies the data series by a number, the result of a data series, or a list of data series. For this example, .multiply(-1) converts the outbound network traffic to a negative value since the outbound network traffic is leaving your machine.

#### Change the data metricedit

To make the visualization easier to analyze, change the data metric from bytes to megabytes:

.es(index=metricbeat*,
timefield=@timestamp,
metric=max:system.network.in.bytes)
.derivative()
.divide(1048576),
.es(index=metricbeat*,
timefield=@timestamp,
metric=max:system.network.out.bytes)
.derivative()
.multiply(-1)
.divide(1048576)
 .divide() accepts the same input as .multiply(), then divides the data series by the defined divisor.

#### Customize and format the visualizationedit

Customize and format the visualization using functions:

.es(index=metricbeat*,
timefield=@timestamp,
metric=max:system.network.in.bytes)
.derivative()
.divide(1048576)
.lines(fill=2, width=1)
.color(green)
.label("Inbound traffic")
.title("Network traffic (MB/s)"),
.es(index=metricbeat*,
timefield=@timestamp,
metric=max:system.network.out.bytes)
.derivative()
.multiply(-1)
.divide(1048576)
.lines(fill=2, width=1)
.color(blue)
.label("Outbound traffic")
.legend(columns=2, position=nw)
 .label() adds custom labels to the visualization. .title() adds a title with a meaningful name. .lines() changes the appearance of the chart lines. In this example, .lines(fill=2, width=1) sets the fill level to 2, and the border width to 1. .color() changes the color of the data. Supported color types include standard color names, hexadecimal values, or a color schema for grouped data. In this example, .color(green) represents the inbound network traffic, and .color(blue) represents the outbound network traffic. .legend() sets the position and style of the legend. For this example, legend(columns=2, position=nw) places the legend in the north west position of the visualization with two columns.