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

start datetime string

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

stop nullable datetime string

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

title nullable string

Optionally override the graph title with a string value of choice

page optional integer

The page number of the results to retrieve. This parameter is used for pagination, where 0 represents the first page. Must be a positive integer. Default: 0

page_size optional integer

Maximum number of data points to return per page. Must be a positive integer. Default: 10

List of available biomarkers and metrics:

  • "heart_rate"
  • "respiratory_rate"
  • "resonant_breathing"
  • "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