[Huawei Developers] riteshchanchal:
Article Introduction

In this article, I have explained how to use chart UI component to develop a health application for Huawei Lite Wearable device using Huawei DevEco Studio and using JS language in Harmony OS. Chart Component has basically two major styles line graph and bar graph. In case of Health applications like pedometer, steps tracker or any fitness application, the results are well presented if they are represented in charts daily/weekly/monthly. Here I explore how to show the accumulated health data in UI chart components.

Huawei Lite Wearable

Requirements

1) DevEco IDE

2) Lite wearable watch (Can use simulator also)

New Project (Lite Wearable)

After installation of DevEco Studio, make new project.

Select Lite Wearable in Device and select Empty Feature Ability in Template.

After the project is created, its directory as shown in below image.

Purpose of charts, why should we use it?

Charts are important UI component of the modern UI design. There are many ways to use them in watch UIs. Charts can provide information to user more clear and precise, thereby enriches the user experience. Due to space constraint of the watch UI design, charts are the most sought component for representing data visually.

Use case scenarios

We will create sample health application which will record steps and heart rate, and we will focus more on how to use the charts UI.

Show steps count per hour in a day

Show steps covered day-wise for entire week.

Show heart rate bpm per hour in a day

Step 1: Create entry page for health application using index.html

Create and add the background image for index screen using stack component.

index.html

<stack class="stack" onswipe="touchMove">
<image src='/common/wearablebackground.png' class="background"></image>
<div class="container">
<div class="pedoColumn">
<text class="data-steps">
</text>
</div>
<text class="app-title">STEPS METER</text>

<div class="pedoColumn" onclick="clickSteps">
<text class="content-title">
Today's Steps
</text>
<div class= "pedoRow">
<image src='/common/steps.png' class="stepsbackground"></image>
<text class="container-steps" >
{{stepCounterValue}}
</text>
<text class="data-steps">
Steps
</text>
</div>
</div>
<div class="pedoColumn" onclick="clickHeart">
<text class="content-title">
Current Heart rate
</text>
<div class= "pedoRow">
<image src='/common/heart.png' class="stepsbackground"></image>
<text class="container-steps">
{{hearRateValue}}
</text>
<text class="data-steps">
BPM
</text>
</div>
</div>
<div class="pedoColumn">
</div>
</div>
</stack>

index.css

.pedoColumn {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
width: 380px;
height: 150px;
margin: 5px;
background-color: #3b3b3c;
border-radius: 10px;
}
.pedoRow {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
width: 380px;
height: 100px;
margin: 5px;
background-color: #3b3b3c;
border-radius: 10px;
}
.container {
flex-direction: column;
justify-content: center;
align-items: center;
left: 0px;
top: 0px;
width: 454px;
height: 454px;
background-color: transparent;
}

.data-steps{
text-align: left;
width: 190px;
height: 52px;
padding-left: 10px;
color: #c73d3d;
padding-top: 10px;
border-radius: 10px;
background-color: transparent;
}

.content-title{
text-align: left;
width: 290px;
height: 52px;
padding-left: 10px;
color: #d4d4d4;
padding-top: 10px;
border-radius: 10px;
background-color: transparent;
}
.container-steps{
text-align: left;
width: 70px;
height: 52px;
padding-left: 10px;
color: #d4d4d4;
padding-top: 10px;
border-radius: 10px;
margin-left: 20px;
background-color: transparent;
}

.app-title{
text-align: center;
width: 290px;
height: 52px;
color: #c73d3d;
padding-top: 10px;
border-radius: 10px;
background-color: transparent;
}

.stepsbackground {
width:76px;
height:76px;
}

Types of chart

1. Bar chart : To express large variations in data, how individual data points relate to a whole, comparisons and ranking

2. Line chart : To express minor variations in data.

View attachment 5207023

Desired chart can be create with field “type” in chart class as show below.

<chart class="chartContainer" type="bar" options="{{chartOptions}}"
datasets="{{arrayData}}"></chart>

Chart class takes two important attributes options and data sets. Line graph provides with more flexibility with options section when compared to bar charts.

Step 2: Show steps count per hour in a day

The average person accumulates 3,000 to 4,000 steps per day. Regular physical activity has been shown to reduce the risk of certain chronic diseases, including high blood pressure, stroke and heart diseases. Most performed physical activity by an average human is walking. There is always eagerness to keep track of steps thereby keep track of our activeness in day.

In general steps count shows always a pattern in day, like more number of steps in morning 8.00-10.00 am hours and evening 5.00-7.00 pm hours, this readings mostly depends on the profession you are in. We can use the bar charts to track then hourly in a day or compare hourly among the days in week. Bar charts is great tool to have it in your wrist accessible at any time.

<stack class="stack" onswipe="touchMove">
<image src='/common/werablebackground.png' class="background"></image>
<div class="container">
<div class="chartRow">
<text class="date-title">{{dateString}}</text>
<image src='/common/steps.png' class="stepsbackground"></image>
</div>
<div class="chartAxisRow">
<text class="x-title">{{yAxisMaxRange}}</text>
<chart class="chartContainer" type="bar" options="{{chartOptions}}"
datasets="{{arrayData}}"></chart>
</div>
<div class="calcRow">
<text class="item-title">6am</text>
<text class="item-title" ></text>
<text class="item-title" >6pm</text>
</div>
<div class="chartBottomRow">
<text class="date-title">{{totalSteps}}</text>
<text class="item-title">{{distanceKms}} </text>
</div>
</div>
</stack>

Here we track the steps count hourly in day starting from 6.00 am hours to 9.00 pm hours. To visually represent we need x axis and y axis information. X axis will have the time range from 6.00 am hours to 9.00 pm hours. Y axis will range from 0 to maximum number steps (it is around 150 here).

Chart class has options attribute with paramters xAxis and yAxis.

xAxis - X-axis parameters. You can set the minimum value, maximum value, and scale of the x-axis, and whether to display the x-axis

yAxis - Y-axis parameters. You can set the minimum value, maximum value, and scale of the y-axis, and whether to display the y-axis

chartOptions: {
xAxis: {
min: 0,
max: 25,
axisTick: 18,
display: true,
color: "#26d9fd",
},
yAxis: {
min: 0,
max: 200,
axisTick: 10,
display: true,
color: "#26d9fd",
}
},

min - corresponds to minimum value of the axis should start

max - corresponds to minimum value of the axis should end

color – color of the axis

display – true/false visibility of the x/y axis line

axisTick - Number of scales displayed on the x-axis. The value ranges from 1 to 20. The display effect depends on the calculation result of Number of pixels occupied by the image width/(max-min).

Lite wearables support integer calculation, and an error may occur in the case of inexhaustible division. Specifically, a segment of space may be left at the end of the x-axis.

In the bar chart, the number of bars in each group of data is the same as the number of scales, and the bars are displayed at the scales.

Chart class has datasets which takes the data required for graph. It has parameters like data, gradient, strokeColor and fillColor

arrayData: [{
data: [10, 0, 20, 101, 44, 56, 1, 10, 153, 41, 111, 30, 39, 0, 0, 10, 0, 13],
gradient: true,
strokeColor: "#266571",
fillColor: "#26d9fd",
},
],

View attachment 5207261

Step 3: Show steps covered day-wise for entire week.

To compare steps count across the days in a week, we can use bar charts. This will let us know which days in the week the user is more active. In general the data in weekends and weekdays will have common pattern.

If the user has set steps goals for week, then we can show progress of the steps count with a progress bar too.

<progress class="progressHorizontal" type="horizontal" percent="{{progressNumber}}"></progress>

As we have seen before we can use chart class with different options. Since here the comparison is among the days in a week. The X Axis will have days Monday to Sunday.

<stack class="stack" onswipe="touchMove">
<image src='/common/wearablebackground.png' class="background"></image>
<div class="container">
<text class="date-title">
Weekly summary
</text>
<text class="date-title">
{{totalSteps}}
</text>
<div class="chartRow">
<text class="date-content">
{{goalString}}
</text>
</div>
<progress class="progressHorizontal" type="horizontal" percent="{{progressNumber}}"></progress>
<chart class="chartContainer" type="bar" options="{{chartOptions}}" datasets="{{arrayData}}"></chart>
<div class="calcRow">
<text class="item-title">
M
</text>
<text class="item-title">
T
</text>
<text class="item-title">
W
</text>
<text class="item-title">
T
</text>
<text class="item-title">
F
</text>
<text class="item-title">
S
</text>
<text class="item-title">
S
</text>
</div>
</div>
</stack>

Chart class has options attribute with paramters xAxis and yAxis.

chartOptions: {
xAxis: {
min: 0,
max: 10,
axisTick: 7,
display: true,
color: "#8781b4",
},
yAxis: {
min: 0,
max: 1200,
axisTick: 10,
display: false,
color: "#8781b4",
},
},

Chart class has datasets which takes the data required for graph

arrayData: [{
data: [1078, 209, 109, 1011, 147, 560, 709],
gradient: true,
strokeColor: "#266571",
fillColor: "#8781b4",
},
],

Step 3: Show heart rate in bpm per hour in a day

Heart rate can be recorded from wrist watch sensor APIs and saved to watch storage. Then this weekly or daily data can be visually represented in line graph.

We can use line graph for heart rate visuals, because the heart rate has less variations in an entire day.

<chart class="chartContainer" type="line" options="{{chartOptions}}"
datasets="{{arrayData}}"></chart>

We are taking the x axis as the time ranging from 6.00am hours to 12.00 pm hours. Y axis has the heart rate bpm.

<stack class="stack">
<image src='/common/werablebackground.png' class="background"></image>
<div class="container" onswipe="touchMove">
<text class="item-title">
{{todayString}} Wednesday
</text>
<div class="pedoColumn" onclick="clickHeart">
<div class="pedoRow">
<text class="x-title">
{{yAxislabel}}
</text>
<chart class="chartContainer" type="line " options="{{chartOptions}}" datasets="{{arrayData}}"></chart>
</div>
</div>
<text class="content-title">
Avg bpm {{averagebpm}}
</text>
</div>
</stack>

Chart class has options attribute with paramters xAxis and yAxis.

chartOptions: {
xAxis: {
min: 0,
max: 18,
axisTick: 18,
display: true,
color: "#26d9fd",
},
yAxis:{
min: 50,
max: 110,
axisTick: 10,
display: false,
color: "#26d9fd",
},

We have attribute called series which is specific to line graph series has parameters like lineStyle, headPoint, topPoint, bottomPoint and loop.

series: {
lineStyle: {
width: 5,
smooth: true
},
headPoint:{
shape: "circle",
size: 5,
strokeWidth:2,
strokeColor:"#ff0000",
fillColor:"#26d9fd",
display:true
},
topPoint:{
shape: "circle",
size: 5,
strokeWidth:3,
strokeColor:"#ff0000",
fillColor:"#ffffff",
display:true
},
bottomPoint:{
shape: "circle",
size: 5,
strokeWidth:3,
strokeColor:"#ff0000",
fillColor:"#000100",
display:true
}
},

View attachment 5207265

lineStyle- Line style, such as the line width and whether the line is smooth.

headPoint - Style and size of the white point at the start of the line.

topPoint - Style and size of the top point.

bottomPoint - Style and size of the bottom point.

Loop - Whether to start drawing again when the screen is looped

Append attribute can be adding data dynamically. Data is dynamically added to an existing data sequence. The target sequence is specified based on serial, which is the subscript of the datasets array and starts from 0. datasets[index].data is not updated. The value is incremented by 1 based on the horizontal coordinate and is related to the xAxis min/max setting.

Tips and Tricks

In this article the data for the chart UI is hardcoded in the javascript object. To create full-fledged application, the data has to come from the accumulated storage, which is updated by the sensor APIs from the watch or the mobile devices connected to the watch could be the source of the data.

Conclusion

In this article, we have learnt how to use chart UI for any health or fitness application in Harmony OS. We have seen how the graph type selection can done based on the use-case and requirement. We have seen basic UI enriching options in the chart.

References

Document

developer.harmonyos.com