Workflow 5
Creating a Sales Analysis Dashboard
• Goal: To create a dashboard utilizing a custom chart and a flat file (CSV) as the data connector.
• Data Source: CSV files uploaded directly during the connection creation process in the Designer.
• Key Features: The core focus is the Custom Chart component. This requires configuring three external JavaScript Source Paths (S1, S2, S3) and inputting specific JavaScript code (utilizing Highcharts.chart) into the Source Content section to render a packed bubble chart. The dashboard also includes standard Pie Chart, Bar Chart, and Column Chart components. Aggregation scripts (e.g., sdk.applyAggregation) are added to the connections for the standard charts.
Creating a Sales Analysis Dashboard using a Custom Chart
Workflow 5 demonstrates how to create dashboards in the BDB Platform by using a flat file as a data connector and designing a custom chart through the Dashboard Designer Plugin.
Dashboard Designer Plugin
The Dashboard Designer Plugin is used to visualize the data using a dashboard. The Sales Analysis Dashboard is created by using the same.
The Components like Custom Chart,Pie Chart,Bar Chart, Column Chart, export component, image, bar, pie chart components are dragged and dropped into the dashboard editor. The data connectors are then created in the dashboard and configured with the Datasets created in the Data center plugin.
The Dashboard once completed can be published to the home plugin.
Creating a New Dashboard:
Navigate to the App Menu and select the Dashboard Designer module.
Click on + New and choose Dashboard Editor Page
Provide the name of the dashboard
Save the dashboard
Adding a Box Component:
Drag and drop the Box component into the Dashboard Editor.
Resize the box component as required.
In Style > Gradient, choose a background color (e.g., blue or any preferred color).
Click Save to apply the changes.
Adding a Dashboard Title:
· Drag and drop a Label component to display the title of the dashboard.
· Enter the desired title
· Adjust the label dimensions as needed.
· Modify font size, font color, and font style.
· Change the background color.
· Disable the Enable Hover checkbox if not required.
· Adjust the border color.
· Save the dashboard under the desired workspace.
· Provide a suitable name for the dashboard.
Adding a Custom Chart, Pie Chart, Bar Chart, Column Chart from charting Library:
· Drag and drop a Custom Chart component.
· In Properties, adjust the left position, height, and width to resize the chart.
· Right-click to access the Properties menu and adjust the overall dashboard size.
· Drag and drop a Pie Chart component.
· Resize it accordingly and align it with the Custom Bubble Chart.
· From the chart library, drag and drop a Bar Chart component.
· Adjust its height and width to fit within the UI layout.
· Drag and drop a Column Chart component from the chart library.
· Place it next to the Bar Chart, align it with the other components, and adjust its height and width in Properties.
· Under Background Properties, uncheck the Border option for all components.
· In Properties > General of the Custom Bubble Chart and Pie Chart, uncheck the Max button.
Configuring the Custom Chart:
In Properties > JavaScript, go to the Source Path.
Source Path
S1 https://github.highcharts.com/master/highcharts.js
S2 https://github.highcharts.com/master/highcharts-more.js
S3 https://github.highcharts.com/master/modules/exporting.js
Enter the three chart names along with their respective sources.
Click Save to apply changes.
Save the dashboard again to avoid losing any updates.
· Now Navigate to the Source Content section of the Custom Chart.
· Enter the required JavaScript code.
var flatData = bizvizchart.getData();
var i=0;
var data= [];
while(i<flatData.length)
{
var d = {name: flatData[i].Cluster , value: parseFloat(flatData[i].TotalRevenue) };
data.push(d);
i++;
}
var groupedData = {};
data.forEach(obj => {
if (groupedData[obj.name]) {
groupedData[obj.name] += obj.value;
} else {
groupedData[obj.name] = obj.value;
}
});
var arr = Object.entries(groupedData).map(([name, value]) => ({ name, value}));
arr.forEach(obj => {
var randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
obj.color = randomColor;
});
Highcharts.chart('container', {
chart: {
type: 'packedbubble',
},
title: {
text: ''
},
tooltip: {
useHTML: true,
pointFormat: '<b>{point.name}:</b> {point.y}</sub>'
},
plotOptions: {
packedbubble: {
minSize: 30,
maxSize:200,
dataLabels: {
enabled: true,
format: '{point.name}',
style: {
color: 'black',
textOutline: 'none',
fontWeight: '300'
}
},
minPointSize: 100,
maxPointSize: 1000
}
},
series: [
{
name: 'Baskets',
data: arr,
showInLegend: false
}
],
exporting: {
enabled: false
},
navigation: {
buttonOptions: {
enabled: false
},
menuStyle: {
overflow: 'hidden'
}
}
});
· Click Save to apply and store the source content.
· Update the HTML script within the source content, then click Save to apply the changes.
<div id="container" style="width:80%; height: 400px;" ></div>
Create a CSV Connection through Data Connector
Create a Connection for Custom Chart
· Create a new connection and name it "custom Chart".
· Upload the respective CSV file.
· Go back to the designer page and then map the data set
· Drag and drop the category and fields as shown in the video
Create a Connection for Pie Chart
· Create a new connection and name it "Pie Chart".
· Upload the respective CSV file.
· Go back to the designer page and Map the fields:
Item Type → Category
Total Profit → Series
· Enter the required script in the script area as per workflow instructions.
sdk.applyAggregation("pie4", "SalesChannel", "TotalProfit", "SUM");
· Preview the dashboard to verify changes.
· If changes are correct, save the dashboard.
Create a Connection for Bar Chart
· Create a new connection and rename it "Bar Chart".
· Upload the file from your local system.
· Map the datasets.
· Add the aggregated script in the script area can refer to Help section if needed.
sdk.applyAggregation("bar5", "Order Priority", "TotalCost", "SUM");
· Preview the dashboard to validate the bar chart display.
· Update the x-axis and y-axis descriptions, uncheck dataset description, and apply tilted labels with rotation as required.
Create a Connection for Column Chart
· Create a new connection and rename it "Column Chart".
· Upload the CSV file from your local system.
· Map the datasets to fields.
· Add the aggregated script in the script area can refer to Help section if needed.
sdk.applyAggregation("column6", "ItemType", "UnitCost,UnitPrice", "SUM,SUM");
Customize appearance:
Change column colors.
Rename display names for series fields.
Enable or disable data labels depending on readability disable if values are too large.
Modify chart properties:
Change bar base type to Rectangle.
Change chart type to Overlay.
Update axis properties:
Update descriptions for both axes.
Adjust tick marks, dataset descriptions, and label rotations.
Preview the dashboard to confirm the updates.
Customize the charts through Charting properties
· For the Pie Chart, change the chart type to Donut and uncheck “Show Subtitle.”
· For all Column, Pie, Bubble, and Bar charts.
Update the chart titles for all charts
Uncheck “Show Dataset Description.”
Preview the dashboard following every update to validate a clear and user-friendly layout.
Enter the dashboard name and save the dashboard
· Set the dashboard name as Sales Analysis Dashboard.
· Preview the dashboard to verify that all components are displayed correctly.
· Save the dashboard once the preview is validated.
· With this, Workflow 5 is successfully completed.
Last updated