Live Platform
  • Introduction
  • Release Notes
    • Live 3
      • 3.59.0
      • 3.58.0
      • 3.57.0
      • 3.56.0
      • 3.55.0
      • 3.54.0
      • 3.53.0
      • 3.52.0
      • 3.51.0
      • 3.50.0
      • 3.49.0
      • 3.48.0
      • 3.47.0
      • 3.46.0
      • 3.45.0
      • 3.44.0
      • 3.43.0
      • 3.42.0
      • 3.41.0
      • 3.40.0
      • 3.39.0
      • 3.38.0
      • 3.37.0
      • 3.36.0
      • 3.35.0
      • 3.34.0
      • 3.33.0
      • 3.32.0
      • 3.31.0
      • 3.30.0
      • 3.29.0
      • 3.28.0
      • 3.27.0
      • 3.26.0
      • 3.25.0
      • 3.24.0
      • 3.23.0
      • 3.22.0
      • 3.21.0
      • 3.20.0
      • 3.19.0
      • 3.18.0
      • 3.17.0
      • 3.16.0
      • 3.15.0
      • 3.14.0
      • 3.13.0
      • 3.12.0
      • 3.11.0
      • 3.10.0
      • 3.9.0
      • 3.8.0
      • 3.7.0
      • 3.6.0
      • 3.5.0
      • 3.4.0
      • 3.3.0
      • 3.2.0
      • 3.1.0
      • 3.0.0
    • Live 2
  • Articles
    • Creating an aggregation
    • Creating a pipe
  • Theoretical Background
    • Fundamentals
    • Key Advantages
  • Platform Architecture
    • Introduction
    • Queries
    • Glossary
  • Featured plugins
    • Annotations
    • Groovy support
    • Messenger
    • Microsoft Teams
    • MongoDB
    • MongoDB Timeseries
    • MongoDB Kit
    • Purge plugin
    • SQL
    • TCP Input
    • TimescaleDB
  • Data visualization
    • Pipes widgets
      • Temporal
      • Cartesian
      • Multi-value snapshot
      • Single-value snapshot
      • Tables
      • Heatmap
      • JSX Widgets
      • Lollipop
      • Histogram
      • State Timeline
      • Boxplot
    • Pipes modifiers on Pipes charts
  • Alerts and notifications
    • Pipes modifiers on rules
  • Pipes Queries
    • Introduction
    • Dynamic filters
    • Meta parameters
    • Reducer
      • Uniform compress
      • PIP
    • Storage Hints
    • Execution Context
    • Event flow modifiers
  • Developers
    • Plugins
    • Packages
    • Backend API
      • Lookup Tables
      • Extensions
      • Settings
      • Storage Providers
      • Web Services
      • Web Setup
      • Entity Audit
    • Web application
      • Services
        • Point service
        • Menu service
      • Browser Compatibility
      • Runtime modules
        • Core Javascript modules
        • Library modules
        • Adding modules to runtime
      • Localization (i18n)
      • Date formatting
      • Dashboard and Widgets
        • Widget API
        • Custom widget editors
        • Live Event Types
        • Live Widget Configuration
        • Live Widget Packaging
        • Widget Request Interceptors
      • React Contexts
        • Dashboard
        • Dashboard widget
      • Registering Home Page options
    • Python application
    • Subscribing to Live Events
  • Administration
    • Configuration
      • Home Page Customization
      • live.properties
    • Infrastructure Monitoring
    • Storage Monitoring
    • Queries Monitoring
    • Logs Monitoring
    • Data Purging
  • Features
    • Access Permission
    • Datasources
    • Export Dashboard
    • Partial Indexes
    • WebApp Metrics
    • Entity Audit
Powered by GitBook
On this page

Was this helpful?

  1. Data visualization
  2. Pipes widgets

State Timeline

PreviousHistogramNextBoxplot

Last updated 2 years ago

Was this helpful?

A state timeline is a way of representing events that occurs over time.

Each state will be rendered as a bar starting at the event timestamp. The bar will end just before the start of the next state or at the present time if there is no next state.

The value of the state must be a string and will be showed in the legend and the tooltip.

The color of the bar must be set using __color.

This functionality is provided by the live-exploratory-viz plugin. It is available on the .

The chart settings allow you to choose its orientation, whether or not to display a tooltip when hovering the mouse over the states and the space available for the legend.

Example of use

Using the pipes query below as an example:

def @@states: newmap("0", "pare", "1", "ande", "2", "atenção"):const;
def @@colors: newmap("0", "red", "1", "green", "2", "yellow"):const;
=> random(0,3):floor(0) as state every 15 min
=> @@states:get(state$) as value, @@colors:get(state$) as __color

We can obtain a chart similar to this one:

marketplace