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
﻿
﻿View the IntelliWidgets.js reference ->﻿﻿
Usage
Creating the widget
The code snippet below creates a Graph widget and mounts﻿ it to the DOM:
Create and mount widget
const intelli = IntelliProveWidgets("test_at_WKBDJytNjPY7HfzYmCYZ7AriWRqKymqprvccQnCBwuqDAfitVe");

const config = { /* config */ };
const variation = "default";
const themeOverrides = { /* theme overrides */ };
intelli.mountWidget(
    "#hr-graph-tile",
    "graph",
    config,
    variation,
    themeOverrides
);
const intelli = IntelliProveWidgets("test_at_WKBDJytNjPY7HfzYmCYZ7AriWRqKymqprvccQnCBwuqDAfitVe");

const config = { /* config */ };
const variation = "default";
const themeOverrides = { /* theme overrides */ };
intelli.mountWidget(
    "#hr-graph-tile",
    "graph",
    config,
    variation,
    themeOverrides
);
﻿
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
const config = {
   parameter: "heart_rate",
   start: "2024-03-01T00:00:00",
   stop: "2024-06-01T00:00:00",
   title: "Heart rate graph",
   page: 0,
   page_size: 10
}

const config = {
   parameter: "heart_rate",
   start: "2024-03-01T00:00:00",
   stop: "2024-06-01T00:00:00",
   title: "Heart rate graph",
   page: 0,
   page_size: 10
}
﻿
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
﻿

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

Metric Widget

Well-Being Circle Widget