More UI Patterns with OutSystems Widgets
Show Data using Charts
This lesson is part of the Developer Online Class for OutSystems 9 course.

in this lesson we will add two charts to the dashboard for a quick analysis
over the issues of the application in one chart
we want to represent the proportion of issues by priority
and on the other chart we want to show the number of
issues submitted over the last seven days so let me first just
add here some structure to the page to hold this chart I will add the container
below these lists and
another container inside this one that I will size to
six columns so this will be one of the containers for the charts
I will add another container next to this one
for the second chart now let me add another container for the title
of the first chart and this will be
the workload and set the style of this container to be
heading one and let's remove here this margin that we don't need
let me add a container below this one
there and
now I want to add a chart here
on this container and the charts pretty much like the widgets in the previous
they are available by default when you create a new eSpace module
you'll find them under this charts option here
and the chart that I want to use for the proportion of
issues is a pie chart so let me just add here
to the container and this pie chart widget
works pretty much like the table records
or the list records we need to feed it with
a lists of records that will represent
the data points of the chart and these
these records they have a structure
and this structure is... you'll find it here under the charts option
the is the data point structure so this structure represents
a value in the chart so for this first
chart the workload pie chart we need to create
variable here which will be the workload
and this will be a record list
of data points
so this variable will have the list of values to
show on the chart so we need to bind it to the chart
and I'm also going to set the height of the chart to be 200
now we need we need to initialize this list
with the values that we want to represent on this chart and we'll do that
on the preparation of the screen and the values that we want to show on the chart
are the number of high priority issues
the number of low priority issues and the number
of issues that are unclassified now
we already have here a couple of queries that get me
the high priority issues and the low priority issues
we can use the count property of these queries
to get those values we need to have
the number of unclassified issues as well and we're going to reuse the action
that we created on a
previous video so let's go here to the logic
this action here count issues by priority
and using this action with
the priority ID set to null
we're going to count the number of unclassified issues
so we have everything that we need now we need to
initialize our list our record list
of data points and to do that I'm going to use another
action that comes from this charts component
This is the DataPoint_Init action
basically this action initializes a record
of that structure data point so we need to pass these values here
the label and the value these are the mandatory ones
and we're going to pass also the color for this pie chart
so let's let's go ahead and do this the label
so the first value will be for the high priority
and the value for the high priority we'll get it from the
count property up his query
there now we need to set also the color
and I'm going to use the same color we used for the CSS
for the the dashboard page in this case this is going to be
and and that's it so we have a record
for our chart what we need to do now is to add
this record to our workload record list
and to do that I'm going to use another action here
this is a built-in action called ListAppend
this first one
basically this action appends do this first parameter to the record list
let's select here workload it appends to this record list
the record that we just initialized with this action
this one and that's it for the high priority
we need to repeat these steps for the other two values so let me just get some
space here
I'm going to copy/paste these two nodes
and reconnect here the ListAppend to
this other node now for this data point initialization
we're going to set the low priority value
and again the value comes from the count property
and now from this other query
there and we're also going to set the color
so let me just delete this and the color for the low priority
is let me just put here the hash sign
and we need to append now this data point to our workload
and actually this is already fixed for me
when I copy pasted this was already fixed so
it is appending the data point from
this initialization so it's done let's finish this chart
with the third value so again copy paste these
two nodes and connect these ones
and on this DataPoint_Init3 we're going to set the value for the
unclassified so this will be for the unclassified
issues and we will get that value from
the action in this case not the query the action
that we used to count the unclassified issue so this value here
and we'll also set the color for this one
and the color will be all a values
so 6 A's here and we're done so let's just connect this
and our chart is done let's just do the second chart before we publish so that
we can see
everything in place so again coming back here to the dashboard
our pie chart is done let's have
a title for our second chart so again add a container
here this will be a Heading1 for the title
and this will be the submitted issues
and let me just remove here this margin
so add another container below this one
and the chart that we're going to use in this case this will be a line chart
and again pretty much like the pie chart we need to have
a record list of data points so
I'm going to show you another way for you to initialize
a record list of data points and and the way that we're going to do this
since this data point is a structure
we can use this structure as an output
of an advanced query so let's go ahead
here to the preparation and
let's add and advanced query here
add this will be the get submitted
issues and let me just arrange here the flow
double-click set the output structure
of this advanced query to be data point
and now I'm going to copy/paste
the SQL from the clipboard I'm not going into too much detail about this SQL
here but it basically gets me the number of issues in
each day from the last seven days and now I need to bind
the output at this query I'll need to bind this
output to my widget on the screen
so here this will be the output of this query
and again I'm going to set the height of this chart to be 200 as well
and we're all done so let's publish and see our application
and here we have our application
our dashboard now with a couple of charts
showing the workload and the number of submitted issues
over the last seven days And that's it!