This lesson is part of the Developing OutSystems Mobile Apps course.

Welcome to the mobile charts session. In this session the topics we would like to
cover are the charts. The mobile charts are available both in the toolbox
and the tree so we can sort of see that here the toolbox which is over to our
left hand side has all of the different charts that might be available.
We can also find them under Charts Mobile inside of the charts group the UI
group and then they have all of the different charts that are available
there. So these configurable chart types are sort of broken into groups there's
the line and area charts the column, and bar charts, and the donut and pie charts
and we'll look at all of those in a second.
There's also a debug chart that helps us create these other charts and what it
does is allows us to manipulate some of the configurations of those particular
charts a little bit quicker so that we can see the results instead of
constantly having to adjust or publish to be able to do that, and we'll
show and talk about some of the chart configuration in a little bit more
detail. So if we jump right in there are line and area charts. The line and area
charts both need data points. Ddata points are lists of of data that are going to
define whatever we're looking at. So whether it's a line or some sort of
percentage that's creating a circle but in this case it's lines and areas, so we
need the data points to define those and we need an X and Y axis that is
formattable, so we can sort of set what the data areas are going to be and what
the data points themselves actually represent. In this particular case you
can see that we have two different sets of data two lines that are representing
two different sets of information. In this case you can see from the legends
that we can put onto these that there's females and males. The lines
themselves have certain values and, in this case, when we do an area chart these
lines are stackable. So here you can see that the original line is right here, and
because the original line started at ten and then the second line started at ten
if we make these stackable as we did here now we can see that 20 different
people are from the main office and 10 of them are male are 10 of them are
female and we can sort of see the differences in how that works.
So, in this case, the males are on the upper line and the females represent the
lower line so we're stacking that information, so lines and area charts are
both available, and if we wanted to kind of show the cumulative accumulation you
can see that the chart can adjust as far as it's height and then go ahead and work on
those sections. So, after the line and area charts, there are column charts and bar
charts. So here you can see the different types of column and bar charts that we
might be interested in, again we'll need some sort of set of data points to
define what the columns are going to be here. We will be allowed to again
format the X and Y axis and and these are stackable as well. So here we're showing
them side-by-side but we could have stacked them on top of each other and
shown them as one big bar with just the two different colors representing
male and female again same thing on the bar chart. The data points will define
the rows in this particular case, X and Y are formatible again,
the areas are stackable. Fairly common themes here, and then finally we have the
donut and pie chart. So the pie chart's starting at the middle the donut chart
sort of leaving out the middle but showing the same type of thing
the only difference is you don't actually see the full pie wedge, you only
see kind of the outer ring but the data points will define the different
sections of the pie or the donut slices and the sections will be proportional to
the different values that are part of the set of data points. So those
are the different charts that are available.
There's also the debug chart and the debug chart will allow you to go ahead and say
okay what chart would you like to go ahead and be able to preview and then
once you choose a chart and place it with the debug chart then it will allow
you to customize that chart by changing any of the parameters that show up here
so once the chart is available you can change the configuration on the fly, and
update those parameters or reset them. So this makes a little bit faster to
visualize and change your chart, and actually see the the changes in some
sort of live way to make it a little bit easier. Now we did mention that all of these
charts are configurable. Now obviously we have a set of data points which is nice
but the question can be should we show the data point values? So along the lines
or the bar charts
should we actually show the numbers that represent the data. So by default the
numbers will be hidden and that will be false. Is the chart clickable? If the
chart is clickable then we would have on some sort of click capability, so we have
to define what was going to happen on the click with some sort of action, and
then should there be animations and by default when the chart comes up it will
be drawn and animations are set to true so it will draw that chart in a
particular way
and when we start talking about all of these configurations you can see that over
here we have lots of different inputs that come in as input to a chart, and a
number of these inputs are some of the configuration information that we're
talking about
so do we want to see the source datapoint list
do we want this to be clickable do we want to be able to have the animations
all of that type of information is being held by the chart itself. We also can
configure where the legend will be, so in a lot of those we saw where the offices
were and whether the data was representing male or female, we can move
that around. So it can be on the top to bottom
by default it will be the bottom, and we can move it into different parts of the
chart as well and then in some of the examples we've seen so far the charts
are stackable, and when they are stackable you have the choice of
choosing don't stack them, or stack them, and then stack them as a hundred percent.
So if we do stack them as a hundred percent it will basically sum up the
data and then show them as a percentage of the total, so certain types of stacks
that may make more sense for so that sort of built into the capability of the
charts. So let's look at an example. Here we may have a set of data that's showing
us the different types of information that we would be able to see. We might be
able to go out and get the local categories for our To Dos and our
priorities. For the To Dos and down below you can see that when we create
the donut chart to be able to do that we have to show the data, as to where it's
coming from, so here we're saying that in the donut chart, we want get local
priorities so this is an aggregate that's getting all of the local
priorities and when the local priorities come back we're using a true aggregate
here where we aggregate
the labels and aggregate the counts and when we aggregate those labels and
counts we're going to put that inside of the datapoint list. So the data points that
are available are going to match what we get out of the priorities, so the mapping
is a nice thing to have we used to have to kind of sometimes do that translation
now we have the capability of doing the mapping but we also can say how tall the
chart should be where the legend is going to be if it's clickable so a
number of those configuration points that we talked about are here and
available. So in summary we have charts available for the mobile devices and
they're pretty easy to work with
we have different types of charts so you can choose the one that you like.
While you're working with them you'd be able to debug the chart and change some
of the configurations to be able to see how the data looks in different
configurations. So this is just a quick overview the easiest way to understand
the charts and get more comfortable with them is to actually work with them so as
part of learning about this it's good to be able to do the exercises that show
off how some of these work and look at some of the sample pages that shows some
of the more complex charts.