Creando un Gráfico de Barras con Silverlight y PHP :)
Hola que tal?, mientras escucho Arch Enemy,Dead Eyes See No Future, me me dije a mi mismo "oye mismo, y si el ejemplo del gráfico de barras con Silverlight lo haces con php?" y pensé que era buena idea, ahora bien, no pretendo profundizar en temas de php, y las sentencias que voy a utilizar, si no les gustan a los talibanes de PHP, ejeje, bueno cambian las sentencias, es decir, cambia la forma pero no el fondo.Tengo varios amigos que utilizan php, espero que no se sientan tocados.
Construcción.
Vamos a utilizar los mismos recursos que usamos para el Articulo "Creando un gráfico de barras con silverlight 1.0" , es decir el XAML y los archivos JS , los cuales setean como se va a visualizar el control XAML dentro de la página.
Por razones obvias, el archivo aspx ya no está, lo que esta es nuestra página php, la cual tiene el siguiente código
<?php
$con =mysql_connect("localhost","micuenta","mipass");
mysql_select_db("Animales");
$año=$_POST["año"];
if ($año==""){ $año=2007;}
$sql="select Perros,Gatos,Vacas,Cerdos from porcentajes where Periodo=$año"; $rs=mysql_fetch_array(mysql_query($sql,$con));
$valorPerros=$rs["Perros"];
$valorGatos =$rs["Gatos"];
$valorVacas =$rs["Vacas"];
$valorCerdos=$rs["Cerdos"];
$AltoBarra = 415;
$MarcaTexto = 430;
$altoBarraPerros = ($valorPerros * $AltoBarra) / 100;
$altoBarraGatos = ($valorGatos * $AltoBarra) / 100;
$altoBarraVacas = ($valorVacas * $AltoBarra) / 100;
$altoBarraCerdos = ($valorCerdos * $AltoBarra) / 100;
$PosicionTextoPerros = $MarcaTexto - $altoBarraPerros;
$PosicionTextoGatos = $MarcaTexto - $altoBarraGatos;
$posicionTextoVacas = $MarcaTexto - $altoBarraVacas;
$posicionTextoCerdos = $MarcaTexto - $altoBarraCerdos;
// 'Seteamos el texto que va en cada textblock del control
$TextoPerros = round($valorPerros);
$TextoGatos = round($valorGatos);
$TextoVacas = round($valorVacas);
$TextoCerdos = round($valorCerdos);
$script=" <script type='text/javascript'> function root_Loaded(sender,args) {";
$script.=" sender.findName('barraPerros').Height='$altoBarraPerros';";
$script.=" sender.findName('valorPerros')['Canvas.Top']='$PosicionTextoPerros';"; $script.=" sender.findName('valorPerros').Text='$TextoPerros %';";
$script.=" sender.findName('barraGatos').Height='$altoBarraGatos';";
$script.=" sender.findName('valorGatos')['Canvas.Top']='$PosicionTextoGatos';";
$script.=" sender.findName('valorGatos').Text='$TextoGatos %';";
$script.=" sender.findName('barraVacas').Height='$altoBarraVacas';";
$script.=" sender.findName('valorVacas')['Canvas.Top']='$posicionTextoVacas';";
$script.=" sender.findName('valorVacas').Text='$TextoVacas %';";
$script.=" sender.findName('barraCerdos').Height='$altoBarraCerdos';";
$script.=" sender.findName('valorCerdos')['Canvas.Top']='$posicionTextoCerdos';";
$script.=" sender.findName('valorCerdos').Text='$TextoCerdos %';";
$script.=" }</script>";
?>
Básicamente estamos realizando el mismo proceso, si te das cuenta, vamos a conectarnos una base de Datos Mysql, se hace el query dependiendo del año seleccionado en el combo, se obtienen los datos y se setean las variables para dibujar las barras.
Base de datos Mysql:
Luego tenemos las mismas referencias a los archivos JS, imprimiendo luego el resultado de la concatenación de la variable $script:
Por último, en donde necesites mostrar el gráfico haces la llamada a la función createSilverlight();
Descarga los archivos y la BD desde acá (ahora funciona el enlace!)
Espero que les sirva :):)
Gonzalo.