01 Time Series
What You'll Learn
Display multiple variables in a single chart
Compare actual values with set points
Customize line styles (colours, dashed lines, thickness)
Configure legends with statistical calculations
Use tooltips effectively
Prerequisites
Completed Tutorial 1.2: Your First Dashboard
A dashboard with at least one time series panel
Overview
Time series charts are the most common visualization in manufacturing dashboards. They show how values change over time, making them perfect for:
Monitoring process parameters (temperature, pressure, speed)
Comparing actual values to set points
Identifying trends and anomalies
Analysing production patterns
In this tutorial, you'll learn advanced techniques to make your time series panels more informative and visually clear.
Adding Multiple Variables
There are two ways to display multiple variables in a single chart:
Method 1: Multiple Variables in One Query
This is the simplest approach when variables are from the same machine.
Edit panel and select variables
Edit your time series panel (click panel title → Edit)
In the query editor, click the Variables field
Select additional variables from the list
All selected variables will appear as separate lines on the chart
Best for: Comparing related measurements from the same machine (e.g., multiple temperature sensors)
Method 2: Multiple Queries
Use this when you need variables from different machines or want separate control over each.
Add and configure separate queries
In the query editor, click + Query to add a new query
[SCREENSHOT: Add Query button location]
Configure the second query with a different site, machine, or variable
Each query appears as a separate section (Query A, Query B, etc.)
[SCREENSHOT: Panel with two queries configured]
Best for: Comparing the same variable across different machines
Comparing Actual vs. Setpoint Values
A common manufacturing use case is comparing measured values (actual) with target values (setpoint). Let's style them so they're easy to distinguish.
Step 1: Add Both Variables
Step 2: Apply Field Overrides
Field overrides let you style specific series differently.
Create override for the actual value
In the right sidebar, scroll down to Overrides
Click + Add field override
Select Fields with name
Choose the actual value (e.g., "Abzugsgeschwindigkeit")
[SCREENSHOT: Override selector with field name]
Click + Add override property
Select Standard options > Color
Choose a fixed color (e.g., blue)
[SCREENSHOT: Color override being set to blue]
Step 3: Style the Setpoint as Dashed
Result
Your chart now clearly distinguishes actual values (solid blue line) from setpoints (dashed orange line).
[SCREENSHOT: Final chart with actual vs setpoint styling]
Line Styling Options
Grafana offers many ways to customize how lines appear.
Accessing Style Options
Style options are in the right sidebar under different sections:
Graph styles
Draw style, line interpolation, line width, fill opacity, gradient, point size
Standard options
Unit, color scheme, decimals, min/max
Overrides
Per-series customization
Common Style Settings
Line Width
Controls the thickness of the line.
Fill Opacity
Adds a shaded area under the line.
Gradient Mode
Creates a color gradient in the fill area.
Line Interpolation
Controls how points are connected.
Linear
Straight lines between points
Most data (default)
Smooth
Curved lines
Trends, presentations
Step before
Horizontal then vertical
Discrete state changes
Step after
Vertical then horizontal
Discrete state changes
[SCREENSHOT: Line interpolation modes comparison]
Show Points
Displays data points as dots on the line.
Legend Configuration
A well-configured legend helps users understand the data at a glance.
Legend Display Modes
Legend Placement
Bottom: Below the chart (default, best for wide panels)
Right: To the right of the chart (good for tall panels)
Adding Statistics to the Legend
When using Table mode, you can display calculated values:
Choose legend values
Under Legend, find Values
Select the statistics to display:
Last
Most recent value
Last *
Most recent non-null value
Min
Minimum value in time range
Max
Maximum value in time range
Mean
Average value
Sum
Total of all values
Count
Number of data points
[SCREENSHOT: Legend with Min, Max, Mean, Last values displayed]
Manufacturing tip: For process monitoring, Min, Max, and Mean help quickly identify if values stayed within expected ranges.
Tooltip Configuration
Tooltips appear when you hover over the chart.
Tooltip Mode
Choose tooltip mode
In the sidebar, find Tooltip
Set Tooltip mode:
Single
Shows only the hovered series
All
Shows all series at that time point
Hidden
No tooltip
[SCREENSHOT: Tooltip mode comparison]
Recommendation: Use All when comparing multiple series, Single for cleaner hover on busy charts.
Tooltip Sort Order
When showing all series, you can sort them:
None: Original order
Ascending: Lowest value first
Descending: Highest value first
Practical Example: Process Monitoring Panel
Let's build a panel that monitors line speed with proper styling:
Configuration
Variables
Abzugsgeschwindigkeit, Abzugsgeschwindigkeit (Soll)
Line width
2
Fill opacity
10
Actual color
Blue (via override)
Setpoint color
Orange, dashed (via override)
Legend mode
Table
Legend values
Min, Max, Mean
Tooltip mode
All
Overrides Summary
Abzugsgeschwindigkeit
Blue (fixed)
Solid
Abzugsgeschwindigkeit (Soll)
Orange (fixed)
Dash (10, 10)
[SCREENSHOT: Complete process monitoring panel with all settings applied]
Tips and Best Practices
Color Selection
Use blue for actual/measured values (industry convention)
Use orange or yellow for setpoints/targets
Use red only for errors or alerts
Use green for "good" status indicators
When to Use Fill
Single variable
0-20%
Comparing 2 variables
0-10% (or 0 for clarity)
Stacked data
50-100%
Area charts
80-100%
Performance Considerations
Many variables (>10) in one panel can slow rendering
Consider splitting into multiple panels for better performance
Use longer time ranges with care on high-frequency data
Summary
You've learned how to create professional time series visualizations:
✅ Display multiple variables in one chart
✅ Compare actual vs. setpoint with distinct styling
✅ Customize line appearance (width, fill, gradient)
✅ Configure informative legends with statistics
✅ Set up helpful tooltips
What's Next?
Continue learning about visualization types:
Single Value Displays – Stat, Gauge, and Bar Gauge panels
Tables – Displaying data in tabular format
Advanced Styling – Thresholds, units, and more
Quick Reference
Override Properties for Time Series
Color
Standard options > Color
Blue, #3274D9
Line style
Graph styles > Line style
Solid, Dash, Dots
Line width
Graph styles > Line width
1, 2, 3
Fill opacity
Graph styles > Fill opacity
0, 10, 30
Keyboard Shortcuts
Toggle legend
p then l
View in full screen
v
Refresh panel
r
Last updated