CODE FOR “CODE.
gs” FILE
// Create a menu item to open the dashboard
function onOpen() {
var ui = [Link]();
[Link]('Dashboard')
.addItem('Open Dashboard', 'openDashboard')
.addToUi();
}
// Function to open the dashboard in a modal dialog
function openDashboard() {
var html = [Link]('index')
.setWidth(1200)
.setHeight(800)
.setTitle('Business Dashboard');
[Link]().showModalDialog(html, 'Business Dashboard');
}
// Function to get all the data needed for the dashboard
function getDashboardData() {
try {
// Get the spreadsheet and sheet
var spreadsheet = [Link]();
var sheet = [Link]('dataset');
// Get all data from the sheet
var data = [Link]().getValues();
// Extract headers
var headers = data[0];
// Remove header row
var rows = [Link](1);
// Find column indices
var dateIndex = [Link]('Date');
var entityNameIndex = [Link]('Entity Name');
var productIndex = [Link]('Product');
var categoryIndex = [Link]('Category');
var locationIndex = [Link]('Location');
var salesIndex = [Link]('Sales');
var costIndex = [Link]('Cost');
var marginIndex = [Link]('Margin');
var expensesIndex = [Link]('Expenses');
var profitIndex = [Link]('Profit');
// Calculate metrics for cards
var totalSales = calculateTotalSales(rows, salesIndex);
var totalCost = calculateTotalCost(rows, costIndex);
var avgMargin = calculateAverageMargin(rows, marginIndex,
salesIndex);
var topLocation = findTopLocation(rows, locationIndex, salesIndex);
var topProduct = findTopProduct(rows, productIndex, salesIndex);
var topCustomer = findTopCustomer(rows, entityNameIndex, salesIndex);
// Prepare chart data
var salesTrend = getSalesTrendData(rows, dateIndex, salesIndex);
var salesByLocation = getSalesByLocationData(rows, locationIndex,
salesIndex);
var salesByCategory = getSalesByCategoryData(rows, categoryIndex,
salesIndex);
var topCustomers = getTopCustomersData(rows, entityNameIndex,
salesIndex);
var salesExpenseProfit = getSalesExpenseProfitData(rows, dateIndex,
salesIndex, costIndex, expensesIndex, profitIndex);
var profitByCategory = getProfitByCategoryData(rows, dateIndex,
categoryIndex, profitIndex);
var profitByLocation = getProfitByLocationData(rows, locationIndex,
profitIndex);
var salesProfitTrend = getSalesProfitTrendData(rows, dateIndex,
salesIndex, profitIndex);
// Return all data in a single object
return {
totalSales: totalSales,
totalCost: totalCost,
avgMargin: avgMargin,
topLocation: topLocation,
topProduct: topProduct,
topCustomer: topCustomer,
salesTrend: salesTrend,
salesByLocation: salesByLocation,
salesByCategory: salesByCategory,
topCustomers: topCustomers,
salesExpenseProfit: salesExpenseProfit,
profitByCategory: profitByCategory,
profitByLocation: profitByLocation,
salesProfitTrend: salesProfitTrend
};
} catch (error) {
[Link]('Error in getDashboardData: ' + [Link]());
return { error: [Link]() };
}
}
// Card 1: Calculate Total Sales
function calculateTotalSales(rows, salesIndex) {
var total = 0;
for (var i = 0; i < [Link]; i++) {
total += parseFloat(rows[i][salesIndex] || 0);
}
return total;
}
// Card 2: Calculate Total Cost
function calculateTotalCost(rows, costIndex) {
var total = 0;
for (var i = 0; i < [Link]; i++) {
total += parseFloat(rows[i][costIndex] || 0);
}
return total;
}
// Card 3: Calculate Average Margin
function calculateAverageMargin(rows, marginIndex, salesIndex) {
var totalMargin = 0;
var totalSales = 0;
for (var i = 0; i < [Link]; i++) {
totalMargin += parseFloat(rows[i][marginIndex] || 0);
totalSales += parseFloat(rows[i][salesIndex] || 0);
}
return (totalMargin / totalSales) * 100;
}
// Card 4: Find Top Sales Location
function findTopLocation(rows, locationIndex, salesIndex) {
var locationSales = {};
// Calculate sales for each location
for (var i = 0; i < [Link]; i++) {
var location = rows[i][locationIndex];
var sales = parseFloat(rows[i][salesIndex] || 0);
if (!locationSales[location]) {
locationSales[location] = 0;
}
locationSales[location] += sales;
}
// Find the location with the highest sales
var topLocation = '';
var maxSales = 0;
for (var location in locationSales) {
if (locationSales[location] > maxSales) {
maxSales = locationSales[location];
topLocation = location;
}
}
return topLocation;
}
// Card 5: Find Top Selling Product
function findTopProduct(rows, productIndex, salesIndex) {
var productSales = {};
// Calculate sales for each product
for (var i = 0; i < [Link]; i++) {
var product = rows[i][productIndex];
var sales = parseFloat(rows[i][salesIndex] || 0);
if (!productSales[product]) {
productSales[product] = 0;
}
productSales[product] += sales;
}
// Find the product with the highest sales
var topProduct = '';
var maxSales = 0;
for (var product in productSales) {
if (productSales[product] > maxSales) {
maxSales = productSales[product];
topProduct = product;
}
}
return topProduct;
}
// Card 6: Find Top Customer
function findTopCustomer(rows, entityNameIndex, salesIndex) {
var customerSales = {};
// Calculate sales for each customer
for (var i = 0; i < [Link]; i++) {
var customer = rows[i][entityNameIndex];
var sales = parseFloat(rows[i][salesIndex] || 0);
if (!customerSales[customer]) {
customerSales[customer] = 0;
}
customerSales[customer] += sales;
}
// Find the customer with the highest sales
var topCustomer = '';
var maxSales = 0;
for (var customer in customerSales) {
if (customerSales[customer] > maxSales) {
maxSales = customerSales[customer];
topCustomer = customer;
}
}
return topCustomer;
}
// Chart 1: Sales Trend data
function getSalesTrendData(rows, dateIndex, salesIndex) {
var monthlyData = {};
// Group sales by month and year
for (var i = 0; i < [Link]; i++) {
var dateStr = rows[i][dateIndex];
var date = new Date(dateStr);
var monthYear = [Link](date,
[Link](), "MMM yyyy");
var sales = parseFloat(rows[i][salesIndex] || 0);
if (!monthlyData[monthYear]) {
monthlyData[monthYear] = 0;
}
monthlyData[monthYear] += sales;
}
// Sort dates chronologically
var sortedMonths = [Link](monthlyData).sort(function(a, b) {
return new Date(a) - new Date(b);
});
// Prepare data for chart
var dates = [];
var values = [];
for (var i = 0; i < [Link]; i++) {
[Link](sortedMonths[i]);
[Link](monthlyData[sortedMonths[i]]);
}
return {
dates: dates,
values: values
};
}
// Chart 2: Sales By Location data
function getSalesByLocationData(rows, locationIndex, salesIndex) {
var locationSales = {};
// Calculate sales for each location
for (var i = 0; i < [Link]; i++) {
var location = rows[i][locationIndex];
var sales = parseFloat(rows[i][salesIndex] || 0);
if (!locationSales[location]) {
locationSales[location] = 0;
}
locationSales[location] += sales;
}
// Prepare data for chart
var locations = [];
var values = [];
for (var location in locationSales) {
[Link](location);
[Link](locationSales[location]);
}
return {
locations: locations,
values: values
};
}
// Chart 3: Sales By Category data
function getSalesByCategoryData(rows, categoryIndex, salesIndex) {
var categorySales = {};
var totalSales = 0;
// Calculate sales for each category
for (var i = 0; i < [Link]; i++) {
var category = rows[i][categoryIndex];
var sales = parseFloat(rows[i][salesIndex] || 0);
if (!categorySales[category]) {
categorySales[category] = 0;
}
categorySales[category] += sales;
totalSales += sales;
}
// Prepare data for chart and calculate percentages
var categories = [];
var values = [];
for (var category in categorySales) {
[Link](category);
// Calculate percentage
var percentage = (categorySales[category] / totalSales) * 100;
[Link](percentage);
}
return {
categories: categories,
values: values,
rawValues: categorySales // Include the raw values for possible
tooltip
};
}
// Chart 4: Top 10 Customers data
function getTopCustomersData(rows, entityNameIndex, salesIndex) {
var customerSales = {};
// Calculate sales for each customer
for (var i = 0; i < [Link]; i++) {
var customer = rows[i][entityNameIndex];
var sales = parseFloat(rows[i][salesIndex] || 0);
if (!customerSales[customer]) {
customerSales[customer] = 0;
}
customerSales[customer] += sales;
}
// Convert to array for sorting
var customersArray = [];
for (var customer in customerSales) {
[Link]({
name: customer,
sales: customerSales[customer]
});
}
// Sort by sales (descending) and take top 10
[Link](function(a, b) {
return [Link] - [Link];
});
var top10 = [Link](0, 10);
// Prepare data for chart
var customers = [];
var values = [];
for (var i = 0; i < [Link]; i++) {
[Link](top10[i].name);
[Link](top10[i].sales);
}
return {
customers: [Link](), // Reverse for better visualization
values: [Link]()
};
}
// Chart 5: Sales, Expense and Profit data
function getSalesExpenseProfitData(rows, dateIndex, salesIndex,
costIndex, expensesIndex, profitIndex) {
var yearlyData = {};
// Group data by year
for (var i = 0; i < [Link]; i++) {
var dateStr = rows[i][dateIndex];
var date = new Date(dateStr);
var year = [Link]().toString();
if (!yearlyData[year]) {
yearlyData[year] = {
sales: 0,
costs: 0,
expenses: 0,
profits: 0
};
}
yearlyData[year].sales += parseFloat(rows[i][salesIndex] || 0);
yearlyData[year].costs += parseFloat(rows[i][costIndex] || 0);
yearlyData[year].expenses += parseFloat(rows[i][expensesIndex] || 0);
yearlyData[year].profits += parseFloat(rows[i][profitIndex] || 0);
}
// Sort years chronologically
var sortedYears = [Link](yearlyData).sort();
// Prepare data for chart
var years = [];
var sales = [];
var costs = [];
var expenses = [];
var profits = [];
for (var i = 0; i < [Link]; i++) {
var year = sortedYears[i];
[Link](year);
// Calculate percentages
var total = yearlyData[year].sales + yearlyData[year].costs +
yearlyData[year].expenses + yearlyData[year].profits;
[Link]((yearlyData[year].sales / total) * 100);
[Link]((yearlyData[year].costs / total) * 100);
[Link]((yearlyData[year].expenses / total) * 100);
[Link]((yearlyData[year].profits / total) * 100);
}
return {
years: years,
sales: sales,
costs: costs,
expenses: expenses,
profits: profits
};
}
// Chart 6: Profit By Category data
function getProfitByCategoryData(rows, dateIndex, categoryIndex,
profitIndex) {
var yearCategoryProfit = {};
var categories = new Set();
// Group profit by year and category
for (var i = 0; i < [Link]; i++) {
var dateStr = rows[i][dateIndex];
var date = new Date(dateStr);
var year = [Link]().toString();
var category = rows[i][categoryIndex];
var profit = parseFloat(rows[i][profitIndex] || 0);
[Link](category);
if (!yearCategoryProfit[year]) {
yearCategoryProfit[year] = {};
}
if (!yearCategoryProfit[year][category]) {
yearCategoryProfit[year][category] = 0;
}
yearCategoryProfit[year][category] += profit;
}
// Sort years chronologically
var sortedYears = [Link](yearCategoryProfit).sort();
var categoriesArray = [Link](categories);
// Prepare data for chart
var series = [];
for (var i = 0; i < [Link]; i++) {
var category = categoriesArray[i];
var data = [];
for (var j = 0; j < [Link]; j++) {
var year = sortedYears[j];
[Link](yearCategoryProfit[year][category] || 0);
}
[Link]({
name: category,
data: data
});
}
return {
years: sortedYears,
series: series
};
}
// Chart 7: Profit By Location data
function getProfitByLocationData(rows, locationIndex, profitIndex) {
var locationProfit = {};
var totalProfit = 0;
// Calculate profit for each location
for (var i = 0; i < [Link]; i++) {
var location = rows[i][locationIndex];
var profit = parseFloat(rows[i][profitIndex] || 0);
if (!locationProfit[location]) {
locationProfit[location] = 0;
}
locationProfit[location] += profit;
totalProfit += profit;
}
// Prepare data for chart and calculate percentages
var locations = [];
var values = [];
for (var location in locationProfit) {
if (locationProfit[location] > 0) { // Only include locations with
positive profit
[Link](location);
var percentage = (locationProfit[location] / totalProfit) * 100;
[Link](parseFloat([Link](1)));
}
}
return {
locations: locations,
values: values
};
}
// Chart 8: Sales and Profit Trend data
function getSalesProfitTrendData(rows, dateIndex, salesIndex,
profitIndex) {
var monthlyData = {};
// Group sales and profit by month and year
for (var i = 0; i < [Link]; i++) {
var dateStr = rows[i][dateIndex];
var date = new Date(dateStr);
var monthYear = [Link](date,
[Link](), "MMM yyyy");
var sales = parseFloat(rows[i][salesIndex] || 0);
var profit = parseFloat(rows[i][profitIndex] || 0);
if (!monthlyData[monthYear]) {
monthlyData[monthYear] = {
sales: 0,
profit: 0
};
}
monthlyData[monthYear].sales += sales;
monthlyData[monthYear].profit += profit;
}
// Sort dates chronologically
var sortedMonths = [Link](monthlyData).sort(function(a, b) {
return new Date(a) - new Date(b);
});
// Prepare data for chart
var dates = [];
var sales = [];
var profits = [];
for (var i = 0; i < [Link]; i++) {
[Link](sortedMonths[i]);
[Link](monthlyData[sortedMonths[i]].sales);
[Link](monthlyData[sortedMonths[i]].profit);
}
return {
dates: dates,
sales: sales,
profits: profits
};
}
// Helper function to parse dates in DD-MMM-YYYY format
function parseDate(dateString) {
var parts = [Link]('-');
var day = parseInt(parts[0], 10);
var monthNames = {
'JAN': 0, 'FEB': 1, 'MAR': 2, 'APR': 3, 'MAY': 4, 'JUN': 5,
'JUL': 6, 'AUG': 7, 'SEP': 8, 'OCT': 9, 'NOV': 10, 'DEC': 11
};
var month = monthNames[parts[1].toUpperCase()];
var year = parseInt(parts[2], 10);
return new Date(year, month, day);
}
// Function to deploy as a web app
function doGet() {
return [Link]('index')
.setTitle('Business Dashboard')
.setXFrameOptionsMode([Link]);
}
CODE FOR “[Link]” file
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta charset="UTF-8">
<title>Dashboard</title>
<link href="[Link]
beta3/css/[Link]" rel="stylesheet">
<script
src="[Link]
[Link]"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}
body {
background-color: #f5f7fa;
padding: 30px;
}
.dashboard-container {
max-width: 1920px;
margin: 0 auto;
padding: 30px;
border-radius: 10px;
/* Main Heading */
.main-heading {
margin-bottom: 30px;
margin-top: -40px;
color: #021640;
}
.main-heading h1 {
font-size: 28px;
margin-bottom: 5px;
}
.main-heading h2 {
font-size: 18px;
font-weight: normal;
opacity: 0.8;
}
/* Metric Cards */
.metric-cards {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 24px;
margin-bottom: 30px;
}
.metric-card {
background-color: white;
border-radius: 8px;
padding: 20px;
height: 100px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
position: relative;
border-left: 4px solid #021640;
}
.metric-card h3 {
font-size: 14px;
color: #021640;
margin-bottom: 10px;
display: flex;
align-items: center;
}
.metric-card i {
margin-right: 8px;
color: #021640;
}
.metric-card h2 {
font-size: 24px;
color: #021640;
font-weight: bold;
}
/* Chart Grid */
.chart-grid {
display: grid;
grid-template-columns: 650px 300px minmax(0, 1fr);
gap: 24px;
}
.chart-column {
display: flex;
flex-direction: column;
gap: 24px;
}
.chart-card {
background-color: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.chart-card h3 {
font-size: 16px;
color: #021640;
margin-bottom: 20px;
}
.chart-row {
display: flex;
gap: 24px;
}
.chart-50 {
flex: 1;
width: 50%;
}
.chart-25 {
flex: 1;
width: 50%;
}
.chart-75 {
flex: 1;
width: 50%;
}
/* Loading State */
.loading {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-size: 24px;
color: #021640;
}
.loading i {
margin-right: 10px;
animation: spin 1s infinite linear;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div id="loading" class="loading">
<i class="fas fa-spinner"></i> Loading dashboard data...
</div>
<div id="dashboard" class="dashboard-container" style="display: none;">
<!-- Main Heading -->
<div class="main-heading">
<h1>Dashboard</h1>
<h2>Key trends and business insights</h2>
</div>
<!-- Metric Cards -->
<div class="metric-cards">
<div class="metric-card">
<h3><i class="fas fa-chart-line"></i> Total Sales</h3>
<h2 id="totalSales">$0</h2>
</div>
<div class="metric-card">
<h3><i class="fas fa-money-bill"></i> Total Cost</h3>
<h2 id="totalCost">$0</h2>
</div>
<div class="metric-card">
<h3><i class="fas fa-percentage"></i> Average Margin</h3>
<h2 id="avgMargin">0%</h2>
</div>
<div class="metric-card">
<h3><i class="fas fa-map-marker-alt"></i> Top Sales Location</h3>
<h2 id="topLocation">-</h2>
</div>
<div class="metric-card">
<h3><i class="fas fa-box"></i> Top Selling Product</h3>
<h2 id="topProduct">-</h2>
</div>
<div class="metric-card">
<h3><i class="fas fa-user"></i> Top Customer</h3>
<h2 id="topCustomer">-</h2>
</div>
</div>
<!-- Chart Grid -->
<div class="chart-grid">
<!-- First Column -->
<div class="chart-column">
<div class="chart-card">
<h3>Sales Trend</h3>
<div id="salesTrendChart"></div>
</div>
<div class="chart-row">
<div class="chart-card chart-50">
<h3>Sales By Location</h3>
<div id="salesByLocationChart"></div>
</div>
<div class="chart-card chart-50">
<h3>Sales By Category</h3>
<div id="salesByCategoryChart"></div>
</div>
</div>
</div>
<!-- Second Column -->
<div class="chart-column">
<div class="chart-card">
<h3>Top 10 Customers</h3>
<div id="topCustomersChart"></div>
</div>
</div>
<!-- Third Column -->
<div class="chart-column">
<div class="chart-row">
<div class="chart-card chart-50">
<h3>Profit By Location</h3>
<div id="profitByLocationChart"></div>
</div>
<div class="chart-card chart-50">
<h3>Profit By Category</h3>
<div id="profitByCategoryChart"></div>
</div>
</div>
<div class="chart-row">
<div class="chart-card chart-25">
<h3>Sales, Expense and Profit</h3>
<div id="salesExpenseProfitChart"></div>
</div>
<div class="chart-card chart-75">
<h3>Sales and Profit Trend</h3>
<div id="salesProfitTrendChart"></div>
</div>
</div>
</div>
</div>
</div>
<script>
// Initialize dashboard after data loads
[Link]('DOMContentLoaded', function() {
[Link]
.withSuccessHandler(initDashboard)
.withFailureHandler(handleError)
.getDashboardData();
});
function handleError(error) {
[Link]('loading').innerHTML = '<i class="fas fa-
exclamation-triangle"></i> Error loading data: ' + error;
}
function initDashboard(data) {
// Hide loading, show dashboard
[Link]('loading').[Link] = 'none';
[Link]('dashboard').[Link] = 'block';
// Set metric card values
[Link]('totalSales').textContent =
formatCurrency([Link]);
[Link]('totalCost').textContent =
formatCurrency([Link]);
[Link]('avgMargin').textContent =
formatPercentage([Link]);
[Link]('topLocation').textContent =
[Link];
[Link]('topProduct').textContent =
[Link];
[Link]('topCustomer').textContent =
[Link];
// Initialize charts
initSalesTrendChart([Link]);
initSalesByLocationChart([Link]);
initSalesByCategoryChart([Link]);
initTopCustomersChart([Link]);
initSalesExpenseProfitChart([Link]);
initProfitByCategoryChart([Link]);
initProfitByLocationChart([Link]);
initSalesProfitTrendChart([Link]);
}
function formatCurrency(value) {
return '$' + parseFloat(value).toLocaleString('en-US', {
minimumFractionDigits: 0,
maximumFractionDigits: 0
});
}
function formatPercentage(value) {
return parseFloat(value).toFixed(2) + '%';
}
// Chart 1: Sales Trend
function initSalesTrendChart(data) {
const options = {
series: [{
name: 'Sales',
data: [Link]
}],
chart: {
type: 'area',
height: 300,
fontFamily: 'Arial, sans-serif',
toolbar: {
show: false
}
},
markers: {
size: 2,
colors: '#021640',
strokeColors: '#021640',
strokeWidth: 2,
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth',
width: 2,
colors: ['#021640']
},
fill: {
type: 'gradient',
gradient: {
shade: 'light',
type: 'vertical',
shadeIntensity: 0.8,
opacityFrom: 0.7,
opacityTo: 0.2,
stops: [0, 100]
},
colors: ['#021640']
},
xaxis: {
type: 'datetime', // treat categories as dates
categories: [Link], // ensure these are valid date strings or
timestamps
labels: {
format: 'MMM-yy', // display dates in "MMM-YY" format
style: {
colors: '#021640',
fontSize: '12px'
}
}
},
yaxis: {
labels: {
formatter: function(value) {
return (value / 1000) + 'k';
},
style: {
colors: '#021640',
fontSize: '12px'
}
}
},
tooltip: {
x: {
format: 'MMM yyyy'
}
},
colors: ['#021640'],
grid: {
borderColor: '#e0e0e0',
strokeDashArray: 4
}
};
const chart = new
ApexCharts([Link]("#salesTrendChart"), options);
[Link]();
}
// Chart 2: Sales By Location
function initSalesByLocationChart(data) {
const options = {
series: [{
name: 'Sales',
data: [Link]
}],
chart: {
type: 'bar',
height: 300,
fontFamily: 'Arial, sans-serif',
toolbar: {
show: false
}
},
plotOptions: {
bar: {
borderRadius: 4,
horizontal: false,
columnWidth: '80%'
}
},
dataLabels: {
enabled: false
},
xaxis: {
categories: [Link],
labels: {
style: {
colors: '#021640',
fontSize: '12px'
}
}
},
yaxis: {
labels: {
formatter: function(value) {
return (value / 1000) + 'k';
},
style: {
colors: '#021640',
fontSize: '12px'
}
}
},
colors: ['#0066CC',],
grid: {
borderColor: '#e0e0e0',
strokeDashArray: 4
}
};
const chart = new
ApexCharts([Link]("#salesByLocationChart"), options);
[Link]();
}
// Chart 3: Sales By Category
function initSalesByCategoryChart(data) {
const options = {
series: [Link],
chart: {
type: 'pie',
height: 300,
fontFamily: 'Arial, sans-serif',
toolbar: {
show: false
}
},
labels: [Link],
colors: ['#021640', '#0066CC', '#0099CC' ],
legend: {
position: 'bottom',
fontSize: '12px',
fontFamily: 'Arial, sans-serif',
labels: {
colors: '#021640'
}
},
dataLabels: {
enabled: true,
formatter: function(val) {
return [Link](1) + '%';
},
style: {
fontSize: '12px',
fontFamily: 'Arial, sans-serif',
fontWeight: 'normal',
colors: ['#fff']
}
},
tooltip: {
y: {
formatter: function(value) {
return formatCurrency(value);
}
}
},
responsive: [{
breakpoint: 480,
options: {
chart: {
height: 300
},
legend: {
position: 'bottom'
}
}
}]
};
const chart = new
ApexCharts([Link]("#salesByCategoryChart"), options);
[Link]();
}
// Chart 4: Top 10 Customers
function initTopCustomersChart(data) {
[Link]();
[Link]();
const options = {
series: [{
name: 'Sales',
data: [Link]
}],
chart: {
type: 'bar',
height: 720,
fontFamily: 'Arial, sans-serif',
toolbar: {
show: false
}
},
plotOptions: {
bar: {
borderRadius: 4,
horizontal: true
}
},
dataLabels: {
enabled: true
},
xaxis: {
categories: [Link],
labels: {
formatter: function(value) {
return (value / 1000) + 'k';
},
style: {
colors: '#021640',
fontSize: '12px'
}
}
},
yaxis: {
labels: {
style: {
colors: '#021640',
fontSize: '12px'
}
}
},
colors: ['#0066CC'],
grid: {
borderColor: '#e0e0e0',
strokeDashArray: 4
}
};
const chart = new
ApexCharts([Link]("#topCustomersChart"), options);
[Link]();
}
// Chart 5: Sales, Expense and Profit
function initSalesExpenseProfitChart(data) {
const options = {
series: [{
name: 'Sales',
data: [Link]
}, {
name: 'Cost',
data: [Link]
}, {
name: 'Expenses',
data: [Link]
}, {
name: 'Profit',
data: [Link]
}],
chart: {
type: 'bar',
height: 300,
stacked: true,
stackType: '100%',
fontFamily: 'Arial, sans-serif',
toolbar: {
show: false
}
},
plotOptions: {
bar: {
horizontal: true
}
},
stroke: {
width: 1,
colors: ['#fff']
},
xaxis: {
categories: [Link],
labels: {
style: {
colors: '#021640',
fontSize: '12px'
}
}
},
yaxis: {
labels: {
style: {
colors: '#021640',
fontSize: '12px'
}
}
},
tooltip: {
y: {
formatter: function (val) {
return val + "%";
}
}
},
fill: {
opacity: 1
},
legend: {
position: 'bottom',
horizontalAlign: 'center',
fontSize: '12px',
labels: {
colors: '#021640'
}
},
colors: ['#021640', '#0066CC', '#0099CC', '#4572C4'],
dataLabels: {
enabled: false
}
};
const chart = new
ApexCharts([Link]("#salesExpenseProfitChart"), options);
[Link]();
}
// Chart 6: Profit By Category
function initProfitByCategoryChart(data) {
const options = {
series: [Link],
chart: {
type: 'bar',
height: 300,
stacked: true,
fontFamily: 'Arial, sans-serif',
toolbar: {
show: false
}
},
plotOptions: {
bar: {
borderRadius: 4,
horizontal: false,
columnWidth: '55%'
}
},
dataLabels: {
enabled: true
},
xaxis: {
categories: [Link],
labels: {
style: {
colors: '#021640',
fontSize: '12px'
}
}
},
yaxis: {
labels: {
formatter: function(value) {
return (value / 1000) + 'k';
},
style: {
colors: '#021640',
fontSize: '12px'
}
}
},
legend: {
position: 'bottom',
horizontalAlign: 'center',
fontSize: '12px',
labels: {
colors: '#021640'
}
},
fill: {
opacity: 1
},
colors: ['#021640', '#0066CC', '#0099CC', '#4572C4', '#558ED5',
'#1F4E79'],
grid: {
borderColor: '#e0e0e0',
strokeDashArray: 4
}
};
const chart = new
ApexCharts([Link]("#profitByCategoryChart"), options);
[Link]();
}
// Chart 7: Profit By Location
function initProfitByLocationChart(data) {
const options = {
series: [Link],
chart: {
type: 'donut',
height: 300,
fontFamily: 'Arial, sans-serif'
},
labels: [Link],
colors: ['#021640', '#0066CC', '#0099CC', '#4572C4', '#558ED5',
'#1F4E79'],
legend: {
show: true,
position: 'bottom'
},
plotOptions: {
pie: {
// This formatter displays the location name and percentage
inside each slice.
dataLabels: {
offset: 0,
formatter: function (val, opts) {
return [Link][[Link]] + ": " +
[Link](val) + "%";
}
},
donut: {
size: '50%',
labels: {
show: true,
name: {
show: true,
fontSize: '10px',
fontFamily: 'Arial, sans-serif',
color: '#021640'
},
value: {
show: true,
fontSize: '16px',
fontFamily: 'Arial, sans-serif',
color: '#021640',
formatter: function (val) {
return val + "%";
}
},
total: {
show: true,
label: 'Total',
fontSize: '14px',
color: '#021640',
formatter: function () {
return '100%';
}
}
}
}
}
},
responsive: [{
breakpoint: 480,
options: {
chart: {
height: 250
}
}
}]
};
const chart = new
ApexCharts([Link]("#profitByLocationChart"), options);
[Link]();
}
// Chart 8: Sales and Profit Trend
function initSalesProfitTrendChart(data) {
const options = {
series: [{
name: 'Sales',
data: [Link]
}, {
name: 'Profit',
data: [Link]
}],
chart: {
type: 'area',
height: 300,
stacked: true,
fontFamily: 'Arial, sans-serif',
toolbar: {
show: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth',
width: 2
},
fill: {
type: 'gradient',
gradient: {
opacityFrom: 0.6,
opacityTo: 0.2,
}
},
// Markers configuration with size, fill colors, stroke colors, and
stroke width
markers: {
size: 1,
colors: ['#021640', '#0066CC'],
strokeColors: ['#021640', '#0066CC'],
strokeWidth: 1
},
legend: {
position: 'top',
horizontalAlign: 'right',
fontSize: '12px',
labels: {
colors: '#021640'
}
},
xaxis: {
type: 'datetime', // treat categories as dates
categories: [Link], // ensure these are valid date strings or
timestamps
labels: {
format: 'MMM-yy', // display dates in "MMM-YY" format
style: {
colors: '#021640',
fontSize: '12px'
}
}
},
yaxis: {
labels: {
formatter: function(value) {
return (value / 1000) + 'k';
},
style: {
colors: '#021640',
fontSize: '12px'
}
}
},
colors: ['#021640', '#0066CC'],
grid: {
borderColor: '#e0e0e0',
strokeDashArray: 4
}
};
const chart = new
ApexCharts([Link]("#salesProfitTrendChart"), options);
[Link]();
}
</script>
</body>
</html>