Dynamic Sales Dashboard Generator

Sales Dashboard with Charts with HTML, CSS & JavaScript

40 DAYS 40 PROJECT CHALLENGE

Day #22

Project Overview

Dynamic Sales Dashboard Generator is an interactive web application built with HTML, CSS, and JavaScript. It allows users to enter monthly sales data, product information, and product sales values. After submitting the data, JavaScript automatically creates a sales dashboard with KPI cards and charts. The project uses Chart.js to visualize the entered data through a line chart and a pie chart. In addition, JavaScript calculates values such as total revenue, total orders, and customers before displaying them on the dashboard. Therefore, this project provides practical experience with data processing, dynamic DOM manipulation, calculations, and chart-based data visualization

Key Features

Sales Data Input: Users can enter monthly sales values through the input field. The application accepts comma-separated values, making it easy to provide data for multiple months.
Product Data Input: Users can enter product names and their corresponding sales values. JavaScript processes these values and uses them to create the product performance chart.
Automatic KPI Calculation: The application calculates important dashboard values such as total revenue, total orders, and customers from the entered sales data. As a result, users can see key business metrics immediately.
Dynamic Dashboard Generation: After clicking the Generate Dashboard button, JavaScript creates the complete dashboard dynamically. Therefore, users do not need to manually create the dashboard structure.
Sales Line Chart: The project uses Chart.js to display monthly sales as a line chart. This makes it easier to understand how sales values change across different months.
Product Sales Pie Chart: Product sales are displayed using a pie chart. Consequently, users can visually compare the sales contribution of different products.
Real-Time Updates: Each time users generate the dashboard, JavaScript processes the latest input values and updates the displayed analytics.
KPI Cards: The dashboard contains separate cards for Total Revenue, Total Orders, and Customers. These cards provide a quick overview of the calculated sales information.
Chart.js Integration: The project loads Chart.js from a CDN and uses it to create both charts. This demonstrates how external JavaScript libraries can add data visualization features to a frontend project.
Clean Dashboard Layout: CSS organizes the input section, KPI cards, and charts into separate areas. As a result, the dashboard remains easy to read and understand.
Responsive Structure: The dashboard uses flexible containers and chart boxes. Therefore, the layout can adapt more easily to different screen sizes.

What You'll Learn

How to create a dynamic sales dashboard using HTML, CSS, and JavaScript.
How to collect and process comma-separated user input.
How to convert string values into numbers using map(Number).
How to calculate totals with the reduce() method.
How to generate HTML dynamically using template literals.
How to integrate Chart.js into a JavaScript project.
How to create line and pie charts from user-provided data.
How to update dashboard content dynamically using the DOM.

HTML Code

HTML creates the basic structure of the Dynamic Sales Dashboard Generator. The main .container contains the project heading and input fields for months, sales values, products, and product sales.

The Generate Dashboard button calls the generateDashboard() function when clicked. After that, JavaScript processes the entered information and inserts the dashboard into the #dashboard element and the page also loads the Chart.js library before the project JavaScript file. Therefore, JavaScript can use the Chart object to create the sales and product charts.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dynamic Sales Dashboard Generator</title>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<link rel="stylesheet" href="style.css">
</head>

<body>

<div class="container">

<h1>Create Sales Dashboard</h1>

<input id="months" placeholder="Months (Jan,Feb,Mar)">
<input id="sales" placeholder="Sales Values (1200,1500,1800)">

<input id="products" placeholder="Products (Laptop,Phone,Tablet)">
<input id="productSales" placeholder="Product Sales (40,30,30)">

<button onclick="generateDashboard()">Generate Dashboard</button>

</div>


<div id="dashboard"></div>

<script src="script.js"></script>

</body>
</html>

CSS Code

CSS controls the appearance of the dashboard generator. First, the universal selector resets the default margin and padding, sets box-sizing: border-box, and applies the Arial font. The body uses a dark blue background and page padding. Meanwhile, the .container creates a white card for the input section with padding, rounded corners, and a maximum width.

The dashboard itself uses another white container with a larger maximum width. The .stats class uses Flexbox to arrange the KPI cards, while .chart-box provides a separate light-colored section for each chart. Finally, the input fields and button use full-width layouts, padding, rounded corners, and spacing. The button also changes its background color when the user moves the cursor over it.

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial;
}

body{
background:#042354;
padding:30px;
}

.container{
background:white;
padding:25px;
border-radius:10px;
max-width:600px;
margin:auto;
margin-bottom:30px;
}

input{
width:100%;
padding:10px;
margin-bottom:10px;
border-radius:6px;
border:1px solid #ddd;
}

button{
width:100%;
padding:12px;
background:#2563eb;
border:none;
color:white;
border-radius:6px;
cursor:pointer;
}

button:hover{
background:#1d4ed8;
}

#dashboard{
background:white;
padding:30px;
border-radius:10px;
max-width:900px;
margin:auto;
}

.stats{
display:flex;
gap:20px;
margin-bottom:20px;
}

.card{
flex:1;
background:#2563eb;
color:white;
padding:20px;
border-radius:8px;
text-align:center;
}

.charts{
display:flex;
gap:20px;
}

.chart-box{
flex:1;
background:#f1f5f9;
padding:20px;
border-radius:8px;
}

Javascript Code

JavaScript handles the dashboard generation, calculations, and charts. First, the generateDashboard() function retrieves the values from the input fields and uses split(",") to convert comma-separated data into arrays. Next, JavaScript converts the sales and product sales values into numbers using map(Number). It then uses reduce() to calculate the total revenue. The code also calculates total orders and customers from the sales data.

After that, JavaScript creates the dashboard HTML dynamically using template literals. The dashboard contains KPI cards along with two canvas elements for the charts. Finally, Chart.js creates a line chart using the monthly sales data and a pie chart using the product sales data. As a result, the entered sales information becomes an interactive visual dashboard without requiring a page reload.

function generateDashboard(){

const months = document.getElementById("months").value.split(",")
const sales = document.getElementById("sales").value.split(",").map(Number)

const products = document.getElementById("products").value.split(",")
const productSales = document.getElementById("productSales").value.split(",").map(Number)

const totalRevenue = sales.reduce((a,b)=>a+b,0)
const totalOrders = sales.length * 50
const customers = Math.floor(totalOrders * 0.7)

document.getElementById("dashboard").innerHTML = `

<h2>Sales Dashboard</h2>

<div class="stats">

<div class="card">
<h3>Total Revenue</h3>
<p>$${totalRevenue}</p>
</div>

<div class="card">
<h3>Total Orders</h3>
<p>${totalOrders}</p>
</div>

<div class="card">
<h3>Customers</h3>
<p>${customers}</p>
</div>

</div>

<div class="charts">

<div class="chart-box">
<canvas id="salesChart"></canvas>
</div>

<div class="chart-box">
<canvas id="productChart"></canvas>
</div>

</div>

`

const salesCtx = document.getElementById("salesChart")

new Chart(salesCtx,{
type:"line",
data:{
labels:months,
datasets:[{
label:"Sales",
data:sales,
borderColor:"#2563eb",
backgroundColor:"rgba(37,99,235,0.2)",
fill:true
}]
}
})

const productCtx = document.getElementById("productChart")

new Chart(productCtx,{
type:"pie",
data:{
labels:products,
datasets:[{
data:productSales,
backgroundColor:["#2563eb","#10b981","#f59e0b","#ef4444"]
}]
}
})

}