Workflow 6
Creating a Sales Analysis Dashboard using Data store as Input source
Goal: To create a Sales Analysis Dashboard using an existing Data Store as the data source.
Data Source: ClickHouse Data Connector, with published datasets prepared via SQL queries (e.g., Time Series Dataset and Bar Chart Dataset).
Key Features: The workflow emphasizes building specific datasets tailored for time-based visualization and using components like Pie Chart, Bar Chart, and Time Series Chart. The steps detail intensive customization of chart properties, including setting background color, title box color, font color, and adjusting axis descriptions and units. The datasets are mapped to their respective chart components to display data over time and item types
Creating a Sales Analysis Dashboard using a Data Store
Workflow 6 demonstrates the process of creating dashboards on the BDB Platform by using a Data Store as the data source and the Dashboard Designer Plugin.
The Dashboard Designer Plugin is used to visualize data by designing interactive dashboards. In this workflow, a Sales Analysis Dashboard is created.
Components such as Pie Chart, Bar Chart, and Time Series Chart can be dragged and dropped into the dashboard editor.
Within the dashboard, data connectors are created and configured with the Data Store prepared in the Data Center Plugin.
Plugin 1- Data Center Plugin
Create a Data Connector
Navigate to the App Menu.
Open the Data Center module.
click on “create+” for create a new connector.
Select ClickHouse Data Connector as the data source.
Enter the following details like Connector Name,Username,Password,Host (IP), TCP Port Number,Database Name
Save the connector.
Create Time Series Dataset in Data Center
· Navigate to the Data Connector in the Data Center.
· Click on the three dots on selected data connector and then select the create data set
· Then Provide a dataset name.
· Enter the SQL query for the Time Series chart.
SELECT
Region,
toYear(toDate(OrderDate)) AS OrderYear,
SUM(TotalRevenue) AS TotalRevenue,
SUM(TotalProfit) AS TotalProfit
FROM
sales_world_training_data
GROUP BY
Region, OrderYear
ORDER BY
OrderYear, Region;
· Validate the query.
· Save and publish the dataset.
Create Bar Chart Dataset in Data Center
In the Data Connector, click on the three dots and create a new dataset.
Provide a dataset name.
Write the SQL query for the Bar Chart component.
SELECT
ItemType,
SUM(TotalProfit) AS Total_Profit
FROM
sales_world_training_data
GROUP BY
ItemType
ORDER BY
Total_Profit DESC;
· Validate the query.
· Save and publish the datasets.
Plugin 2-Dashboard Designer Plugin
Open the Designer module for visualization.
Click the New (+) option to create a dashboard.
Save the dashboard.
Provide a name for the dashboard.
Save it in the desired workspace.
Configure Dashboard Properties
· Right-click on the dashboard and select Properties.
· In the Properties Menu, choose the Background Color option.
· To pick a color:
Click More Colors.
Select the preferred shade.
Save your selection.
Adjust the dimensions of the dashboard by resizing as per requirements.
Add and Customize Components
Adding a Box Component
Drag and drop the Box component.
Adjust its size under Properties.
Change its background color under Style if required.
Adding a Label Component
Drag and drop the Label component.
Adjust its size by configuring Left, Top, Right, Height, and Width.
Modify background color if needed (additional shades can be applied).
Adjust font size.
Change font weight to Bold.
Set Text Alignment to Center.
Choose any font color and font family of your choice.
Save the dashboard.
Adding and Configure Pie Chart
Drag and drop the Pie Chart component.
Under General Properties, adjust Left, Top, Height, and Width.
Under Background, choose the color of your choice.
Update the Chart Title.
Uncheck Show Dataset Description.
Modify the Title Box Color, Font Color, and Font Size.
Under Formatter, select Percentage as the unit.
Create a new connection and name it “Pie Chart”.
Upload the respective CSV file.
Under Connections, select the created connection.
Map the datasets accordingly.
Provide the required JavaScript code for the Pie Chart component.
sdk.setData("pie_units_sold", "itemwise_unitcost_unitsold");
sdk.setChartType("pie_units_sold", "pie");
sdk.setCategories("pie_units_sold", ["itemtype"]);
sdk.setSeries("pie_units_sold", ["UnitsSold"]);
sdk.applyAggregation("pie_units_sold", "itemtype", "UnitsSold", "SUM");
Add and Configure Bar Chart
Drag and drop the Bar Chart component.
Adjust the Left, Top, Height, and Width.
Change the Background Color.
Add a Title in the description field.
Uncheck “Show Dataset Description.”
Modify the Title Box Color, Font Color, and Font Size.
Update the X-Axis Description.
Uncheck Show Dataset Description for the X-axis.
Update the Font Color for axis labels.
Update the Connection Name and remap the dataset features.
Preview the dashboard to verify changes.
Adjust chart colors as needed.
Add and Configure Time Series Chart
Drag and drop the Time Series Chart component.
Adjust its dimensions to align with other components.
Change the Background Color using the Gradient option.
Update the Title Box Color and Font Color and adjust the Font Size.
Update the X-Axis Description and uncheck “Show Dataset Description.”
Update Font Colors for X and Y axes.
Add a Description for the Y-axis and uncheck “Show Dataset Description.”
Under Formatter, select Auto for units.
Enable Show Axis Label for the second axis.
Update the Second Axis Description and adjust font size and color.
Change the Title Font Color and increase its size.
Add the connection through Data Connector
Add a connection under Data Service.
Select the data connector.
Choose the Bar Chart dataset.
Map the dataset to the Bar Chart component.
Rename the connection as needed.
Choose the Time Series Chart dataset.
Map the dataset to the Bar Chart component.
Rename the connection as needed.
Map Dataset to Charts
· In the Bar Chart:
o Drag Item Type into the Category field.
o Drag Series field into the Series field section.
· Apply custom colors for items in the series field.
· Update the label text as required.
· Map the data set for Timeseries chart
· Drag and drop the fields as shown in the video
· Save the dashboard
· And preview the dashboard to confirm that all changes are reflected
· Save the dashboard again
Note: The Dashboard once completed can be published on the home plugin.
Last updated