Rick Spencer & Wojciech Kocjan [InfluxData] | Visualizing InfluxDB 2.0 Dashboards | InfluxDays Virtual Experience NA 2020

Rick Spencer, InfluxData
Wojciech Kocjan, InfluxData
Visualizing InfluxDB 2.0
dashboards

© 2020 InfluxData. All rights reserved. 2
Disclaimer
● Projects mentioned in this presentations are not officially
supported by InfluxData
● However, source code for all of the code and projects
mentioned in our slides are open source and we will be
providing links to projects’ pages and downloadable artifacts

Software Engineer, InfluxData
Wojciech Kocjan
Wojciech is an engineer with 10 years of experience with public cloudsand
multiple years of experience with containers and Kubernetes.
Currently an engineer at InfluxData, working on InfluxDB Cloud 2 and automation
of its deployments.

Head of Platform, InfluxData
Rick Spencer
Rick is the head of platform at InfluxData, where his responsibilities include
leadership of core storage engine, developer tooling and running InfluxDB Cloud
2.0 on Kubernetes in multiple clouds and regions

InfluxDB Dashboards can be used for more than just viewing your
dashboards in the InfluxDB web UI
Dashboards are exposed via API

Dashboards and cells for defining views
● Generic enough to show most information in a visual way
○ Useful for rendering status on different types of display device
○ Define how your data should be shown once and view it anywhere
● InfluxDB has a complete API for dashboards and their cells
○ Getting all dashboards and cells in a dashboard
○ Labels can be used to select a specific dashboard
○ Modifying dashboards also possible
(but out of scope for our project)

Dashboards and cells - other use cases
● Use same definitions of dashboards and cells for other things
○ Alerting based on dashboards and cells
■ Could be based on color definitions or additional columns that report checks
■ Unification of what is shown and what is monitored
○ Defining views for multiple types of applications
■ Websites, mobile apps and industrial status boards
■ Easier to manage views across different types of solutions
● Add domain-specific extensions or definitions
○ Outputting and formatting datetime columns
○ Custom messages on top of numeric value - showing 1/0 as YES/NO
○ Custom display modes - such as OHLC for financial data

Visualizing dashboards outside of InfluxDB UI
● Rendering dashboards as images
○ Ability to generate an image from a (subset of) InfluxDB dashboards
○ Configurable inputs and outputs - i.e. time range, resolution, DPI
○ Use cases
■ Showing up to date status on e-ink displays
■ Using TVs or other types of monitors to indicate status
■ Send alert notification with current status - i.e. via email, on Slack / MS Teams
● Mobile applications - Flux Mobile
○ Built with Dart and Flutter ; support for iOS and Android
○ Framework for showing data from InfluxDB in your application
○ Multiple examples of how to use the package in your own apps

What we wanted to do (and did!)
Render a large subset of InfluxDB
dashboards on multiple types of
devices:
● large screen TV
● e-ink display
● phone
● tablet

Where we want to get to
● Use giraffe and browsers as foundation for visualization
○ Re-use what the InfluxDB UI is using instead of duplicating code
○ Ability to visualize dashboards in same way as in the browser
○ Support for all types of dashboard cells is hard - giraffe has it built-in
● Render headless browser
○ Use a headless browser, render dashboards in it and take screenshot
○ Support a set of options - dark or light mode, resolution, DPI settings
● Embed web browser in mobile apps
○ Embed giraffe as a web view component in mobile apps
○ Simplify the process of embedding giraffe for iOS and Android

Rendering InfluxDB 2.0 dashboards as images
InfluxDB dashboard renderer

Rendering dashboards as images
Dashboard as displayed when using the
InfluxDB 2.0 frontend
Same dashboard when rendered using the
InfluxDB dashboard renderer

But wait ... there’s more
Same dashboard rendered as black and white,
shown on an 9,7” e-ink display

Project and goals
● Render (a subset of) InfluxDB 2.0 dashboards as images
○ Give it a URL to InfluxDB, a token and a dashboard
○ Outputs an image with dashboard and its cells rendered
○ Written in Python and published on GitHub
● Began as weekend project for an e-ink display
○ I wanted to show my InfluxDB dashboard on an e-ink display
○ Adapted to a more generic solution - rendering black and white,
grayscale and color images, with various DPI and dimensions ;
support for dark and light modes
○ Currently also a web server that can take inputs and render different
types of dashboards

Current status
● Code status
○ Up to date code is on GitHub, container image on DockerHub
○ Support for variables, sets defaults for time range and window period
○ No apparent memory leaks or issues with long running processes
○ Using it personally on a day basis for last 6 months
● Rendering of large subset of InfluxDB dashboard cells
○ Background and/or foreground colors and value ranges
○ Dark and light mode ; support for various DPI settings
○ Support for multiple queries and multiple tables
○ Multiple cell types: Single Stat, Graph,Graph + Single Stat, Gauge

Current status - future plans
● Dashboard cells not currently rendered properly
○ Heatmap
○ Histogram
○ Scatter
○ Table
○ Note cell
● Other functionality that I plan on improving
○ Missing labels for horizontal axis
○ Perform multiple queries in parallel way to speed up rendering time
○ Improve support for subsets of colors - such as color e-ink displays

Technology stack
● Python 3.x
○ Very generic language that I wanted to get more experience in
○ Cross-platform - works on Windows, macOS and Linux (including RPi)
○ Writing a web server with flask is a no-brainer
● Matplotlib
○ Excellent library for Python for visualization of data
○ Before working on the renderer, I used it in ad-hoc manner
● Container image
○ Simplifies running the renderer and allows it to be run in Kubernetes

Flutter based framework for building apps with InfluxDB-based data
Flux Mobile

Viewing dashboards using mobile apps
Similar dashboard rendered on an Android device
(showing cells vertically, not using regular layout)

Project and goals
● Library to embed a small set of InfluxDB dashboards in Flutter
○ Framework for showing data from InfluxDB in your application
○ Multiple examples of how to use the package in your own apps
○ Written in Dart and Flutter ; published on GitLab
● Started as project to simply show air quality on a smartphone
○ The initial idea was to write an app that shows current air quality
from InfluxDB ; grew to building SDK for InfluxDB, to be used in apps
○ Supports a subset of InfluxDB dashboards and cell types, provides
interactive dashboards
○ Project still in early stages, but usable on iOS and Android

Technology stack
● Flutter and Dart
○ Dart is a JVM-based language, Flutter provides UI
○ Cross-platform non-HTML based framework for mobile apps
○ Supports iOS and Android
○ Work on support for desktop operating systems also in progress

What’s in the Library
1. API class with Query and Write functions built in
2. Query, Table, Row, and Point classes for creating custom
applications
3. GUI components for user management, dashboards, line
graphs, single-stat cells, and colors for RAD development

References and links
● InfluxDB Dashboard Renderer
https://github.com/wojciechka/influxdb-dashboard-renderer
https://hub.docker.com/repository/docker/wojciechka/influxdb-dashboard-renderer
● Flux Mobile
https://gitlab.com/rickspencer3/flux-mobile
● Article: How to Display Your InfluxDB Dashboards on E-Ink
https://thenewstack.io/how-to-display-your-influxdb-dashboards-on-e-ink/

Rick Spencer & Wojciech Kocjan [InfluxData] | Visualizing InfluxDB 2.0 Dashboards | InfluxDays Virtual Experience NA 2020

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Rick Spencer & Wojciech Kocjan [InfluxData] | Visualizing InfluxDB 2.0 Dashboards | InfluxDays Virtual Experience NA 2020

Similar to Rick Spencer & Wojciech Kocjan [InfluxData] | Visualizing InfluxDB 2.0 Dashboards | InfluxDays Virtual Experience NA 2020 (20)

More from InfluxData

More from InfluxData (20)

Recently uploaded

Recently uploaded (20)

Rick Spencer & Wojciech Kocjan [InfluxData] | Visualizing InfluxDB 2.0 Dashboards | InfluxDays Virtual Experience NA 2020