Workflow 3
Creating a Candidate Dashboard
Goal: To create an interactive dashboard by connecting a flat file directly through the Dashboard Designer plugin.
• Data Source: An Excel sheet uploaded directly within the Designer's connection settings.
• Key Process: Focuses on designing the layout and linking multiple visualizations to a single data filter.
• Key Features: Utilizes a Mixed Chart, Data Grid Chart, Tree Map Chart (with Parent hierarchy type), and Area Chart for visualizations. It includes a Combo Box for filtering by the "Team" field. Crucially, a condition is added to the Data Connectors to link the filter box with the data in all charts, ensuring dynamic updating across all visualization components based on the selected Team. A Graphics component using the SVG option is utilized to add a refresh logo
Creating a Candidate Dashboard Using Dashbaord designer plugin
Workflow 3 provides users with a clear understanding of creating interactive dashboards by connecting a flat file through the Dashboard Designer plugin.
Plugin 1: Dashboard Designer Plugin
The Dashboard Designer Plugin is used to visualize data by creating interactive dashboards. In this workflow, a Candidate Dashboard is designed using the plugin.
Components such as mixed charts, combo box filters, graphics, filters, data grids, tree maps, export tools, area charts, images, bar charts, and pie charts can be dragged and dropped into the dashboard editor.
Once the layout is designed, data connectors are created within the dashboard and linked to datasets prepared in the Data Center Plugin.
· From the BDB Platform homepage, click the Apps icon and select Designer.
· Create a new dashboard by clicking New → Dashboard.
· Provide a suitable name — for example, Candidate Dashboard — and then click on Save button.
Add box and label component for Dashboard Title
Open the Components Library and search for Box.
Drag and drop the Box component into the Designer workspace.
Adjust its size.
To change the color:
Go to Style → Gradient.
Select the desired color scheme.
Save the dashboard.
From the Components Library, search for and add a Label component.
Adjust the size and dimensions as needed.
Go to the General tab → update the title to Candidate Dashboard.
Adjust the font size and styling as required.
Add a Label and Combo Box component for Team Tab
From the Components Library, add another Label inside the box.
Rename it to Team.
Adjust the size accordingly.
Search for Combo Box in the library.
Drag and drop it inside the box.
Adjust the size and position.
Change the background color to enhance the visual appeal.
Add Export and Image Component for Export button
From the Components Library, search for Export.
Drag and drop it into the dashboard.
Adjust its size and dimensions.
Update the background color as shown in the video.
· Add an Image Component
From the Components Library, select Image.
Place it on the right side of the box.
To upload an image:
Go to General → Browse Image.
Select the required image from your device.
Save the dashboard once the image is visible.
Creating a Visualization Component
From the Components Library, add another Box component.
Adjust its size and dimensions as required.
Duplicate the box and create four boxes in total.
To increase the dashboard height:
Click on the dashboard → open Properties → Size.
Increase the height as needed.
· Add Charts to the Boxes from the charting library.
Add a Mixed Chart in the First box. Adjust height and width.
Add a Data Grid Chart in the Second box and adjust its size.
Add a Tree Map Chart in the Third box and adjust dimensions.
Add an Area Chart in the fourth box and configure its layout.
From the Components Library, add a Graphics component.
Adjust styling to make it visually appealing.
To add a refresh logo:
Go to Properties → General → SVG option.
In the pop-up, click the top-left corner.
Copy the required name as shown in the video.
Before pasting, type “BD” followed by the name.
Set Category as “None” to make the logo visible.
Save the dashboard.
Creating a Connections for the charts
Go to the Datasets icon.
Click the plus (+) symbol next to the Excel option.
Upload the Excel sheet directly from your device.
Provide a connection name and select the required Excel file.
Use the same Excel sheet for all 4 connections in this dashboard.
Save the dashboard
Mapping Datasets to Visualization Components
Mapping the dataset for Mixed chart
Select Connection-1 under Connection.
Set Team as the Category.
Add the fields offered_CTC and previous_CTC as values.
Click Save.
Mapping the dataset for Data Grid chart
Select Connection-2.
Add all the required columns fields as shown in the video.
Save the dashboard.
Mapping the dataset for Tree Map Chart
Select Connection-3.
Set the Source hierarchy type as Parent.
Save the connection and the dashboard.
Mapping the dataset for Area Chart
Select Connection-4.
Map all the relevant data fields to the Area Chart as demonstrated in the video.
Save the dashboard.
Applying Filter Conditions for Team Field
· Navigate to Data Connectors.
· Add a condition for the Team field.
This links the filter box (Team Combo Box) with the Team data in all charts.
· Repeat the same condition setup for each connection used in the dashboard.
Creating Data Connection for the Filter Box
Go to Data Connectors and add the same Excel file used for the previous connections.
Open the Combo Box (Team Filter) component in the dashboard.
Configure the dataset connection by selecting the newly created filter connection.
Fill in all the required fields as demonstrated in the video.
Click Preview to test the dashboard.
The data in all visualization components (Mixed Chart, Data Grid, Tree Map, and Area Chart) updates dynamically based on the Team selected from the filter box.
The JavaScripts used in the Candidate Dashboard are as follows:
Tree Map Filter Script (Dashboard Script)
sdk.applyDataSetFilter("treemap13", ["order by [skills] asc", "limit 10"]);
sdk.reload(["C_1"]);
Mixed Chart Filter Script
var a = changedItem.attributes.offered_ctc;
var b = "offered_ctc=='" + a + "'";
sdk.applyDataSetFilter('datagrid16', [b]);
sdk.reload(["C_2"]);
Area Chart Aggregation Script
sdk.applyAggregation("area16", "skills", "offered_ctc", "AVG");
Refresh Component Script
sdk.removeDataSetFilter("datagrid16");
sdk.reloadDataset(["mix7"]);
sdk.reloadDataset(["datagrid16"]);
The Dashboard once completed can be published to the home plugin.
Last updated