Create a Sales Analysis Dashboard Using a Custom Chart and Flat File

Creating a Sales Analysis Dashboard

· Now Navigate to the Source Content section of the Custom Chart.

· Enter the required JavaScript code.

var flatData = bizvizchart.getData();

Purpose

This guide provides a step-by-step process to design and configure a Sales Analysis Dashboard using flat file (CSV) data and a custom-packed bubble chart implemented with Highcharts JavaScript libraries. It demonstrates how to integrate custom code with standard dashboard components such as Pie, Bar, and Column charts, and how to apply aggregation logic for interactive visualizations.

---

Business Context

Organizations often need to visualize sales performance and profitability using both standard BI visuals and custom charts that provide unique data perspectives. This workflow enables analysts to:

• Upload CSV files directly as data sources within the Dashboard Designer.

• Implement custom charts using external JavaScript (Highcharts).

• Combine multiple chart types and aggregation scripts for real-time data analysis.

---

Key Highlights

Category	Description
Goal	Build a Sales Analysis Dashboard using a CSV file as the data connector and a custom JavaScript chart.
Data Source	CSV file uploaded during connection creation within the Dashboard Designer.
Key Components	Custom Chart (Packed Bubble), Pie Chart, Bar Chart, Column Chart.
Custom Chart Setup	Three external Highcharts scripts integrated (S1, S2, S3) and Highcharts.chart() JavaScript code in Source Content.
Scripts Used	sdk.applyAggregation() for standard charts.
End Result	Interactive dashboard combining standard charts and a dynamic Highcharts-based packed bubble visualization.

---

Workflow Overview

Step	Description
1	Create a new dashboard using the Dashboard Designer Plugin.
2	Add standard UI components like Box and Label for layout and titles.
3	Add Custom, Pie, Bar, and Column charts.
4	Configure Custom Chart with JavaScript and external library paths.
5	Create CSV-based connections for each chart and map fields.
6	Apply aggregation scripts to the standard charts.
7	Customize visuals and preview for final validation.

---

Step 1 – Create a New Dashboard

1. Navigate to the App Menu → Dashboard Designer.

2. Click + New → Dashboard Editor Page.

3. Provide a dashboard name (e.g., Sales Analysis Dashboard).

4. Click Save to initialize the workspace.

---

Step 2 – Add Layout Components

2.1 Add a Box Component

1. From the Components Library, drag and drop the Box component onto the workspace.

2. Resize the box as needed to serve as the dashboard header.

3. Go to Style → Gradient → select a background color (e.g., blue).

4. Click Save.

2.2 Add a Label Component (Dashboard Title)

1. Drag a Label component into the header box.

2. Enter the title Sales Analysis Dashboard.

3. Adjust:

   • Font Size → 24 pt

   • Font Weight → Bold

   • Font Color → White (recommended)

4. Optionally disable Enable Hover and modify the border color.

5. Save the dashboard again.

---

Step 3 – Add Chart Components

3.1 Add the Custom Chart

1. From the Components Library, drag and drop Custom Chart.

2. In Properties → General, adjust position, height, and width.

3. Right-click on the dashboard background → select Properties → modify overall layout dimensions if needed.

3.2 Add Standard Charts

Chart Type	Action	Placement
Pie Chart	Drag from library and resize.	Beside the Custom Chart.
Bar Chart	Add from library and align properly.	Below or adjacent to Pie Chart.
Column Chart	Add from library and align horizontally.	Beside Bar Chart.

Tip: To maintain consistency, uncheck Border under Background Properties for all charts.

---

Step 4 – Configure the Custom Chart

4.1 Add External JavaScript Libraries

1. Select the Custom Chart → open Properties → JavaScript → Source Path.

2. Enter the following three source paths:

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

1. Click Save after entering the source paths.

2. Save the dashboard again to avoid losing configurations.

4.2 Add Custom JavaScript Code

In Properties → JavaScript → Source Content, paste the following 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++;
}

// Grouping data by cluster
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 }));

// Assign random colors
arr.forEach(obj => {
  var randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
  obj.color = randomColor;
});

// Render Packed Bubble Chart
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' }
  }
});

4.3 Add HTML Container

Under Source Content, paste the following HTML snippet below the code:

<div id="container" style="width:80%; height:400px;"></div>

Click Save to apply the changes.

Step 5 – Create CSV Data Connections

5.1 Connection for Custom Chart

1. In the Designer, click the Connector (Plug) icon → Add Data Service.

2. Name the connection Custom Chart.

3. Upload the respective CSV file (e.g., sales_revenue_by_cluster.csv).

4. Save the connection.

   
5. Return to the designer and map fields:

   • Category → Cluster

   • Value → TotalRevenue

5.2 Connection for Pie Chart

1. Create a new connection named Pie Chart.

2. Upload the CSV file.

3. Map fields:

   • Category: Item Type

   • Series: Total Profit

4. Add aggregation logic under Script:

   sdk.applyAggregation("pie4", "SalesChannel", "TotalProfit", "SUM");

5. Preview the dashboard to validate.

5.3 Connection for Bar Chart

1. Create a connection named Bar Chart.

2. Upload your CSV file.

3. Map fields appropriately.

4. Apply aggregation logic:

   sdk.applyAggregation("bar5", "Order Priority", "TotalCost", "SUM");

5. Adjust X and Y axis titles, and use rotated labels for clarity.

5.4 Connection for Column Chart

1. Create a connection named Column Chart.

2. Upload the CSV file.

3. Map:

   • Category: ItemType

   • Series: UnitCost, UnitPrice

4. Apply aggregation logic:

   sdk.applyAggregation("column6", "ItemType", "UnitCost, UnitPrice", "SUM, SUM");

Step 6 – Customize Chart Properties

6.1 Pie Chart (Donut Style)

• Change Chart Type → Donut.

• Uncheck Show Subtitle.

• Update chart title → Sales by Channel.

• Uncheck Show Dataset Description.

6.2 Column Chart

• Change base type → Rectangle.

• Set chart type → Overlay.

• Modify:

  • Series colors

  • Axis descriptions

  • Tick mark alignment

  • Label rotation

6.3 Bar Chart

• Update chart title → Profit by Order Priority.

• Adjust bar thickness and alignment.

• Disable data labels if values overlap.

Step 7 – Validate and Preview

1. Click Preview Dashboard in the top-right corner.

2. Verify:

   • Custom-packed bubble chart renders correctly.

   • Pie, Bar, and Column charts display aggregated data.

   • Axis titles, legends, and styles are aligned.

3. Save the dashboard.

Step 8 – Publish the Dashboard

1. Click Save → Publish.

2. Choose a workspace or share with relevant users.

3. The Sales Analysis Dashboard is now visible under the Home page.

Outcome

• Dashboard successfully integrates CSV data for visualization.

• Custom Packed Bubble chart implemented using Highcharts JavaScript.

• Aggregation logic (sdk.applyAggregation) enhances dynamic analytics.

• Combined view of profits, costs, and item performance.

Scripts Summary

Component	Script
Pie Chart	sdk.applyAggregation("pie4", "SalesChannel", "TotalProfit", "SUM");
Bar Chart	sdk.applyAggregation("bar5", "Order Priority", "TotalCost", "SUM");
Column Chart	sdk.applyAggregation("column6", "ItemType", "UnitCost,UnitPrice", "SUM,SUM");

Best Practices

• Always test the custom chart code in isolation before saving.

• Ensure external script URLs (S1, S2, S3) are accessible in your network environment.

• Keep your CSV field names consistent across all connections.

• Use contrasting colors and meaningful chart titles for readability.

• Preview after every major edit to ensure responsiveness.

Business Impact

This workflow enables teams to:

• Blend standard analytics with custom-coded visualizations.

• Leverage flat-file data without needing a database.

• Present engaging, interactive dashboards for performance analysis.

• Reduce dependency on prebuilt chart libraries by integrating Highcharts directly.