New

The executive guide to generative AI

Read more
About usPartnersSupport|Login
IMPORTANT: No additional bug fixes or documentation updates will be released for this version. For the latest information, see the current release documentation.
« Update Kibana filters from Vega Timelion tutorial: Create visualizations with mathematical functions »
Elastic Docs ›Kibana Guide [7.10] ›Dashboard ›Tutorials

Create time series visualizations with Timelion

edit

Create time series visualizations with Timelion

edit

To compare the real-time percentage of CPU time spent in user space to the results offset by one hour, create a time series visualization.

Define the functions

edit

To start tracking the real-time percentage of CPU, enter the following in the Timelion Expression field:

.es(index=metricbeat-*,
    timefield='@timestamp',
    metric='avg:system.cpu.user.pct')
timelion create01

 

Compare the data

edit

To compare the two data sets, add another series with data from the previous hour, separated by a comma:

.es(index=metricbeat-*,
    timefield='@timestamp',
    metric='avg:system.cpu.user.pct'),
.es(offset=-1h,             
    index=metricbeat-*,
    timefield='@timestamp',
    metric='avg:system.cpu.user.pct')

offset offsets the data retrieval by a date expression. In this example, -1h offsets the data back by one hour.
timelion create02

 

Add label names

edit

To easily distinguish between the two data sets, add the label names:

.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')

.label() adds custom labels to the visualization.
timelion create03

 

Add a title

edit

Add a meaningful title:

.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')
  .title('CPU usage over time')

.title() adds a title with a meaningful name. Titles make is easier for unfamiliar users to understand the purpose of the visualization.
timelion customize01

 

Change the chart type

edit

To differentiate between the current hour data and the last hour data, change the chart type:

.es(offset=-1h,
    index=metricbeat-*,
    timefield='@timestamp',
    metric='avg:system.cpu.user.pct')
  .label('last hour')
  .lines(fill=1,width=0.5), 
.es(index=metricbeat-*,
    timefield='@timestamp',
    metric='avg:system.cpu.user.pct')
  .label('current hour')
  .title('CPU usage over time')

.lines() changes the appearance of the chart lines. In this example, .lines(fill=1,width=0.5) sets the fill level to 1, and the border width to 0.5.
timelion customize02

 

Change the line colors

edit

To make the current hour data stand out, change the line colors:

.es(offset=-1h,
    index=metricbeat-*,
    timefield='@timestamp',
    metric='avg:system.cpu.user.pct')
  .label('last hour')
  .lines(fill=1,width=0.5)
  .color(gray), 
.es(index=metricbeat-*,
    timefield='@timestamp',
    metric='avg:system.cpu.user.pct')
  .label('current hour')
  .title('CPU usage over time')
  .color(#1E90FF)

.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(gray) represents the last hour, and .color(#1E90FF) represents the current hour.
timelion customize03

 

Make adjustments to the legend

edit

Change the position and style of the legend:

.es(offset=-1h,
    index=metricbeat-*,
    timefield='@timestamp',
    metric='avg:system.cpu.user.pct')
  .label('last hour')
  .lines(fill=1,width=0.5)
  .color(gray),
.es(index=metricbeat-*,
    timefield='@timestamp',
    metric='avg:system.cpu.user.pct')
  .label('current hour')
  .title('CPU usage over time')
  .color(#1E90FF)
  .legend(columns=2, position=nw)

.legend() sets the position and style of the legend. In this example, .legend(columns=2, position=nw) places the legend in the north west position of the visualization with two columns.
timelion customize04

 

« Update Kibana filters from Vega Timelion tutorial: Create visualizations with mathematical functions »