all developers have the same problem when developing reporting engine..
if you give db structure to chatgpt and as for :
give me sql code for "top 50 customers who buy items like votka" then
give me bootstrap 5 html datatables to display it
give me chart.js javascript code to display radar chart for it..
and bamm.. output html:
if you give db structure to chatgpt and as for :
give me sql code for "top 50 customers who buy items like votka" then
give me bootstrap 5 html datatables to display it
give me chart.js javascript code to display radar chart for it..
and bamm.. output html:
JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Radar Chart and DataTable with Chart.js</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.4/css/dataTables.bootstrap5.min.css">
</head>
<body>
<div class="container mt-5">
<canvas id="myRadarChart" class="mb-5" style="width:400px"></canvas>
<table id="dataTable" class="table table-striped table-bordered">
<thead>
<tr>
<th>Order Date</th>
<th>Customer Name</th>
<th>Product Name</th>
<th>Total Quantity</th>
</tr>
</thead>
<tbody>
<!-- Data will be inserted here via JavaScript -->
</tbody>
</table>
</div>
<!-- jQuery & DataTables JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.4/js/dataTables.bootstrap5.min.js"></script>
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Verilen JSON data
var jsonData = [{"OrderDate":"2023-09-28","CustomerName":"08 YILDIRIM TEKEL BA","ProductName":"EP KASA 50 CL","TotalQuantity":84},{"OrderDate":"2023-09-28","CustomerName":"06 ANKARA SHOW","ProductName":"MGD KOLİ 33 CL","TotalQuantity":79.2},{"OrderDate":"2023-09-28","CustomerName":"+1 BÜFE","ProductName":"EFES MALT KASA 50 CL DEPOZİTOLU","TotalQuantity":40},{"OrderDate":"2023-09-28","CustomerName":"08 YILDIRIM TEKEL BA","ProductName":"AMSTERDAM_N. TAVA 50 CL TY 12'Lİ","TotalQuantity":30},{"OrderDate":"2023-09-28","CustomerName":"01 KAAN MARKET-FATMA","ProductName":"BELFAST TVA 24X50 CL KTU","TotalQuantity":24},{"OrderDate":"2023-09-28","CustomerName":"07 Mardan Market","ProductName":"BECKS KOLİ 50 CL 12'Lİ","TotalQuantity":18},{"OrderDate":"2023-09-28","CustomerName":"08 YILDIRIM TEKEL BA","ProductName":"EP KOLİ 30 CL STEINIE TY 24'LÜ","TotalQuantity":14.4},{"OrderDate":"2023-09-28","CustomerName":"07 GENÇLER","ProductName":"EFES MALT TAVA 50 CL","TotalQuantity":12},{"OrderDate":"2023-09-28","CustomerName":"07 GÜLŞAH-GÜLTEKİN A","ProductName":"AMSTERDAM_N. TAVA 50 CL TY 12'Lİ","TotalQuantity":12},{"OrderDate":"2023-09-28","CustomerName":"07 NEWYORK TEKEL TOB","ProductName":"EP KASA 50 CL","TotalQuantity":12},{"OrderDate":"2023-09-28","CustomerName":"06 KURUYEMİŞ & TEKEL","ProductName":"EFES MALT TAVA 50 CL","TotalQuantity":12},{"OrderDate":"2023-09-28","CustomerName":"01 KAAN MARKET-FATMA","ProductName":"EFES PİLSEN RESERVE KLI 20*50 CL RB","TotalQuantity":10},{"OrderDate":"2023-09-28","CustomerName":"01 PROMİL MARKET","ProductName":"EFES PİLSEN RESERVE KLI 20*50 CL RB","TotalQuantity":10}];
var productNames = jsonData.map(data => data.ProductName);
var totalQuantities = jsonData.map(data => data.TotalQuantity);
var data = {
labels: productNames,
datasets: [{
label: 'Toplam Miktar',
data: totalQuantities,
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
};
var options = {
scales: {
y: {
beginAtZero: true
}
}
};
var ctx = document.getElementById('myRadarChart').getContext('2d');
var myBarChart = new Chart(ctx, {
type: 'bar',
data: data,
options: options
});
// DataTables için data ekleme
jsonData.forEach(item => {
$('#dataTable tbody').append(`
<tr>
<td>${item.OrderDate}</td>
<td>${item.CustomerName}</td>
<td>${item.ProductName}</td>
<td>${item.TotalQuantity}</td>
</tr>
`);
});
// DataTables başlatma
$('#dataTable').DataTable();
</script>
</body>
</html>
