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!!!