parzibyte/index.php Secret

## index.php
<!DOCTYPE html>
<html lang="es">
<?php
// Valores con PHP. Estos podrían venir de una base de datos o de cualquier lugar del servidor
$etiquetas = ["Enero", "Febrero", "Marzo", "Abril"];
$datosVentas = [5000, 1500, 8000, 5102];
?>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gráficas con chart.js y PHP | By Parzibyte</title>
    <!-- Importar chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
</head>

<body>
    <h1>Gráfica creada con PHP</h1>
    <a href="https://parzibyte.me/blog">By Parzibyte</a>
    <canvas id="grafica"></canvas>
    <script type="text/javascript">
        // Obtener una referencia al elemento canvas del DOM
        const $grafica = document.querySelector("#grafica");
        // Pasaamos las etiquetas desde PHP
        const etiquetas = <?php echo json_encode($etiquetas) ?>;
        // Podemos tener varios conjuntos de datos. Comencemos con uno
        const datosVentas2020 = {
            label: "Ventas por mes",
            // Pasar los datos igualmente desde PHP
            data: <?php echo json_encode($datosVentas) ?>,
            backgroundColor: 'rgba(54, 162, 235, 0.2)', // Color de fondo
            borderColor: 'rgba(54, 162, 235, 1)', // Color del borde
            borderWidth: 1, // Ancho del borde
        };
        new Chart($grafica, {
            type: 'line', // Tipo de gráfica
            data: {
                labels: etiquetas,
                datasets: [
                    datosVentas2020,
                    // Aquí más datos...
                ]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }],
                },
            }
        });
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="es">
	<?php
	// Valores con PHP. Estos podrían venir de una base de datos o de cualquier lugar del servidor
	$etiquetas = ["Enero", "Febrero", "Marzo", "Abril"];
	$datosVentas = [5000, 1500, 8000, 5102];
	?>

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Gráficas con chart.js y PHP \| By Parzibyte</title>
	<!-- Importar chart.js -->
	<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
	</head>

	<body>
	<h1>Gráfica creada con PHP</h1>
	<a href="https://parzibyte.me/blog">By Parzibyte</a>
	<canvas id="grafica"></canvas>
	<script type="text/javascript">
	// Obtener una referencia al elemento canvas del DOM
	const $grafica = document.querySelector("#grafica");
	// Pasaamos las etiquetas desde PHP
	const etiquetas = <?php echo json_encode($etiquetas) ?>;
	// Podemos tener varios conjuntos de datos. Comencemos con uno
	const datosVentas2020 = {
	label: "Ventas por mes",
	// Pasar los datos igualmente desde PHP
	data: <?php echo json_encode($datosVentas) ?>,
	backgroundColor: 'rgba(54, 162, 235, 0.2)', // Color de fondo
	borderColor: 'rgba(54, 162, 235, 1)', // Color del borde
	borderWidth: 1, // Ancho del borde
	};
	new Chart($grafica, {
	type: 'line', // Tipo de gráfica
	data: {
	labels: etiquetas,
	datasets: [
	datosVentas2020,
	// Aquí más datos...
	]
	},
	options: {
	scales: {
	yAxes: [{
	ticks: {
	beginAtZero: true
	}
	}],
	},
	}
	});
	</script>
	</body>

	</html>