Uso chart.js en una página y quiero usar datos almacenados en una base de datos SQL como datos para chart.js
Así es como se ve el fragmento de chart.js:
// Chart Data var chartData = { labels: ["Jänner", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"], datasets: [{ label: "Wert Verkaufter Waren 2022 - Standorte kumuliert", //Data for Graph data: [65, 59, 80, 81, 56, 55, 40], fill: false, borderDash: [5, 5], borderColor: "#346200", pointBorderColor: "#346200", pointBackgroundColor: "#FFF", pointBorderWidth: 2, pointHoverBorderWidth: 2, pointRadius: 4, }] };Los valores de datos [65, 59, 80, 81, 56, 55, 40] es lo que quiero reemplazar con datos de mi base de datos.
¿Puedo archivar esto con el uso de php?
Por supuesto que puedes lograr esto con PHP.
Hay dos opciones de cómo hacer esto:
El primer método sería algo como esto. Recuerde que este es un bosquejo rápido que no incluye el manejo de errores, las mejores prácticas de seguridad, etc.
<?php $mysqli = new mysqli('localhost', 'my_user', 'my_password', 'my_db'); $result = $mysqli->query("SELECT wert FROM verkaeufe_monatlich;"); $data = $result->fetch_all(); $mysqli->close(); ?> <html> <!-- Your normal webpage html content --> <script> var chartData = { labels: ["Jänner", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"], datasets: [{ label: "Wert Verkaufter Waren 2022 - Standorte kumuliert", //Data for Graph data: <?php echo json_encode($data); ?>, fill: false, borderDash: [5, 5], borderColor: "#346200", pointBorderColor: "#346200", pointBackgroundColor: "#FFF", pointBorderWidth: 2, pointHoverBorderWidth: 2, pointRadius: 4, }] }; </script> </html>Para el segundo método, cree un script PHP separado que contenga aproximadamente la lógica de la base de datos y la codificación JSON como se indicó anteriormente y llámelo desde su script de esta manera:
<script> fetch('/database-query.php') .then(response => response.json()) .then(jsonData => { const chartData = { labels: ["Jänner", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"], datasets: [{ label: "Wert Verkaufter Waren 2022 - Standorte kumuliert", data: jsonData, fill: false, borderDash: [5, 5], borderColor: "#346200", pointBorderColor: "#346200", pointBackgroundColor: "#FFF", pointBorderWidth: 2, pointHoverBorderWidth: 2, pointRadius: 4, }] }; // do stuff with chartData }) .catch(error => { console.error(error); }); </script>