How to work with Charts in Outsystems?
Many have quetioned about incorporating charts in Outsystems, and it’s known that there’s flexibility in using different types of charts within the platform. While Outsystems provides documentation, it may not always be straightforward. This post aims to clarify by demonstrating how to implement 3 specific types of charts, ultimately leading to the creation of the dashboard pictured below.
To achieve these results, we’ll need to follow a few steps:
- Data Preparation: Ensure that all necessary information is gathered and organized.
- Column Chart: Use this to depict the total number of items sold by each seller.
- Donut Chart: Utilize this for illustrating the total units sold by region.
- Area Chart: Finally, showcase the total sales over different dates.
Let’s get started! =)
1. Preparing the data
Begin by downloading the data from the provided link, labeled as “Office Supply Sales Data.” Once downloaded, open the file and ensure that any extraneous sheets in the Excel document are removed. Your final dataset should look like the image given below for accurate results.
Note: It is crucial to carefully review the data to gain a comprehensive understanding of how it can be manipulated. This understanding is fundamental in effectively demonstrating the value of the information.
Step 2: Column Chart
As you’re aware, column charts are highly effective for comparing and visualizing data across various categories, proving invaluable in scenarios like sales analysis, budget allocation, and market research. In this case, we’ll employ it to illustrate the total items sold by each seller, further broken down by the items themselves.
Please note that the examples provided may not be flawless solutions; they are intended solely for learning purposes. Let’s get started!
It’s important to note that you can’t simply retrieve an aggregate and display your data in Outsystems. More complex requests are necessary for using it in Outsystems.
Navigate to the Data tab, create a new Structure named “TotalPerRep,” and include three items: Total (Decimal data type), Rep (Text data type), and Item (Integer data type).
Next, proceed to create a new data fetching operation by selecting “Fetch data from other Sources.” Ensure that the output data type is set to “TotalPerRep List.”
Now, we will aggregate the sales data by the total amount per seller, and for added granularity, we will also group it by items.
Ensure that you have thoroughly tested your SQL request before assigning it to the output variable created earlier. Your action setup should resemble the image provided below.
Next, drag and drop the Column Chart widget onto the screen, and assign the list variables to the chart values.
Interesting to note: In many cases, Column and Bar Charts can be interchangeably used to display similarly styled data. You have the flexibility to easily swap between them.
Publish the changes and test it on the screen.
3. Donut chart.
Next, let’s move on to creating a donut chart. Donut charts are especially effective for showcasing categorical data, placing a strong emphasis on the proportions or percentages of each category. This makes them well-suited for illustrating market shares, survey responses, or budget allocations.
We’ll follow similar steps as before.
For this donut chart, our objective is to display the total count of units per region.
Start by creating a structure with two items: Unit (Integer data type) and Region (Text data type).
Return to your screen and initiate a new data fetching operation from another source. Confirm that it produces an output variable named UnitsPerRegion List.
Now create SQL request and group by Region for SalesOrder.
Ultimately, your action should resemble the configuration depicted in the image below:
Lastly, drag and drop a donut chart onto the screen and assign the respective values.
Interesting to note: In many cases, Pie and Donut Charts can be used interchangeably to present similarly styled data. You have the flexibility to seamlessly switch between them.
Assign values.
Now, proceed to publish your project and test the results. By this point, you should have two dynamic charts in your application.
Enjoy exploring your visualized data! =)
4. Area chart
Let’s proceed with the next set of actions. Final one!
Begin by creating a structure named DatePerTotal. This structure should contain three items: Date (Date data type), Total (Decimal data type), and Region (Text data type).
Create new action for your chart. Make sure it has DatePerTotal List data type.
Finally, your SQL request should be configured as shown in the image below:
The finished fetched data structure should resemble the one depicted in the image below:
Next, navigate to the screen and add an Area Chart element. Then, assign the corresponding values.
Interesting to note: In many cases, Line and Area Charts can be used interchangeably to display similarly styled data. You have the flexibility to effortlessly switch between them.
Assign values.
Save your progress and proceed to test it on the screen.
Congratulations, you have successfully created your basic charts!
BONUS
Let’s add proper data synchronization actions to our source charts. My screen actions look like this
I’ve implemented a queuing system to ensure efficient and timely data retrieval. By prioritizing specific aggregates, I aim to keep requests concise and well-organized. This allows for critical data to be loaded promptly at the start, while others are fetched as needed using the OnAfterFetch action.
Feel free to explore and reach out with any queries! =)
