Linux - Como crear GRAFICOS desde consola con API google

   
Vista:
Imágen de perfil de barnarasta

Como crear GRAFICOS desde consola con API google

Publicado por barnarasta (146 intervenciones) el 28/06/2013 22:58:32
Buenas tardes compañeros,
aprovechando el descubrimiento de un API de google para generar graficos realize lo siguiente 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:

1
2
3
4
5
6
7
8
9
10
11
12
13
'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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
#! /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: 900px; height: 500px;"></div>
  </body>
</html>
EOF
####################################### final del codigo generador
 
###################### Envio por email del resultado ##################
echo ''|mutt -s "Grafico Z45" -a $TEMP -b  [destinatario@correo.es]


===============================================================
Y ahora la tanda de preguntas :)
el script es mejorable sin duda, y lo primero que intente - sin conseguirlo - fue intentar reducir
la zona :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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 distro 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!!!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
1
Responder

Como crear GRAFICOS desde consola con API google

Publicado por Tom (339 intervenciones) el 09/07/2013 12:09:44
En tu script, el problema del array no es de javascript, sino de bash.
Prueba esto:
1
var data = google.visualization.arrayToDataTable(${q[*]});
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de barnarasta

Como crear GRAFICOS desde consola con API google

Publicado por barnarasta (146 intervenciones) el 09/07/2013 18:32:13
!!!! super !!!
thankiush!!!!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar