Widgets

Graph Widget

Intro

The Graph Widget offers a dynamic way to visualise the progression of a specific biomarker or metric over time. It enables users to track changes in their health status and gain insights into long-term patterns. Easily integrate it into your platform to help users understand how their health evolves.

Layout

Medium

Document image


Usage

Creating the widget

The code snippet below creates a Graph widget and mounts it to the DOM:

Create and mount widget


Config

The Graph widget requires additional configuration parameters that describe which parameter should be displayed. Specify the timerange and page to select a specific portion of the data.

Config


Property

Description

parameter string

Biomarker or metric of choice

title nullable string

Optionally override the graph title with a string value of choice

start nullable datetime string

Start date and time for the range of historical data to be retrieved Format: YYYY-MM-DDTHH:MM:SS (ISO 8601) Default: UTCNOW - 8 days

stop nullable datetime string

Start date and time for the range of historical data to be retrieved Format: YYYY-MM-DDTHH:MM:SS (ISO 8601) Default: UTCNOW

List of available biomarkers and metrics:

  • "heart_rate"
  • "respiratory_rate"
  • "resonant_breathing_score"
  • "heart_rate_variability"
  • "resting_heart_rate"
  • "resting_respiratory_rate"
  • "mental_stress"
  • "mental_health_risk"
  • "sleep_quality"
  • "energy_balance"

Variation

Only one variation of the Graph Widget is available.

  • "default"

Theme Overrides

The Graph Widget allows individual fine-tuning of the appearance.

The used accent colors are:

  • Brand Primary
  • Support 500