We are going to show you how to create a simple graph in Joget Workflow as a mean of reporting.
In this exercise, we are going to use the "HR Expenses Claim App" data to design the graph.
You can find the App in Joget marketplace if you do not have it.
On the left, we have the web browser showing the App.
On the right, we have the MySQL console for us to design our query later on.
Make sure that you are logged in as the administrator in Joget Workflow.
Toggle the quick edit mode. (Press CTRL+ 0)
Click on the link to open up the Userview in the Userview Builder.
The report that we are creating is meant to be viewed by the finance department.
So, drag the SQL Chart menu into the finance department category.
Rename the menu label, make it meaningful.
We are going to create a bar chart.
You can choose other types of graphs too.
Go to the next tab,
rename where it is necessary to make the graph labels meaningful.
Go to the next tab, SQL.
This is where we will need to put in a SQL query
that will serve as the data set for the graph generation.
Let's find out which database table to start with.
Go to the App's designer console.
This is the table name that we can start with.
Remember, all tables will have a prefix in eventual database,
app_fd_
So, in our my SQL console, let's look up the table first.
We can see that status column will be the key in shaping our eventual report.
We can use it to generate number of claims submitted by status report.
Write the query.
Copy it.
Go back to the Userview Builder.
Paste the query in there.
Save the Userview.
Go back to the actual Userview of the app.
Refresh
and click on the new menu item that we have just created.
Voila!
Here we go!
One little issue here
The legend is not right.
Edit it in the Userview Builder again.
We will need to modify the query.
Done!
So, just to recap,
first column in the data set, will be used for the x-axis label.
Subsequent columns will be used for y-axis data value,
to plot the graph.
Try out yourself too!
Thank you for watching.
