Report on metrics with dashboard

Yeeflow team
Yeeflow team
  • Updated

Understand dashboards

As an application user, when you have collected enough data using multiple data lists and forms, you go for insights, using the Data Analytics component. Now, the primary rationale of collecting such vast amounts of data and generating reports is to measure, monitor and manage this information, to improve decision making and optimizing various business processes.

Dashboards in Yeeflow help you in achieving this objective. Using Dashboards, you can aggregate and extract values from the data collected, convert them into manageable chunks of visual information and create a detailed overview of your business on a single screen. 

Dashboard_Overview__1_.jpg
Page built using Yeeflow Dashboards

 

The distinguishing factor of a dashboard is it's visual intuitiveness. Pages put up information in various views such as graphs, buttons, panels, forms, reports, embedded links and so on. You can create custom screens to represent data collected from various sources to provide an expansive view of complex data. 

For example, in an Order Management application, a page can be used to create a dashboard, that displays:

  • Customer Scorecards
  • Gross Profit metrics
  • Top Orders
  • Customer payment trends
  • Regional sales performance
  • Order Backlogs

In a dashboard page, you can include data from any application in your Yeeflow account. For example, a delivery feedback survey from your Order Management application can be included into your Employee Management application. This cross application interaction helps in collaborating data from different applications in one place. 

Based on who is viewing the dashboard page, the data to be displayed on it varies. Different types of users look for different types of information, on the fly. An application need not necessarily have a page as a dashboard full of information, but many different dashboard pages with only relevant information based on the use case, catering to a specific audience. 

For example, a shipment delivery agent will simply overlook the Regional sales performance trend or Top selling items report. This information, displayed on his page is futile. When in fact, information like Order Backlogs count, Reorder items report etc. are relevant in his perspective.

With this idea, we need to figure out which element demonstrates the information in the most insightful way. Data visualization plays a key role in delivering critical information. And thus, choosing the right components to add to a dashboard page is very important.

 

Take action: Report on metrics with dashboard

Follow up the creation of our Projects for excellence application. In this stage, we’ll walk through how to create a dashboard to present data with great design.

 

Step 1: Create a new Dashboard

Firstly, let's open the Projects for excellence application. From the top navigation menu bar, click the "+" button to open the create new component form. Then click the "Dashboard":

Components_Dashboard.jpg

 

From the New Page pop-up window, set the page name as "Reports", and select "Advanced" from the Layout radio buttons. Click "OK" button to create a new Dashboard.

Dashboard_New_Page.jpg

 

After the page is created, click the blue "EDIT PAGE" button in the middle of this page, to open the Dashboard page designer. 

 

Step 2: Add a top banner on this page

Firstly, click and drag a section into the canvas. Select this section, and from the left settings panel, go to "Layout -> Layout". Select Min Height from the the dropdown list of Height, and set the Min Height as 200px.  

Then go to the Style tab, in the Background section, click the Fill button to active the Background Type. Set the background color as: #FFE4B6. In the following background image option, click to upload an image as the background of this section. Then, set the position as Bottom Right, Repeat as No-Repeat and size as Contain. 

 Next, go switch to Advanced tab, and set the padding to 20px.

 

Dashboard_Section1.gif

 

Click the "+" button from the top-left of the page designer to open the "add controls" panel. Click and drag the "Title" control into the section. Set the text of Title to "Reports of Projects" and change the Size to XL.

Click and drag another "Title" control to add after the previous Title control. Set the text of title as below:

"Provides detail on the overall status of the project or specific aspects of the project's progress or performance. Regardless of the type of report, it is made up of project data based on economic, technical, financial, managerial or production aspects."

 

Select the size of this title as Small. Then go to the Advanced tab, and set the padding as 20px. Click to expand the Background section. Then click to select the Fill background type, and set the background color as #FFFFFF, and change the Transparency to 20% (which is 80 of the last value in the color picker control). 

 

Dashboard_Section2.gif

 

Click the Submit button on the top-right of the dashboard page designer to save all those changes.

 

Step 3: Add Data Analytics controls

Click and drag a new section to the canvas, and drag to add a Title control inside. Change the text of the title to "Data Analytics", and set the size as Medium.

Go switch to the Advanced tab of the Title settings panel, and set the padding as 10px. Then, click to expand the Background section. Click to select the Fill background type, and set the background color as #F4F4F4. Click to expend the Border section, and set the border-bottom as 2px.

 

Next, add another section after the previous one. Click the settings button of the default column. From the pop-up menu, click "+ Add Column" to add additional 2 new columns in this section.

 

Dashboard_Section3.gif

 

Add and configure the Pie Chart

From the Add controls panel, scroll down to the Data Analytics group. Select the Pie Chart to add to the first column of the above section. Click the select this Pie Chart control to open the settings panel. In the "Content -> Data Source", select Projects from the List dropdown list.

 

Then, expand the Chart section. Select Category (the Category field of the Projects data list) from the Category dropdown list. And Select Id from the Value's dropdown list. 

Next, expand the Settings panel. Turn On the Display Title option, and set the Chart Title as "Projects by Categories". Select "Before Chart" from the Title Position.

 

Switch to the Style tab. In the Title section, click the Edit button of the Typography option. From the pop-up dialog, change the font-size to 20px. Then, set the Margin-bottom of this Chart Title as 20px.

 

Click the Submit button to generate the Pie Chart.

 

Dashboard_PieChart.gif

 

Add and configure the Column Chart

Go the the Data Analytics group and drag the Column Chart into the second column this the above section. 

 

Click the select this Column Chart control to open the settings panel. In the "Content -> Data Source", select Projects from the List dropdown list.

 

Then, expand the Chart section. Select Owner (the Owner field of the Projects data list) from the X-axis (Category) dropdown list. And Select Id from the Y-axis (Value)'s dropdown list. 

 

Next, expand the Settings panel. Turn On the Display Title option, and set the Chart Title as "Projects by Owners". Select "Before Chart" from the Title Position.

 

Switch to the Style tab. In the Title section, click the Edit button of the Typography option. From the pop-up dialog, change the font-size to 20px. Then, set the Margin-bottom of this Chart Title as 20px.

 

Click the Submit button to generate the Pie Chart.

 

Dashboard_ColumnChart.gif

 

Add and configure the Line Chart

Go the the Data Analytics group and drag the Line Chart into the third column this the above section. 

 

Click the select this Line Chart control to open the settings panel. In the "Content -> Data Source", select Projects from the List dropdown list.

 

Then, expand the Chart section. Select Start Date (the Start Date field of the Projects data list) from the X-axis (Category) dropdown list, and select Month from the next dropdown list. Then, select Id from the Y-axis (Value)'s dropdown list. 

 

Next, expand the Settings panel. Turn On the Display Title option, and set the Chart Title as "Projects Monthly Trend". Select "Before Chart" from the Title Position.

 

Switch to the Style tab. In the Title section, click the Edit button of the Typography option. From the pop-up dialog, change the font-size to 20px. Then, set the Margin-bottom of this Chart Title as 20px.

 

Click the Submit button to generate the Line Chart.

 

Dashboard_LineChart.gif

 

Click the "X Close" button from the top-right of the page designer to complete and exist from the designer model. 

 

Step 4: Access Dashboard

After the dashboard page is ready, you can view this page inside in the "Projects of excellence" application by click "Reports" from the top menu.

Reports_of_Projects.jpg

 

To modify this Dashboard, click the "Edit Page" button on the top-right to open the designer.

 

Was this article helpful?

/

Comments

0 comments

Please sign in to leave a comment.