in this video we'll show how you can put
circular
progress indicators uh on a ux component
so you can see here we have
two different progress indicators with
slightly different styles so this first
one
basically is using a blue color
for the completed percentage and a
light blue color for the an uncompleted
part
it's showing the percentage complete in
the center
and you can see that the zero point
is set to minus 90 degrees so that's the
zero point that's the
zero degrees that's minus 90 degrees so
it goes from
minus 90 to
uh to this point over here whereas this
uh
control over here starts at uh
minus 180 and
has a label over there and this is
it's both of them are using the same
javascript they just have different
settings objects so if we go
to the first slider over here and we go
to the slide event
we can see that we have a settings
object
and then we have we're calling into this
uh function which generates the progress
chart
it's basically passing in the settings
object
and then passing in the value of the
slider
and then setting the inner html of a div
called dev1
to that html so in order to basically
generate this
settings object there's a genie that
will help you do that
so in order to generate the settings
object you can go to
the interactive window and run this
function
which will open up the builder over here
and the builder lets you set
and test different values so you can see
here we've set the width
of the bar to 40 pixels i'm going to go
here
and change that to say 8 pixels
and then i'm going to just auto advance
the uh
the preview so you can see the preview
is just automatically advancing from
from one color from one setting to the
next setting what you can also do
is make the color of the bar conditional
based on the percentage
so let's stop that and then go to the
color complete
and then insert a sample so we'll go
here and we'll insert the sample so this
says that if the value
is less than 30 then use this color
if it's less than 60 but greater than 30
then use this color otherwise use that
color so let's go ahead now
and run it so we can see now that the
color is changing automatically based on
the value so it's going to go from
green to purple and then
over to red and then we can go ahead
here and turn on the label
which is going to show this label over
there so
we can then go here and press the show
javascript button
and this is going to get us all of the
javascript necessary
to render the um to render the control
what we can also do though is use action
javascript so
i also have an example over here
so let's go over here to this button and
if we look at this button we can see
that it's got
the circular progress indicator and if
we press the edit button
we open up the genie over here where we
can go ahead and set
all of the values then just click okay
so let's go ahead and change our
thickness to 30 pixels
click ok save this and then go to
working preview now and click
set the slider over there and then hit
the button you can see so
actually on the slider i already have an
on change event
that is clicking this button over there
so what we've shown in this video is how
you can create very attractive looking
um progress circular progress indicators
which can be used to display
progress of some event but can also be
used
in dashboards to show the different
values
of certain parameters thanks very much
for watching
Customer Support