vReport: imprimir grafico


([N1] OscarBarea) #1

Hola,
Tengo un formulario que a través de un control “Visor HTML” con opción “Contenido=texto Html” visualizo un gráfico generado con Google Charts.
Pues bien, lo que quiero es poder hacer un informe y poder incrustar este gráfico. He guardado el código que genero en una campo objeto texto para el gráfico y lo pongo en un control HTML de Report, pero no hace nada.
Se puede hacer?
Paso código básico:

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1.1", {packages:["bar"]});
      google.setOnLoadCallback(drawChart);
 function drawChart() {
        // Create the data table.
        var data = new google.visualization.DataTable();
data.addColumn('string', 'Meses');
data.addColumn('number', 'Venta');
        data.addRows([ 
[ 'Ene',  90.750000],
[ 'Feb',  0],
[ 'Mar',  0],
[ 'Abr',  0],
[ 'May',  0],
[ 'Jun',  0],
[ 'Jul',  0],
[ 'Ago',  0],
[ 'Sep',  0],
[ 'Oct',  0],
[ 'Nov',  0],
[ 'Dic',  0],
]);  
      // Set chart options
        var options = { 'legend':'left',
  vAxis: {format: 'decimal'},
 legend: { position: 'none' },
 bar: { groupWidth: "90%" },
  axes: {
            x: {
              0: {  label: 'Volumen de ventas por meses (anual)' }

            }
          },
       }
        // Instantiate and draw our chart, passing in some options.

       var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

       chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
  </head>
  <body>
    <div id="columnchart_material" style="width: 100%; height: 100%;"></div>
  </body>
</html>

Gracias
Oscar B.


([N1] OscarBarea) #2

Nadie ha tenido que imprimir un gráfico o le ha tenido que pasar un código html a un informe vReport?


([N1] vlinares) #3

Buenas tardes…

Estoy intentado imprimirlo y tampoco me funciona.
Posiblemente lo esté haciendo mal, pero…
En el informe pongo un control HTML al que le paso una variable global con el HTML que genero. En el formulario de Velneo funciona perfecto, pero no en el vReport.
Después de lo que llevo viendo con vReport,se me acaba de ocurrir ahora, posiblemente la solución sea pasarle los datos en un PARAMETRO.

Lo pruebo y ya ecribo con los resultados.

Saludos
Vicente


([N1] OscarBarea) #4

Muchas gracias Vicente


([N3] pacosatu) #5

Hola.

Yo creo que la mejor opción para visualizar gráficos en pantalla e imprimirlos con VReport o el Informe nativo es HighCharts.

La ventaja definitiva es que funciona totalmente fuera de línea sin depender de conexión a Internet.
Puede ser un handicap para algunos su dependencia total del Visor HTML y javascript para renderizar los gráficos, pero funcionan perfectamente todo tipo de gráficos.

Saludos
Paco Satué


([N1] OscarBarea) #6

Buenos días Paco,
Que hay que hacer para implementar HighCharts en nuestras aplicaciones?
Yo de javascript no estoy nada metido, pero podría defenderme con algún ejemplo.
Muchas gracias


([N3] pacosatu) #7

Hola Oscar.

Ya se ha hablado mucho de HighCharts, incluso hubo una Open App.
Aunque Velneo sacara ahora mismo un módulo de gráficos, yo seguiría usando highcharts porque su calidad es muy dificil de alcanzar.

Tienes toda la documentación en la página web.
Un montón de demos con el código preparado para copiar y pegar en el Visor HTML.

En vatp://pruebas:pruebas@v7cloud6.velneo.com:8894/0PS_Varios_iapp tienes la demo de cómo guardar e imprimir el gráfico en un Informe nativo o VReport.

Con tiempo, quizás preparo un ejercicio de cómo implementar un editor/visualizador de gráficos que pueda manejar fácilmente un Usuario final.

Saludos
Paco Satué


([N1] OscarBarea) #8

Hola Paco,
La solución que tienes de pruebas, la podemos descargar para poder ver como funcionan los ejemplos?
Gracias


([N3] pacosatu) #9

Hola Oscar.

No, no se puede descargar.
Son simples ejercicios para ver las posibilidades gráficas de Velneo.

Tienes accesible una pequeña ayuda en cada ejercicio con el código más importante.

De todas formas, sin conocer el API de Velneo y un nivel de html/javascript básico es muy complicado avanzar en este tema.

Saludos
Paco Satué


([N1] OscarBarea) #10

Gracias Paco,
Entonces esperaré a que puedas tener algún componente para poderlo adaptar a mis aplicaciones.
Es triste, que una plataforma de desarrollo de aplicaciones orientadas a la empresa no disponga de herramientas para poder generar gráficos. La esencia de Velneo se rompe con todas estas barreras.
Saludos,


([N1] OscarBarea) #11

Hola Paco,
Al final me he metido en el tema con el tutoría que tienes.
Tengo visualizado el gráfico con el botón “JPG” para poderlo atrapar desde Velneo, pero no hace nada.
Si desde el propio código que contiene el visor HTML lanzo un alert (a), puedo ver la imagen JPEG en base64.
La conexión a evento del control visor HTML que dispara la señal “Link clicked” NO se lanza nunca. Este evento es el que atrapa EVENT_PARAMS[1] en la variable CHREF_LINK y después lanza el manejado de evento GUARDAR_IMAGEN.
Cual es el motivo para que nunca se dispare la señal “Link clicked”?
Saludos


([N3] pacosatu) #12

Hola Oscar.

Si no se lanza el evento “Link clicked” es porque no le has dicho al Visor HTML que los capture.
Cada vez que asignas un nuevo código HTML al Visor usa el siguiente código del API:


var oForm = theRoot.dataView();
// Obtenemos el control Visor HTML
var oVisorHTML = oForm.control("CTR_VISOR_HTML");
// Fijamos el código HTML del control
// Establecemos también el Path Base para los URL's relativos
oVisorHTML.setSourceCode(theRoot.varToString("CHTML"),theRoot.varToString("CPATH_BASE"));
// Tenemos que delegar los clicks siempre después de fijar el código HTML, de lo contrario no funciona
oVisorHTML.setLinkDelegationPolicy(VCWebView.DelegateAllLinks);

La función setLinkDelegationPolicy(VCWebView.DelegateAllLinks) solo existe en el API, … cosas de Velneo.

Saludos
Paco Satué


([N1] OscarBarea) #13

Gracias Paco, funciona perfecto.
Una última cuestión.
Estoy lanzando el gráfico desde un formulario desde una tabla asociada, y lo que quiero es que NO me de de alta un nuevo registro en una tabla, sino que guarde la imagen en el propio registro.
Como sería el código que sustituye al actual?

// Guardamos la Imagen en la tabla temporal
if (oImage.loadFromData(oByteArray, "JPEG")) {
       oRegistro.setField("NAME","Gráfico exportado")
       oRegistro.setFieldImage("IMG_GRAFICO",oImage)
  // Obtenemos el hash MD5 para detectar imágenes duplicadas
       oRegistro.setField("MD5",theRoot.varToString("C_MD5"))
       theRoot.beginTrans(theRoot)
       if (oRegistro.addRegister()) {
               theRoot.commitTrans()
       }
       else {
               theMainWindow.showMessageStatusBar("Ya se ha seleccionado este gráfico",1000)
       }
}
else {
       alert("No se puede establecer la Imagen")
};

Muchas gracias


([N3] pacosatu) #14

Hola Oscar.

Muy fácil, sustituye oRegistro.addRegister() por oRegistro.modifyRegister siendo oRegistro la Ficha del formulario actual que probablemente será theRegisterIn.

Cuida también el tema de las transacciones ya que en el API no son automáticas.

Entonces no ha sido tan difícil hacerlo tú mismo.
Habrás visto la potencia y calidad de los gráficos de HighCharts y todo en local sin conexión a Internet.

Saludos
Paco Satué


([N1] OscarBarea) #15

Muchas gracias Paco,
He sustituido oRegistro.addRegister() por oRegistro.modifyRegister (), pero no hace nada.
oRegistro.modifyRegister () se encuentra como condición de un If.

De Javascript no estoy muy metido, pero con tu tutoría y ayuda en el foro he adelantado mucho y lo he podido integrar.
Si el formulario que presenta el gráfico es apiadado y tiene ancho y alto 100%, la exportación de la imagen queda muy mal, se ve achatada.
Gracias


([N3] pacosatu) #16

Hola Oscar.

He actualizado el código HTML/javascript del Visor y ahora se exporta el gráfico siempre con la misma proporción independientemente de la que tenga en pantalla.

En la ayuda tienes disponible el nuevo código.

Saludos
Paco Satué


([N1] OscarBarea) #17

Muchas gracias Paco,
Hoy me pongo de nuevo.
He sustituido oRegistro.addRegister() por oRegistro.modifyRegister (), pero no hace nada.
oRegistro.modifyRegister () se encuentra como condición de un If.
No consigo que me añada el gráfico en el Registro actual y lo guarde
Gracias de nuevo


([N3] pacosatu) #18

Hola Oscar.

Poco te puedo ayudar, tendrás que usar el depurador para analizar el código que guarda la imagen.
Si estás en un formulario solo debes usar theRegisterIn.setFieldImage(“IMG_GRAFICO”,oImage).


if (oImage.loadFromData(oByteArray, "JPEG")) {
   theRegisterIn.setFieldImage("IMG_GRAFICO",oImage)
}
else {
   alert("No se puede establecer la Imagen")
};

Con esto es suficiente. El botón <Aceptar> del formulario es el que guardará los cambios en la tabla.

Saludos
Paco Satué


([N1] OscarBarea) #19

Lo pruebo y depuro el código
Solo una última cuestión y no te molesto más.
Como se puede llamar a la función de guardar la imagen sin tener que clicar en el control HTML? Que al generat el gráfico nos guarde la imagen directamente.
Mil gracias


([N3] pacosatu) #20

Hola Oscar.

Eso ya es cuestión de tocar el código HTML, para que cuando se haya dibujado el Gráfico llamar a la función exportar().

Saludos
Paco Satué