Introduction
Progress charts (beta version) are important in achieving personal health improvements by enabling users to monitor progress and evaluate the effectiveness of interventions in achieving their goals. These charts enable the assessment of progress over time by measuring in-app activities such as mood or sleep quality.
When paired with HealthKit data, they offer visualizations of health metrics within Cogniss-powered apps, offering invaluable insights. Explore the simplicity and effectiveness of progress charts for tracking daily progress within your apps.
Progress chart editor in Creator with the preview of the chart on the Mobile
Where to find the progress chart editor
Navigate to Cogniss Creator and choose your desired app. Then, on the left navigation bar, proceed to the Progress Chart tab
Create a new progress chart
Click the 'Create new' button
Input a chart name
Once saved, it will launch the Progress Chart creator and take you to '1. Chart Type'
1. Chart type
Choose the type of chart you prefer to use
There are currently 5 charts available at the moment.
Bar, line, area, scattered, and candlestick charts
2. Data Source
This section allows you to select the primary data source that will be used and displayed on the charts
There are two source types: Activity/Question data and HealthKit data
Activity/Question - data that comes from in-app interactions, specifically completing activities or questions by your users in your app
The type can be selected based on an activity score, question score, or numbered response
Max 3 activities/questions can be placed and compared in the chart
HealthKit data comes from health data from your users when synced from Apple Health
Choose the type of Health data (eg. sleep samples, step count)
Can only choose 1 type of health data
HealthKit settings must be enabled from the Settings tab. For more information regarding the integration of HealthKit, please refer to this article: Setting up Apple HealthKit within Cogniss app
3. Configure
In this section, you can define the chart's properties, such as the chart name, and horizontal and vertical axis labels.
Vertical axis section
For Activity/Question data
Data display action options:
Show total – Sums up all scores recorded within the same time frame.
Show average – Calculates the average of all scores recorded within the same time frame
Show most recent only – Displays only the most recent score from all recorded scores
Show first attempt only – Displays the score from the very first attempt
Unit type will always be based on the Score
The tick count represents the number of points displayed on the Y-axis
For HealthKit data
Unit type will be based on the unit of measurement eg. Heart rate's unit is beats per minute (bpm)
The tick count represents the number of points displayed on the Y-axis
Available display options types for health kit data:
Health Data | Display format |
Step count | Total steps |
Sleep | Latest sleep session |
Heart rate | Average heart rate |
Heart rate variability | Average HRV |
Resting heart rate | Average resting rate |
Walking heart rate average | Average walking rate |
Horizontal axis section
For Activity/Question data and HealthKit data
Time frame: Shows the last 7 days of data (including most recent)
Display settings
The general configuration of the chart, including graph title, show/hide title, legend label, and grid lines
4. Summary
In the final section, users can review a summary of all steps and configurations for the chart. They can preview each step and make edits if necessary. Additionally, a chart previewer is provided as a visualization tool to confirm the accuracy of the details.
Chart Previewer
The previewer showcases the chart configured in the previous steps, enabling you to visualize how it will appear within your app
Chart previewer from 4.Summary page
The chart preview will be populated using the app creator’s own data of the app. The chart will be empty if the app creator has no data yet.
How to apply the progress chart to your apps using CML
You can copy the CML ID to implement the progress chart in your apps. The CML ID can be copied from the Summary page or the chart previewer.
Copy and paste the progress chart CML within a content block
Copy the CML ID from the 4. Summary page of the progress chart editor
Navigate to the Contents page and paste the ID on the desired content block
Save the changes
Preview it from your app (Ensure to refresh your app)
Important: Any modifications made to existing progress charts within the progress charts will require recopying the CML ID to the applied content blocks