Scribd
Upload
16 views2 pages

AIEC 8th

The document is an HTML template for an Admin Sales Dashboard featuring sales data visualizations. It includes key metrics such as total sales, quantity sold, and profit, displayed in a grid layout with cards. The dashboard utilizes Chart.js to create interactive charts for sales by category, sales by state, and profit by month.

Uploaded by

riya.birnale31
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16 views2 pages

AIEC 8th

The document is an HTML template for an Admin Sales Dashboard featuring sales data visualizations. It includes key metrics such as total sales, quantity sold, and profit, displayed in a grid layout with cards. The dashboard utilizes Chart.js to create interactive charts for sales by category, sales by state, and profit by month.

Uploaded by

riya.birnale31
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>​
<html lang="en">​
<head>​
<meta charset="UTF-8">​
<meta name="viewport" content="width=device-width, initial-scale=1.0">​
<title>Sales Dashboard</title>​
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>​
<style>​
body {​
font-family: Arial, sans-serif;​
background-color: #111115;​
color: white;​
text-align: center; }​
.dashboard {​
display: grid;​
grid-template-columns: repeat(3, 1fr);​
gap: 20px;​
padding: 20px;}​
.card {​
background: #29293d;​
padding: 20px;​
border-radius: 10px;​
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);}​
canvas {​
background: #fff;​
border-radius: 8px; }​
</style>​
</head>​
<body>​
<h1>Admin Sales Dashboard</h1>​
<div class="dashboard">​
<div class="card"><h2>438K</h2><p>Sales</p></div>​
<div class="card"><h2>5615</h2><p>Quantity</p></div>​
<div class="card"><h2>37K</h2><p>Profit</p></div>​
</div>​
<div class="dashboard">​
<div class="card"><canvas id="salesByCategory"></canvas></div>​
<div class="card"><canvas id="salesByState"></canvas></div>​
<div class="card"><canvas id="profitByMonth"></canvas></div>​
</div>​
<script>​
const ctx1 = document.getElementById('salesByCategory').getContext('2d');​
new Chart(ctx1, {​
type: 'doughnut',​
data: {​
labels: ['Electronics', 'Clothing', 'Home & Kitchen', 'Sports'],​
datasets: [{​
data: [120, 150, 90, 60],​
backgroundColor: ['red', 'blue', 'green', 'yellow']}]},​
options: { plugins: { title: { display: true, text: 'SalesByCategory Chart ' } } }​
});​
const ctx2 = document.getElementById('salesByState').getContext('2d');​
new Chart(ctx2, {​
type: 'bar',​
data: {​
labels: ['California', 'Texas', 'New York', 'Florida'],​
datasets: [{​
label: 'Sales',​
data: [300, 250, 200, 180],​
backgroundColor: 'orange'}]},​
options: { plugins: { title: { display: true, text:'SalesByState Chart ' } } }});​
const ctx3 = document.getElementById('profitByMonth').getContext('2d');​
new Chart(ctx3, {​
type: 'line',​
data: {​
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],​
datasets: [{​
label: 'Profit',​
data: [5000, 7000, 4000, 9000, 12000, 8000],​
borderColor: 'cyan',​
fill: false}]},​
options: { plugins: { title: { display: true, text: 'ProfitByMonth Chart ' } } }});​
</script>​
</body>​
</html>​

You might also like