How To Use Charts - XMPRO App Designer Toolbox

In this video, you’ll learn how to use charts in the XMPRO App Designer.

Need help with creating your XMPRO apps? Send an email to [e-mail]

Go to https://xmpro.com if you want to learn more about how you can build real-time applications with our Event Intelligence Platform.

Transcript

welcome to another training video from

XM pro today we will be looking at the

chart control and how to use it in app

designer it is one of the most used

controls in app designer if you want to

use it you can simply search for it in

the toolbox and under basic you will

find a controller called chart you can

drag it to the place where you want to

add it and then if you save your app you

will see that you have an empty chart

already now in order to display some

data inside we will see how we can

configure this child so I'll click on

the chart and in the block properties I

have a few options to configure starting

with the appearance - source and data

before we go into appearance let's give

it some data so that we can see how it

looks so in the data source I have a few

page data options that are that are

available to me I will choose the sense

of values 1 and then the next step that

I need to do is even though I have

assigned a data source to my chart it

will still not do anything because it

has not been configured for any series

in order to add a series to the chart I

have to come to the data item accordion

item here and in sees I have to click +

when I do that you will notice that I

have a few options starting with the

name what I want to call the series for

example let's say I wanna say

temperature then I can give it some

color

for example this and then I have an

option to choose among different type of

charts which which series type I want so

for this example I'll choose bar bar

type

next I have to provide my x-axis and

y-axis values so in this case I'll say

IB is my x-axis and y-axis I have a

value coming and I'm called X I will

also choose some of these options so

that we can see how they look we have an

option for show labels and we will just

see what that means in a minute show

points is also there which will which

I'll explain when we create a line line

type series lastly we have ignored empty

points which basically says that if a

point does not have a value it should

not be displayed rather than displaying

empty space for it so now that I have a

series I'll save this and we can reload

the chart on this side and you'll see

that the data has come through we chose

that color and we chose the bar series

you can see the box here is here with my

legend and since we chose the option to

to show labels we can see that each bar

has a label on it now let's jump into

the appearance options first of all I

have a rotated option which if I choose

will change or switch my X and y-axis

like that next we will see that for

x-axis I have certain options here

specifically that that excess line what

color should it have and I can specify

that color over there I can also choose

should that X's have gridlines and we'll

just see how they look like and if I

want gridlines like I can also choose a

color for them show labels basically say

is if these labels should be displayed

or not and if you want to choose a color

for those labels you can also do that

lastly we have a value margins enabled I

will enable that this time and you will

notice that this time these bars will

not

start at the very end of the Lexus so

let's save that much and refresh here

and you can see that my labels are gone

gridlines have come in and the bar is

there's a slight different distance

between the bar and X's this becomes

more visible if you're using charge like

line chart so let's let's continue and

add a few more options in y-axis we have

more or less similar stuff and we can

choose access color line color which is

this line you can choose if it should

display grid lines if you choose they

will see that there will be grid lines

going vertically over here again we have

color to choose for the grid line and if

we want to show these labels or not we

can also for the y-axis choose a minimum

and maximum value the chart will

automatically try to adapt with the

maximum value it finds and display you

the y-axis accordingly but if you want

to have a static value for it for

example I want my chart to always be

range from 0 to 150 I can do that by

choosing that and a very very related

option to that is how much how big of a

jump each step should have on this X's

as of now you can see there is a ten

point jump between each interval I can

change that and choose for example 30

lastly around the legend I can choose if

it should be visible or not and also

where on the chart should be displayed

if I change it to display at the at the

bottom center you will see that it will

move over there the legend has come come

across over here and we also change our

range on the y axis and you can see it

is now going from 0 to 150 in each

interval as of 30 now so those are some

of the appearance options on the

now chart can display more than one

series and you can choose different

combination of series we added a bar

type series here let's go ahead and try

to add another series which will be

let's say line line chart we can call it

pressure you can give it some color this

time we'll choose the line will keep the

same x-axis will change the value for

the y-axis now again I can choose labels

which will display labels like that for

each point points I will just show you

what means no empty points is same as

before now if I save and refresh on this

side we expect to see two items in our

chart which is a bar chart and also the

line C is going across which you can see

we chose show points and that points are

these go around circles so that is how

you use a chart control in app designer

thank you so much for watching