Reportes Graficos con PHP

KATHYU · #1 (**permalink**) 26/03/2014, 15:15

Bueno en una empresa me pidieron un pequeño sistema en php donde pueda conectarme a la base que esta en sql server 2012, y generar reportes. Despues de buscar y leer hice lo necesario para poder hacer los reportes.
Lo logre usando php 5.3 y las librerias php_mssql.dll y ntwlib.dll

La cuestion es que hoy quieren que el sistema tenga antes que nada reportes gráficos, que en el index del sitio aparezca algo como los reportes de scriptcase

Entonces baje Highcharts y procedi a crear primero en MySQL una prueba, la cuestion es que a la hora de hacer que aparescan mis datos solo me aparece el ultimo dato de mi consulta.

Pondria codigo pero cada vez que quiero poner codigo php o html (aunq sea un poco) me pasa a un captcha y de ahi no pasa.

Ya intente meter los datos por medio de un for, de un while y con asignacion de variables y nada

En el archivo adjunto presento todas las formas en las que he intentado, por favor ayudenme, ya logro sacar un dato (el ultimo solo me hacen falta los otros)

Archivo php con las formas de querer presentar los datos

PD: que hago con eso que no me permite escribir codigo ???

PD2: Saben de alguna herramienta mas facil para crear dichos graficos ???

Erick_MD9 · #2 (**permalink**) 26/03/2014, 15:38

Hola, yo he usado jpgraph del lado del servidor. Saludos.

KATHYU · #3 (**permalink**) 26/03/2014, 16:13

Pero que tan dificil podria ser en comparacion con highchart ???

evolutionrgm · #4 (**permalink**) 27/03/2014, 05:47

Yo utilice unos graficos de google API
te dejare un ejemplo

Código PHP:

Ver original<?php
$con=mysql_connect("localhost","root","pass") or die("Failed to connect with database!!!!");
mysql_select_db("BD", $con); 
mysql_query("SET NAMES 'utf8'");
// The Chart table contains two fields: weekly_task and percentage
// This example will display a pie chart. If you need other charts such as a Bar chart, you will need to modify the code a little to make it work with bar chart and other charts
$sth = mysql_query("SELECT  alta.ccosto,producto.nombre,COUNT(alta.producto)as cantidad
    from alta 
INNER JOIN producto 
ON alta.producto=producto.cod_producto
INNER JOIN
centro_costo
on 
alta.ccosto=centro_costo.idccosto GROUP BY alta.producto;");
 
 
 
$rows = array();
//flag is not needed
$flag = true;
$table = array();
$table['cols'] = array(
 
    // Labels for your chart, these represent the column titles
    // Note that one column is in "string" format and another one is in "number" format as pie chart only required "numbers" for calculating percentage and string will be used for column title
    array('label' => 'nombre', 'type' => 'string'),
    array('label' => 'cantidad', 'type' => 'number')
 
);
 
$rows = array();
while($r = mysql_fetch_assoc($sth)) {
    $temp = array();
    // the following line will be used to slice the Pie chart
    $temp[] = array('v' => (string) $r['nombre']); 
 
    // Values of each slice
    $temp[] = array('v' => (int) $r['cantidad']); 
    $rows[] = array('c' => $temp);
}
 
$table['rows'] = $rows;
$jsonTable = json_encode($table);
//echo $jsonTable;
?>
 
<html>
  <head>
    <!--Load the Ajax API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">
 
    // Load the Visualization API and the piechart package.
    google.load('visualization', '1', {'packages':['corechart']});
 
    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);
 
    function drawChart() {
 
      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(<?=$jsonTable?>);
      var options = {
           title: 'Cantidad x Productos',
          is3D: 'true',
          width: 800,
          height: 600
        };
      // Instantiate and draw our chart, passing in some options.
      // Do not forget to check your div ID
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
    </script>
  </head>
 
  <body>
    <!--this is the div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>

KATHYU · #5 (**permalink**) 27/03/2014, 10:34

Pero si no hay internet no funcionan jejej
En mi caso con highcharts lo estoy haciendo offline

Yo logro hacer que me muestre el ultimo dato, creo una query, hago un while, e imprimo esos datos en la grafica, lo malo es que solo me muestra el ultimo dato, asi puedo imprimir mis datos de consulta:

Código PHP:

Ver originalwhile($row = $sql->fetch_array(MYSQLI_NUM))
 {
   $nombre = $row[0];
   $venta = $row[1];
   echo $nombre, $venta.'<br>';
 }

Asi aparece en navegador

Código:

Telefonia18
Computadoras25
Accesorios56

En la grafica lo que hago es imprimir $nombre y $venta en su respectivo lugar y me toma accesorios nada mas con el 100%

a18327 · #6 (**permalink**) 27/03/2014, 11:16

¿Como le pasas los datos a Highcharts?
Segun entiendo le debes pasar un array que por lo general es por medio de JSON (Ajax).
No entiendo cuando dices que imprimes las variables en la grafica (uno por uno), porque como dije lo que se le pasa es un array no variables por variable.

KATHYU · #7 (**permalink**) 27/03/2014, 11:52

Que no se supone que

Código PHP:

Ver originalwhile($row = $sql->fetch_array(MYSQLI_NUM))

Crea un array asociativo o numerico como lo tengo yo ahorita ???

Pues en le mostrare como lo tengo ahorita:

Aca esta sorry no me dejo poner todo el codigo PHP en las Hihglight

Necesito mucha ayuda creo

ocp001a · #8 (**permalink**) 27/03/2014, 12:13

Realiza la consulta e imprime en pantalla los datos uno por uno para verificar que tu consulta te devuelve todo, y descartar que el problema esté en la consulta

KATHYU · #9 (**permalink**) 27/03/2014, 12:18

Ya lo hace, lastima que no les pueda poner el codigo, pero hago la consulta, luego un

Código PHP:

Ver originalwhile($row = $sql->fetch_array(MYSQLI_NUM))
{
  $nombre = $row[0];
  $venta = $row[1];
 echo $nombre, $venta.'<br>';
}

Donde $sql es la variable de mi query; Y eso imprime asi:

Código:

Telefonia18
Computadoras25
Accesorios56

a18327 · #10 (**permalink**) 27/03/2014, 12:32

En el codigo veo que recorres un ciclo while y dentro hay un codigo javscript que crea la grafica por eso solamente se mostraba el ultimo dato ya que no estabas agregando datos a la grafica si no que creabas varias graficas con un solo dato y cada nueva grafica reemplazaba a la anterior.

Al javascript debes pasarle un array como ya te habia dicho antes, te pongo el codigo

Código PHP:

  <?php 
    $mysqli = new mysqli("localhost","root","","kosys"); 
 
    //Esta es la query 
    $sql = $mysqli->query("SELECT rubros.nombre as nombre, sum(productos.ventas) AS venta_rubro FROM productos INNER JOIN rubros ON productos.rubro = rubros.id GROUP BY productos.rubro"); 
    $datos=array();//Nueva Linea 
    while($row = $sql->fetch_array(MYSQLI_NUM)) 
    {                     
        $nombre = $row[0]; 
        $venta = $row[1]; 
        $datos[]=array($nombre,$venta);//Nueva Linea 
    } 
?> 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
        <script type="text/javascript" src="jquery-ui-1.8.20\jquery-1.7.2.js"></script> 
        <script type="text/javascript"> 
            $(function () { 
                $('#container').highcharts({ 
                    chart: { 
                        plotBackgroundColor: null, 
                        plotBorderWidth: null, 
                        plotShadow: false 
                    }, 
                    title: { 
                        text: 'Venta por Rubros' 
                    }, 
                    tooltip: { 
                        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
                    }, 
                    plotOptions: { 
                        pie: { 
                            allowPointSelect: true, 
                            cursor: 'pointer', 
                            dataLabels: { 
                                enabled: true, 
                                color: '#000000', 
                                connectorColor: '#000000', 
                                format: '<b>{point.name}</b>: {point.percentage:.1f} %' 
                            } 
                        } 
                    }, 
                    series: [{ 
                        type: 'pie', 
                        name: 'Venta por Rubros', 
                        data: <?php json_encode($datos) ?>//Genera algo como [["Telefonia",18]["Computadoras",25]["Accesorios",56]] 
                    }] 
                }); 
            }); 
        </script> 
    </head> 
    <body> 
        <script src="Highcharts\Highcharts-3.0.10\js\highcharts.js"></script> 
        <script src="Highcharts\Highcharts-3.0.10\js\modules\exporting.js"></script> 
        <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 
    </body> 
</html>

KATHYU · #11 (**permalink**) 27/03/2014, 12:49

Muchas gracias, segui al pie de la letra sus instrucciones y no imprime la grafica, no hace nada, y si en el codigo que usted me arreglo dentro del while pongo

Código PHP:

Ver originalprintf ("%s (%s)\n", $row[0], $row[1]); //o si pongo
printf ("%s (%s)\n", $nombre, $venta);

Entonces imprime esto:

Código:

Telefonia (39) Computadoras (18) Accesorios (56)

Ojo y para json_encode($datos) no necesito alguna libreria de json ??? como puedo ver la forma en la que json_encode termina organizando los datos ??

porq creo que los organiza asi

Código:

[["Telefonia",18]["Computadoras",25]["Accesorios",56]]

y highcharts los necesitaria separados, cada rubro con su venta y separados por comas...

Código:

[["Telefonia",18],
["Computadoras",25],
["Accesorios",56]]

Sorry es que no comprendo, en serio

PD: una duda, realmente estoy bien lejos de lo que deseo hacer o ando algo cerca

a18327 · #12 (**permalink**) 27/03/2014, 13:03

Se puede pasar el array de php a un array de javascript y pasar el array de javascript a la grafica

Código PHP:

Ver original<?php
    $mysqli = new mysqli("localhost","root","","kosys");
 
    //Esta es la query
    $sql = $mysqli->query("SELECT rubros.nombre as nombre, sum(productos.ventas) AS venta_rubro FROM productos INNER JOIN rubros ON productos.rubro = rubros.id GROUP BY productos.rubro");
    $datos=array();//Nueva Linea
    while($row = $sql->fetch_array(MYSQLI_NUM))
    {                   
        $nombre = $row[0];
        $venta = $row[1];
        $datos[]=array($nombre,$venta);//Nueva Linea
    }
?>
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script type="text/javascript" src="jquery-ui-1.8.20\jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(function () {
                var datos=$.parseJSON(<?php echo json_encode($datos); ?>);
                $('#container').highcharts({
                    chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false
                    },
                    title: {
                        text: 'Venta por Rubros'
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                color: '#000000',
                                connectorColor: '#000000',
                                format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                            }
                        }
                    },
                    series: [{
                        type: 'pie',
                        name: 'Venta por Rubros',
                        data: datos,
                    }]
                });
            });
        </script>
    </head>
    <body>
        <script src="Highcharts\Highcharts-3.0.10\js\highcharts.js"></script>
        <script src="Highcharts\Highcharts-3.0.10\js\modules\exporting.js"></script>
        <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
    </body>
</html>

json_encode no necesita de librerias, ya viene con php.
Lo que genera json_encode es un string que representa un array de php, en javascript se toma ese string y se convierte de nuevo a un array con la funcion parseJSON(que es una función de jquery) y ese array se le pasa a la grafica.

KATHYU · #13 (**permalink**) 27/03/2014, 14:09

Según veo no andaba tan mal, lo malo es que la grafica aun no sale

La cosa es que ni error muestra

que sera ?? la query esta bien, las librerias igual, cabe mencionar que baje jquery 1.8.2 para hacer todo offline

a18327 · #14 (**permalink**) 27/03/2014, 14:23

Si no te muestra error es porque no hay error al menos en php, entonces el error debe estar en el javascript, revisa si te marca error en el navegador con clic derecho y opcion Inspeccionar elemento.

Otra cosa veo que la libreria e highcharts la tienes en el body, pero deberia ir antes del script de la grafica y despues de la libreria jquery, el script de la grafica debe ejecutarse despues de que la pagina este cargada, con esos cambios quedaria asi

Código PHP:

Ver original<?php
    $mysqli = new mysqli("localhost","root","","kosys");
 
    //Esta es la query
    $sql = $mysqli->query("SELECT rubros.nombre as nombre, sum(productos.ventas) AS venta_rubro FROM productos INNER JOIN rubros ON productos.rubro = rubros.id GROUP BY productos.rubro");
    $datos=array();//Nueva Linea
    while($row = $sql->fetch_array(MYSQLI_NUM))
    {                   
        $nombre = $row[0];
        $venta = $row[1];
        $datos[]=array($nombre,$venta);//Nueva Linea
    }
?>
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script type="text/javascript" src="jquery-ui-1.8.20\jquery-1.7.2.js"></script>
        <script src="Highcharts\Highcharts-3.0.10\js\highcharts.js"></script>
        <script src="Highcharts\Highcharts-3.0.10\js\modules\exporting.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                var datos=$.parseJSON(<?php echo json_encode($datos); ?>);//Nueva linea
                $('#container').highcharts({
                    chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false
                    },
                    title: {
                        text: 'Venta por Rubros'
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                color: '#000000',
                                connectorColor: '#000000',
                                format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                            }
                        }
                    },
                    series: [{
                        type: 'pie',
                        name: 'Venta por Rubros',
                        data: datos,
                    }]
                });
            });         
        </script>
    </head>
    <body>      
        <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
    </body>
</html>

KATHYU · #15 (**permalink**) 27/03/2014, 14:53

Pues no hay diferencia, aunq no creia hubiese porq tal como se ve el codigo es como viene en los ejemplos, yo tome los ejemplos y a eso le he metido php

Mire y en este ejemplo como podria pasarlo a programacion estructurada ?? si se fija ahi crean objetos y yo estoy haciendo consultas y el while, pero la forma de como le pasan el array a la data me parece, cree que se pueda adecuar ell ejemplo del link a mi codigo

Bien y sabe de otra libreria que me ayude ?? ya intente con SSRS, y ahorita con highcharts, pero si no funciona otra que he visto es JPGraph

a18327 · #16 (**permalink**) 27/03/2014, 15:29

Ya vi cual es el error, el error es que json_encode crea un array como [["Telefonia","18"],["Computadoras","25"],["Accesorios","56"]], pero highcharts espera un array como [["Telefonia",18]["Computadoras",25]["Accesorios",56]], es decir numeros sin comillas (si tienen comillas lo reconoce como texto).
Entonces solo cambia la linea

Código PHP:

Ver originalvar datos=$.parseJSON(<?php echo json_encode($datos); ?>);//Nueva linea

por

Código PHP:

Ver originalvar datos=<?php echo preg_replace( "/\"(\d+)\"/", '$1', json_encode($datos)); ?>;//Nueva linea

la funcion preg_replace de php hace el trabajo de eliminar las comillas en los numeros.

KATHYU · #17 (**permalink**) 27/03/2014, 15:45

Perfecto simplemente perfecto !!!!!

Muchas Gracias, en efecto eso era, con este borrador espero replicar el sistema que me piden para las otras graficas y con conexion a SQL Server, la conexion ya esta y la query igual solo faltaria integrar las grafica.

Espero si tengo dudas poder contar con su valiosa ayuda.

Mil gracias otra vez

Alexis88 · #18 (**permalink**) 01/04/2014, 13:41

Solo para aportar al tema, les dejo esta útil librería con la que elaboro gráficos estadísticos en base a datos que se encuentran en una BD. Funciona con o sin conexión a internet y su implementación es realmente sencilla.

Libchart

Saludos

KATHYU · #19 (**permalink**) 01/04/2014, 14:06

Seria de probar !!!

Y si usted la maneja ya se a quien consultar