Foros del Web » Administración de Sistemas » Unix / Linux »

[SOLUCIONADO] Crear GRAFICOS desde consola con API google

Estas en el tema de Crear GRAFICOS desde consola con API google en el foro de Unix / Linux en Foros del Web. Buenas tardes compañeros, aprovechando el descubrimiento de un API de google para generar graficos realize lo siguiente desde Debian-Squeeze y espero os sea de utilidad, ...
  #1 (permalink)  
Antiguo 28/06/2013, 15:41
Avatar de barna_rasta  
Fecha de Ingreso: agosto-2003
Mensajes: 214
Antigüedad: 20 años, 8 meses
Puntos: 11
Crear GRAFICOS desde consola con API google

Buenas tardes compañeros,
aprovechando el descubrimiento de un API de google para generar graficos realize lo siguiente
desde Debian-Squeeze y espero os sea de utilidad, mi consulta sobre su mejora la expondre al final.



Teniendo un fichero 'csv' generado desde mi aplicacion con SCULPTOR4GL llamado datograf.csv , que contiene:

Código:
'Mes','Ventas','Gastos'
      '1', 287646,14587
      '2', 385249,14463
      '3', 404357,16486
      '4', 367725,15428
      '5', 361848,14433
      '6', 356989,13454
      '7', 327177,13656
      '8', 287788,13351
      '9', 343504,14460
     '10', 327881,14022
     '11', 285226,13867
     '12', 296442,15402
Lo leemos y generamos grafico en formato 'html' para posterior envio al correo del usuario que lo solicita, - supongo que seria posible abrirlo con un navegador, pero mi aplicacion trabaja con clientes que usan putty, (desde windows. linux, tablets,......) utiliando ssh para la conexion, por lo que siendo una emulacion de terminal su salida a navegador no es posible ( o no lo consegui :) ).

Codigo del script entero:
Código:
#! /bin/bash
################################################################
 ######## Definicion de la ruta y fichero donde se ubicara el resultado #### 
################################################################
TEMP=$(mktemp -t --tmpdir=/tmp grafico.XXXXX.html)
##################################################################### 
####### Lectura y almacenamiento en array de los datos para posterior utilizacion #### 
#####################################################################

	i=0
	while IFS=',' read linea ; do
	i=$(($i+1))
	q[$i]=${linea}
	done <<< "`cat datograf.csv`"
cat > $TEMP <<EOF
####################################################################
 ######## Inico del codigo para generar el " html " utilizando el API 
####################################################################
<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([
	[${q[1]}],
	[${q[2]}],
	[${q[3]}],
	[${q[4]}],
	[${q[5]}],
	[${q[6]}],
	[${q[7]}],
	[${q[9]}],
	[${q[10]}],
	[${q[11]}],
	[${q[12]}],
	[${q[13]}]
        ]);
        var options = {
          title: 'Antonio Rodriguez Z45',
	  'width':1000,
	  'height':600
        };
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 1000px; height: 600px;"></div>
  </body>
</html>
EOF
####################################### final del codigo generador

###################### Envio por email del resultado ##################
echo ''|mutt -s "Grafico Z45" -a $TEMP -b [[email protected]]
#######################
Y ahora la tanda de preguntas :)
el script es mejorable sin duda y agradecere cualquier aportacion que amplie mis conocimientos,
lo primero que intente - sin conseguirlo - fue intentar reducir la zona :
Código:
   function drawChart() {
        var data = google.visualization.arrayToDataTable([
	[${q[1]}],
	[${q[2]}],
	[${q[3]}],
	[${q[4]}],
	[${q[5]}],
	[${q[6]}],
	[${q[7]}],
	[${q[9]}],
	[${q[10]}],
	[${q[11]}],
	[${q[12]}],
	[${q[13]}]
        ]);
pensando en utilizar un bucle ' for ' o ' while ', pero es zona de javascript y estoy negado para
ello, busque algunos ejemplos de uso en foros javascript pero resultaron infructuosos.

Alguien diestro en javascript podria darme una ayudita?
en esta ocasion solo se trataro de una grafica anual + cabecera ( 13 elementos ),
pero para algo superior a 20 elementos puede ser una locura,
sin mencionar temas de estetica.

Gracias!!!
  #2 (permalink)  
Antiguo 30/06/2013, 13:36
Avatar de enlinea777  
Fecha de Ingreso: mayo-2008
Ubicación: frente al pc
Mensajes: 1.830
Antigüedad: 15 años, 11 meses
Puntos: 127
Respuesta: Crear GRAFICOS desde consola con API google

Porque #! /bin/bash?
eso lo puedes hacer con php directamente
  #3 (permalink)  
Antiguo 30/06/2013, 15:54
Avatar de barna_rasta  
Fecha de Ingreso: agosto-2003
Mensajes: 214
Antigüedad: 20 años, 8 meses
Puntos: 11
Respuesta: Crear GRAFICOS desde consola con API google

Cita:
Iniciado por enlinea777 Ver Mensaje
Porque #! /bin/bash?
eso lo puedes hacer con php directamente
Gracias por tu aporte 'enlinea777',
bash, php o cualquier otro lenguage solo son elementos vehiculares para injectar datos creando el html necesario para el API

El dilema que mencione en mi post inicial aun sigue existiendo ,
como lo solucionariamos desde php ?
  #4 (permalink)  
Antiguo 01/07/2013, 09:02
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Crear GRAFICOS desde consola con API google

Primero que nada, te aconsejaría sustituir la línea
Código BASH:
Ver original
  1. done <<< "`cat datograf.csv`"
por
Código BASH:
Ver original
  1. done <datograf.csv

No es necesario que hagas la reducción desde Javascript, ¿por qué simplemente no usas un bucle en bash? Algo como

Código BASH:
Ver original
  1. for elem in ${q[@]}; do
  2.     echo "[$elem],"
  3. done

O guardar cada "echo" en una variable y luego imprimirla en el lugar correcto del Javascript


Saludos.
  #5 (permalink)  
Antiguo 01/07/2013, 15:44
Avatar de barna_rasta  
Fecha de Ingreso: agosto-2003
Mensajes: 214
Antigüedad: 20 años, 8 meses
Puntos: 11
Respuesta: Crear GRAFICOS desde consola con API google

Muchisimas gracias Alvaro por interesarte en el tema, quizas no lo mencione y quizas sea importante saber que estoy con Debian-Squeeze.:


Cita:
Primero que nada, te aconsejaría sustituir la línea
Código BASH:
Ver original
  1. done <<< "`cat datograf.csv`"
por
Código BASH:
Ver original
  1. done <datograf.csv
Pues lo que me propones fue como empece a desarrollarlo y me tiraba el siguiente error:
Cita:
bash: creagraf.sh: linea 12: error sintactico cerca del elemento inesperado `datograf.csv'
bash: creagraf.sh: linea 12: ` done < cat datograf.csv
************* me coloca en el error una comilla inexistente en el codigo done < cat datograf.csv
??????
Y empece a buscar info de delimitadores encontrando lo ya expuesto como valido y sin errores.

-----------------------------------------

Cita:
Código BASH:
Ver original
  1. for elem in ${q[@]}; do
  2.     echo "[$elem],"
  3. done
El incorporar ese codigo ya lo probe sin resultados anteriormente insertandolo en:
Código:
 function drawChart() {'
        var data = google.visualization.arrayToDataTable([ 
	for elem in ${!q[*]}
	do
	[${q[$elem]}]
	done
        ]); 
        var options = { 
        title: 'Antonio Rodriguez Z45',
	 'width':1000,"
	  'height':600"
        };
Viendo el resultado almacenados de los html producidos:
Código:
<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([
	['Mes','Ventas','Gastos'],
	[      '1', 287646,14587],
	[      '2', 385249,14463],
	[      '3', 404357,16486],
	[      '4', 367725,15428],
	[      '5', 361848,14433],
	[      '6', 356989,13454],
	[      '8', 287788,13351],
	[      '9', 343504,14460],
	[     '10', 327881,14022],
	[     '11', 285226,13867],
	[     '12', 296442,15402]
        ]);
        var options = {
          title: 'Antonio Rodriguez Z45',
	  'width':1000,
	  'height':600
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>
observo que los datos del array, que son los del 'csv' son sustituidos e introducidos en un formato especifico
para utilizar el API, lo que me lleva a pensar que se tiene que conservar la estructura
[ datos ] al realizar la alimentacion de la funcion:
function drawChart() {
var data = google.visualization.arrayToDataTable([

Última edición por barna_rasta; 01/07/2013 a las 15:49
  #6 (permalink)  
Antiguo 01/07/2013, 18:22
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Crear GRAFICOS desde consola con API google

Cita:
Iniciado por barna_rasta Ver Mensaje
Pues lo que me propones fue como empece a desarrollarlo y me tiraba el siguiente error:
Es que parece que has puesto
< cat archivo

cuando debe ser

< archivo

La comilla es simplemente la forma en la que te muestra la línea que contiene el error.

Con respecto al segundo problema, no veo dónde está el error. ¿lo que querés es eliminar la línea de los títulos?


Saludos.
  #7 (permalink)  
Antiguo 02/07/2013, 14:22
Avatar de barna_rasta  
Fecha de Ingreso: agosto-2003
Mensajes: 214
Antigüedad: 20 años, 8 meses
Puntos: 11
Respuesta: Crear GRAFICOS desde consola con API google

Cita:
Es que parece que has puesto
< cat archivo

cuando debe ser

< archivo
Terrible error, ciego perdido !!!!!
------------------------------ Recapitulando sobre el problema --------------------------------------------------
me centrare solo en la parte de la asignacion de datos a la tabla para que el API pueda gestionarlo, el script entero esta en la cabecera del POST.
Teniendo los datos en negrita definidos y estaticos
Código:
function drawChart() {
        var data = google.visualization.arrayToDataTable([

['literal-1' , 'literal-2' ]
[ dato1-1 , dato1-2 ]
[ dato2-1 , dato2-2 ]
[ dato3-1 , dato3-2 ]

        ]);
yo me propuse realizar algo mas util y dinamico que permitiera la entrada de datos desde un fichero externo.
fue cuando cambie los valores fijos a valores guardados en array, leidos previamente de un 'csv' - poniendo las variables cambiantes en el formato entendible del API que es entre corchetes:

no crei inicialmente que funcionara, pero se lo comio!!! y funciona:
Código:
  function drawChart() {
        var data = google.visualization.arrayToDataTable([
	[${q[1]}],
	[${q[2]}],
	[${q[3]}],
	[${q[4]}],
	[${q[5]}],
	[${q[6]}],
	[${q[7]}],
	[${q[9]}],
	[${q[10]}],
	[${q[11]}],
	[${q[12]}],
	[${q[13]}]
        ]);
Y la pregunta/dilema/asunto es como reducir la deficion de los datos entre corchetes utilizando un bucle for o while , ya que en esta ocasion solo son 13 elementos a definir, pero si se tratara de dar - por ejemplo -, una grafica de temperaturas anual, dia a dia, ya serian 365 valores entre corchetes y no es que sea imposible, pero ......................
__________________________________________________ _______________
Durante estos dias estuve pensando en la 'burda' posibilidad de crear 2 archivos fijos:
zona alta:
Código:
<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([
zona baja:
Código:
 var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 1000px; height: 600px;"></div>
  </body>
</html>
EOF
####################################### final del codigo generador

###################### Envio por email del resultado ##################
echo ''|mutt -s "Grafico Z45" -a $TEMP -b [[email protected]]
#######################
crear un archivo que me acumule directamente los datos necesarios en el formato valido:
Código:
['Mes','Ventas','Gastos'],
	[      '1', 287646,14587],
	[      '2', 385249,14463],
	[      '3', 404357,16486],
	[      '4', 367725,15428],
	[      '5', 361848,14433],
	[      '6', 356989,13454],
	[      '8', 287788,13351],
	[      '9', 343504,14460],
	[     '10', 327881,14022],
	[     '11', 285226,13867],
	[     '12', 296442,15402]
Y utilizar la fusion de los tres, una forma muy poco ortodoxa pero que quizas hasta que no me ilumine un poco mas sea valida -por el momento-

Última edición por barna_rasta; 02/07/2013 a las 14:28
  #8 (permalink)  
Antiguo 03/07/2013, 09:50
Avatar de enlinea777  
Fecha de Ingreso: mayo-2008
Ubicación: frente al pc
Mensajes: 1.830
Antigüedad: 15 años, 11 meses
Puntos: 127
Respuesta: Crear GRAFICOS desde consola con API google

AL GRANO

PAR QUE QUIERES HACER ESO?????
puedes hacerlo en PHP?
si es asi te paso el codigo
en bash es un poco complicado
quieres que se genere y te lo mande por correo?

Por que un html,cuando puede ser un php que al llamarlo te arme el archivo y lo muestre sin problemas sin tener que generarlo a cada momento y enviarlo por correo.

en todo caso en "bash" te serviria hacer los 3 archivos y sumarlos con cat eso es mas rapido que un bucle que lea y re ordene
  #9 (permalink)  
Antiguo 03/07/2013, 12:07
Avatar de barna_rasta  
Fecha de Ingreso: agosto-2003
Mensajes: 214
Antigüedad: 20 años, 8 meses
Puntos: 11
Respuesta: Crear GRAFICOS desde consola con API google

Cita:
Iniciado por enlinea777 Ver Mensaje
AL GRANO


si es asi te paso el codigo
en bash es un poco complicado
Venga!!!!
  #10 (permalink)  
Antiguo 09/07/2013, 07:43
Avatar de barna_rasta  
Fecha de Ingreso: agosto-2003
Mensajes: 214
Antigüedad: 20 años, 8 meses
Puntos: 11
Respuesta: Crear GRAFICOS desde consola con API google

Finalmente despues de varios dias dandole vueltas a la cebolla y gogleando,
encontre la solucion.

Nos olvidamos de todo lo anterior expuesto y planteamos:

Teniendo el fichero en /tmp/grafico0.csv con las columnas:
SEMANA - 2010 - 2011 - 2012 -2013
Cita:
"1 ",367745 ,269985 ,268073 ,287646
"2 ",343729 ,288395 ,393720 ,385249
"3 ",330653 ,297594 ,350004 ,404357
"4 ",317748 ,324180 ,318972 ,367725
"5 ",310912 ,307350 ,363278 ,361848
"6 ",275798 ,325789 ,329747 ,356989
"7 ",274978 ,291914 ,336503 ,327177
"8 ",283894 ,294966 ,333348 ,287788
"9 ",291978 ,297027 ,320611 ,343504
"10 ",318932 ,308997 ,322562 ,327881
"11 ",338740 ,283180 ,322524 ,285226
"12 ",313487 ,296403 ,330604 ,296442
"13 ",283156 ,316749 ,305207 ,292316
"14 ",314782 ,380498 ,314883 ,268771
"15 ",331694 ,359216 ,323501 ,314356
"16 ",306397 ,317591 ,367551 ,285752
"17 ",285296 ,367338 ,382748 ,304425
"18 ",323747 ,400269 ,366613 ,323763
"19 ",311326 ,399952 ,380544 ,329625
"20 ",272800 ,383026 ,337980 ,331878
"21 ",264653 ,405760 ,356246 ,309363
"22 ",281740 ,389612 ,308829 ,335734
"23 ",300993 ,421008 ,305370 ,0
"24 ",318235 ,372159 ,320713 ,0
"25 ",294067 ,352550 ,324048 ,0
"26 ",303087 ,423274 ,296180 ,0
"27 ",300837 ,408148 ,328379 ,0
"28 ",294846 ,382694 ,317006 ,0
"29 ",275660 ,384468 ,304507 ,0
"30 ",293253 ,355270 ,314554 ,0
"31 ",264974 ,351602 ,311686 ,0
"32 ",232175 ,345229 ,293352 ,0
"33 ",236461 ,280920 ,255687 ,0
"34 ",271710 ,322965 ,293535 ,0
"35 ",338225 ,410150 ,401225 ,0
"36 ",329303 ,375133 ,408475 ,0
"37 ",396505 ,383980 ,364862 ,0
"38 ",380231 ,374350 ,359844 ,0
"39 ",396692 ,406653 ,373006 ,0
"40 ",357469 ,422755 ,378883 ,0
"41 ",332266 ,391751 ,313895 ,0
"42 ",326764 ,386580 ,394546 ,0
"43 ",372687 ,414610 ,357510 ,0
"44 ",287799 ,404508 ,360034 ,0
"45 ",307413 ,400408 ,363263 ,0
"46 ",299928 ,386693 ,370634 ,0
"47 ",314336 ,370042 ,347080 ,0
"48 ",343070 ,370778 ,397639 ,0
"49 ",293429 ,291873 ,320715 ,0
"50 ",475053 ,446788 ,421183 ,0
"51 ",553601 ,656852 ,717018 ,0
"52 ",254415 ,313197 ,417132 ,0
La columna SEMANA sera la que actuara de coordenada X, por lo que la entrecomillamos para ser 'string'

Y el script final " creagrafico.php " seria el siguiente, en negrita los cambios introducidos:
Código PHP:
<html>
  <head>
<?php
// lectura del archivo CSV y guarda datos en array $js
$file file("/tmp/grafico0.csv");

// $arr is an array of javascript arrays
$arr = array();
// $i is the index for the x-axis
$i 0;
foreach (
$file as $row) {
    
$arr[] = "[ $row]";
    
$i++;
}
// $js is the final javascript array
$js '['implode(','$arr). ']';
?>

    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
    
      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});
      
      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table, 
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

      // Create the data table.
      var data = new google.visualization.DataTable();
   [B]
data.addColumn('string', 'Semana');
      data.addColumn('number', '2010');
      data.addColumn('number', '2011');
      data.addColumn('number', '2012');
      data.addColumn('number', '2013');
      data.addRows(<?php echo $js?>);
[/B]

      // Set chart options
      var options = {'title':'Ventas por Semanas',
                     'width':1100,
                     'height':500};

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
    </script>
  </head>

  <body>
<!--Div that will hold the pie chart-->
    <div id="chart_div" style="width:1100; height:500"></div>
  </body>
</html>
finalmente solo nos queda ejecutar desde CONSOLA
php creagrafico.php > /tmp/a.html
y manipular el resultado a.html como necesitemos.


Felices vacaciones, yo las inicio maññññññññaaaaana!!!!
  #11 (permalink)  
Antiguo 09/07/2013, 13:37
Avatar de enlinea777  
Fecha de Ingreso: mayo-2008
Ubicación: frente al pc
Mensajes: 1.830
Antigüedad: 15 años, 11 meses
Puntos: 127
Respuesta: Crear GRAFICOS desde consola con API google

wahahaja
finalmente entendiste por que te decia que podias hacerlo en php.
  #12 (permalink)  
Antiguo 10/07/2013, 10:38
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Crear GRAFICOS desde consola con API google

Pues seré tronco, pero no entiendo la diferencia entre las salidas de los dos programas

Etiquetas: api, consola, google, graficos, ip, linux, usuario, windows
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:16.