In this video, you’ll learn how to use the sparkline in the XMPRO App Designer.
Need help with creating your XMPRO apps? Send an email to support@xmpro.com
Go to https://xmpro.com if you... hi and welcome to another training video
from Exim Pro today we will be looking
at how to use the sparkline component as
a prerequisite you should have already
gone through the video on how to create
and use data sources if not then I
recommend doing that first the sparkline
component can be found in the basic
blocks section sparklines don't look so
good when they are extremely large so
I'm going to change the width to 50% on
this one and I to 80 pixels and I I also
have to change the Flex grow to zero so
in order for anything to appear in the
sparkline we have to assign it a data
source I've already previously created
one with a battery level over time and
you have to select the data so the
x-axis is the horizontal axis we want to
put that as time timestamp and the
y-axis is the value you're going to
represent on the graph which is battery
level and ignore empty points if you
check this it will discard any rows in
the in the data set that it gets that
have empty values so we can save that
and the default looks like this it's got
a battery level over time it's going
down and then it recharges and it goes
down again or recharges
it doesn't have to be a line it can be
an area bar spline spline area step area
step line or win-loss graph so what this
what some of these look like spline what
that does is it rounds the edges of the
line so instead of a jagged line it
start as sort of smoothes doubt step
makes it go in a horizontal and then
vertical and nothing else
area puts great underneath the line and
each of these have appearance properties
that you can assign to them so area has
highlight first and last etc bar has
some less properties when loss has some
wind color lost color etc so if we go
back to line and choose highlight first
and last point then it's going to bring
up some more options if we choose show
min and Max point it's going to choose
it's going to show some more options we
can change the line width back to two
there are a bunch of ways that you can
make this you can customize the
sparkline so here we've got some max
points which is 100% and then points
which is 0% so it's highly in
highlighting that and then we've got a
first and last point that's also being
highlighted
and there are many more ways that you
can modify the sparkline this has been
how to use the sparkline component
