Dynamic Sales Dashboard Generator

Sales Dashboard with Charts with HTML, CSS & JavaScript

40 DAYS 40 PROJECT CHALLENGE

Day #22

Project Overview

The Dynamic Sales Dashboard Generator is an interactive web tool that allows users to create a sales analytics dashboard by entering their own sales data. Once the data is submitted, the system automatically generates KPI cards and charts to visualize revenue and product performance. This project demonstrates dynamic dashboard creation, user input handling, real-time data visualization, and Chart.js integration, making it a strong frontend analytics project.

Key Features

Generate dashboard from user input
Automatic KPI calculation
Dynamic chart generation
Interactive analytics visualization
Clean dashboard layout
Data visualization with Chart.js
Real-time dashboard updates
Responsive design

HTML Code

<!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

*{
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

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"]
}]
}
})

}