Como crear GRAFICOS desde consola con API google
Publicado por barnarasta (182 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:
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:
===============================================================
Y ahora la tanda de preguntas :)
el script es mejorable sin duda, y lo primero que intente - sin conseguirlo - fue intentar reducir
la zona :
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!!!
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=0while 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
1
