Me gustaria que me dijeran como hacer una grafica con google chart con php y mysql! ya que e visto ejemplos y ninguno me ha ejecutado bien!
de antemano gracias!!
entre Desarrolladores
Recibe ayuda de expertos
Registrate y pregunta
Es gratis y fácil
Recibe respuestas
Respuestas, votos y comentarios
Vota y selecciona respuestas
Recibe puntos, vota y da la solución
Pregunta
2 Respuestas
Las gráficas de Google Chart no se programan con PHP ni MySQL sino con HTML y Javascript. En la documentación puedes encontrar un ejemplo simple.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
vAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>Cuestión aparte es que para generar el HTML y el JS utilices la combinación de PHP y MySQL.
Debe tomártelo como 2 pasos:
- Conseguir con HTML y JS que se dibuje la gráfica que quieres.
- Si quieres que la gráfica cambie dinámicamente, el HTML y JS anteriores deben generarse con PHP (o equivalente), pero esto ya se trata de un problema independiente de Google Chart.
Para el punto 1 la documentación es tu mejor amiga.
Te paso un ejemplo, a mi me funciona como está, claro que quitaré algunas cosas y serán comentadas.
<?php
//Archivos de inclusion
//Configuraciones
//Conexion a BBDD
//Funciones, etcétera
//Función para formato de fecha a 'YYYYMMAA HH:MM:SS'
$personas = obtenerPersonas();
?>
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<!-- Reset CSS -->
<link rel="stylesheet" href="http://187.210.109.99/css/reset.css" />
<!-- jQuery plugin -->
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
<!-- plugin Gráficas Google -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<!-- Local CSS -->
<link rel="stylesheet" href="../css/consulta.css" />
<link rel="stylesheet" href="../css/impresion.css" media="print" />
<!-- Local script -->
<title>
Reporte semanal
</title>
</head>
<body>
<header>
<img src="../imagenes/logo.png" alt="Empresa" id="logo">
<h1>
Reporte
</h1>
</header>
<nav>
</nav>
<section class="reporte">
<form action="resultado.php" method="post" class="consulta">
<legend>
Especifique las fechas
</legend>
<ul class="fechas">
<li>
<label for="semana">
Seleccione semana:
</label>
<input type="week" name="semana" id="semana" value="<?php echo $semana;?>" />
</li>
<li>
<input type="submit" name="consultar" id="consultar" value="Consultar" />
</li>
</ul>
<p class="rango-fechas">
Reporte del <span class="fecha-inicial"></span> al <span class="fecha-final"></span>
</p>
</form>
<?php
$dias = array('Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado');
foreach ($personas as $valor) {
$consulta['id'] = trim($valor['codigoPersona']);
$agenda = array();
$citas = array();
$agenda = obtenerResultadoAgenda($consulta);
$citas = obtenerCitasPersona($consulta, false);
echo '
<section class="persona">
<!-- Tabula los datos en HTML -->
<script type="text/javascript">
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
[\'Día\', \'Atendidas\', \'Agendadas\', \'Asistidas\']';
foreach ($musculo[$consulta['id']] as $key => $value) {
echo '
,[\''. $key .'\', '. $value['atendidas'].', '. $value['agendadas'] .', '. $value['asistidas'] .', ]';
}
echo '
]);
var options = {
title : \'Producción por persona\',
vAxis: {title: "Cantidad",
minValue: 0, count: 8
},
hAxis: {title: "Día", color: \'#333\', count: 8 },
seriesType: "bars",
series: {5: {type: "line"}},
colors: [\'#FF0000\', \'#00FF00\', \'#0000FF\'],
setColumnLabel : ["Atendido", "Agendada", "Asistida"]
};
var chart = new google.visualization.ComboChart(document.getElementById(\''. $consulta['id'] .'\'));
chart.draw(data, options);
}
google.setOnLoadCallback(drawVisualization);
</script>
<div id="'. $consulta['id'] .'" style="width: 860px; height: 500px;"></div>
';
}
echo '
</section>
</section>
<footer>
<pre>';
echo '
</pre>
</footer>
</body>
</html>
';
?>Por favor, accede o regístrate para responder a esta pregunta.
Actividad Reciente
alyvrs preguntó Oct 19
Ayuda , necesito mostrar datos creados solo por el…ManHol preguntó Jul 9
pasar un archivo de excel a csv en pythonArtEze respondió Abr 24
Alguien sabe, no me ignorenArtEze seleccionó una respuesta Abr 24
Bajar extensión de Chrome sin actualizar el navega…ArtEze respondió Abr 24
Bajar extensión de Chrome sin actualizar el navega…ArtEze preguntó Abr 24
Bajar extensión de Chrome sin actualizar el navega…ArtEze respondió Abr 24
No me deja instalar OracleArtEze respondió Abr 24
Formulario que guarde los datos de un jsonArtEze comentó Abr 24
Script /boot/ scrapingSantiago2610 comentó Mar 23
Acualizar ChoiceField en django
Ultimas Preguntas
Usuarios Top
- Leonardo-Tadei
- 227320 Puntos
- Peter
- 150480 Puntos
- white
- 75880 Puntos
- carlossevi
- 63580 Puntos
- magarzon
- 30650 Puntos
- pregunton
- 20400 Puntos