Data Dashboard with Charts JavaScript, API
👤 Sharing: AI
```javascript
<!DOCTYPE html>
<html>
<head>
<title>Data Dashboard</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.container {
width: 80%;
margin: 20px auto;
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
.chart-container {
width: 100%;
margin-bottom: 20px;
}
#data-source {
margin-top: 20px;
text-align: center;
font-size: small;
color: #777;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div class="container">
<h1>Data Dashboard</h1>
<div class="chart-container">
<canvas id="lineChart"></canvas>
</div>
<div class="chart-container">
<canvas id="barChart"></canvas>
</div>
<div class="chart-container">
<canvas id="pieChart"></canvas>
</div>
<p id="data-source">Data retrieved from a sample API. Please adjust the API URL as needed.</p>
</div>
<script>
// Replace with your actual API endpoint
const apiUrl = 'https://dummyjson.com/products'; // Example API
async function fetchData() {
try {
const response = await fetch(apiUrl);
const data = await response.json();
return data; // Assuming data.products exists in the API response
} catch (error) {
console.error('Error fetching data:', error);
return null;
}
}
async function createCharts() {
const apiData = await fetchData();
if (!apiData || !apiData.products) { // Check if data or products property exists
console.error('Failed to retrieve data or invalid data format from the API.');
return;
}
const products = apiData.products;
// Line Chart - Example: Product Prices Over Time (using product IDs as time)
const lineChartCanvas = document.getElementById('lineChart');
const lineChart = new Chart(lineChartCanvas, {
type: 'line',
data: {
labels: products.map(product => product.id), // Product IDs as labels
datasets: [{
label: 'Product Prices',
data: products.map(product => product.price),
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 2,
fill: false
}]
},
options: {
responsive: true,
plugins: {
title: {
display: true,
text: 'Product Prices'
}
},
scales: {
x: {
display: true,
title: {
display: true,
text: 'Product ID'
}
},
y: {
display: true,
title: {
display: true,
text: 'Price'
}
}
}
}
});
// Bar Chart - Example: Product Ratings
const barChartCanvas = document.getElementById('barChart');
const barChart = new Chart(barChartCanvas, {
type: 'bar',
data: {
labels: products.map(product => product.title), // Product titles as labels
datasets: [{
label: 'Product Ratings',
data: products.map(product => product.rating),
backgroundColor: 'rgba(54, 162, 235, 0.8)',
borderWidth: 1
}]
},
options: {
responsive: true,
plugins: {
title: {
display: true,
text: 'Product Ratings'
}
},
scales: {
x: {
display: true,
title: {
display: true,
text: 'Product'
}
},
y: {
display: true,
title: {
display: true,
text: 'Rating'
},
beginAtZero: true
}
}
}
});
// Pie Chart - Example: Product Stock Distribution
const pieChartCanvas = document.getElementById('pieChart');
const pieChart = new Chart(pieChartCanvas, {
type: 'pie',
data: {
labels: products.map(product => product.title), // Product titles
datasets: [{
label: 'Product Stock',
data: products.map(product => product.stock),
backgroundColor: [
'rgba(255, 99, 132, 0.8)',
'rgba(255, 159, 64, 0.8)',
'rgba(255, 205, 86, 0.8)',
'rgba(75, 192, 192, 0.8)',
'rgba(54, 162, 235, 0.8)',
'rgba(153, 102, 255, 0.8)',
'rgba(201, 203, 207, 0.8)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
plugins: {
title: {
display: true,
text: 'Product Stock Distribution'
}
}
}
});
}
createCharts();
</script>
</body>
</html>
```
👁️ Viewed: 11
Comments