# vReport: imprimir grafico

**URL:** <https://foros.velneo.com/t/vreport-imprimir-grafico/8679>\
**Category:** Velneo\
**Created:** [8 Febrero, 2016 14:07 UTC](https://foros.velneo.com/t/vreport-imprimir-grafico/8679 "2016-02-08T14:07:26Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![velneooscarbarea](https://avatars.discourse-cdn.com/v4/letter/v/4af34b/32.png) [@velneooscarbarea](https://foros.velneo.com/u/velneooscarbarea)\
**Post date:** [8 Febrero, 2016 14:07 UTC](https://foros.velneo.com/t/vreport-imprimir-grafico/8679/1 "2016-02-08T14:07:26Z")

</div>

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:

```auto
<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.

---

<div class="post-metadata">

**Author:** ![velneooscarbarea](https://avatars.discourse-cdn.com/v4/letter/v/4af34b/32.png) [@velneooscarbarea](https://foros.velneo.com/u/velneooscarbarea)\
**Post date:** [10 Febrero, 2016 13:36 UTC](https://foros.velneo.com/t/vreport-imprimir-grafico/8679/2 "2016-02-10T13:36:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![vlinares](https://avatars.discourse-cdn.com/v4/letter/v/57b2e6/32.png) [@vlinares](https://foros.velneo.com/u/vlinares)\
**Post date:** [10 Febrero, 2016 14:45 UTC](https://foros.velneo.com/t/vreport-imprimir-grafico/8679/3 "2016-02-10T14:45:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![velneooscarbarea](https://avatars.discourse-cdn.com/v4/letter/v/4af34b/32.png) [@velneooscarbarea](https://foros.velneo.com/u/velneooscarbarea)\
**Post date:** [10 Febrero, 2016 16:15 UTC](https://foros.velneo.com/t/vreport-imprimir-grafico/8679/4 "2016-02-10T16:15:49Z")

</div>

Muchas gracias Vicente

---

<div class="post-metadata">

**Author:** ![pacosatu](https://yyz1.discourse-cdn.com/flex035/user_avatar/foros.velneo.com/pacosatu/32/5131_2.png) [@pacosatu](https://foros.velneo.com/u/pacosatu)\
**Post date:** [10 Febrero, 2016 17:52 UTC](https://foros.velneo.com/t/vreport-imprimir-grafico/8679/5 "2016-02-10T17:52:52Z")

</div>

Hola.

Yo creo que la mejor opción para visualizar gráficos en pantalla e imprimirlos con VReport o el Informe nativo es [HighCharts](http://www.highcharts.com/).

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é

---

<div class="post-metadata">

**Author:** ![velneooscarbarea](https://avatars.discourse-cdn.com/v4/letter/v/4af34b/32.png) [@velneooscarbarea](https://foros.velneo.com/u/velneooscarbarea)\
**Post date:** [11 Febrero, 2016 06:43 UTC](https://foros.velneo.com/t/vreport-imprimir-grafico/8679/6 "2016-02-11T06:43:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![pacosatu](https://yyz1.discourse-cdn.com/flex035/user_avatar/foros.velneo.com/pacosatu/32/5131_2.png) [@pacosatu](https://foros.velneo.com/u/pacosatu)\
**Post date:** [11 Febrero, 2016 08:08 UTC](https://foros.velneo.com/t/vreport-imprimir-grafico/8679/7 "2016-02-11T08:08:46Z")

</div>

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](http://www.highcharts.com/).  
Un montón de [demos con el código](http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-basic/) 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é

---

<div class="post-metadata">

**Author:** ![velneooscarbarea](https://avatars.discourse-cdn.com/v4/letter/v/4af34b/32.png) [@velneooscarbarea](https://foros.velneo.com/u/velneooscarbarea)\
**Post date:** [11 Febrero, 2016 10:06 UTC](https://foros.velneo.com/t/vreport-imprimir-grafico/8679/8 "2016-02-11T10:06:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![pacosatu](https://yyz1.discourse-cdn.com/flex035/user_avatar/foros.velneo.com/pacosatu/32/5131_2.png) [@pacosatu](https://foros.velneo.com/u/pacosatu)\
**Post date:** [11 Febrero, 2016 10:22 UTC](https://foros.velneo.com/t/vreport-imprimir-grafico/8679/9 "2016-02-11T10:22:44Z")

</div>

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é

---

<div class="post-metadata">

**Author:** ![velneooscarbarea](https://avatars.discourse-cdn.com/v4/letter/v/4af34b/32.png) [@velneooscarbarea](https://foros.velneo.com/u/velneooscarbarea)\
**Post date:** [11 Febrero, 2016 10:34 UTC](https://foros.velneo.com/t/vreport-imprimir-grafico/8679/10 "2016-02-11T10:34:04Z")

</div>

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,

---

<div class="post-metadata">

**Author:** ![velneooscarbarea](https://avatars.discourse-cdn.com/v4/letter/v/4af34b/32.png) [@velneooscarbarea](https://foros.velneo.com/u/velneooscarbarea)\
**Post date:** [11 Febrero, 2016 15:10 UTC](https://foros.velneo.com/t/vreport-imprimir-grafico/8679/11 "2016-02-11T15:10:27Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![pacosatu](https://yyz1.discourse-cdn.com/flex035/user_avatar/foros.velneo.com/pacosatu/32/5131_2.png) [@pacosatu](https://foros.velneo.com/u/pacosatu)\
**Post date:** [11 Febrero, 2016 15:55 UTC](https://foros.velneo.com/t/vreport-imprimir-grafico/8679/12 "2016-02-11T15:55:02Z")

</div>

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:

```auto

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é

---

<div class="post-metadata">

**Author:** ![velneooscarbarea](https://avatars.discourse-cdn.com/v4/letter/v/4af34b/32.png) [@velneooscarbarea](https://foros.velneo.com/u/velneooscarbarea)\
**Post date:** [11 Febrero, 2016 16:04 UTC](https://foros.velneo.com/t/vreport-imprimir-grafico/8679/13 "2016-02-11T16:04:59Z")

</div>

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?

```auto
// 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

---

<div class="post-metadata">

**Author:** ![pacosatu](https://yyz1.discourse-cdn.com/flex035/user_avatar/foros.velneo.com/pacosatu/32/5131_2.png) [@pacosatu](https://foros.velneo.com/u/pacosatu)\
**Post date:** [11 Febrero, 2016 16:44 UTC](https://foros.velneo.com/t/vreport-imprimir-grafico/8679/14 "2016-02-11T16:44:05Z")

</div>

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é

---

<div class="post-metadata">

**Author:** ![velneooscarbarea](https://avatars.discourse-cdn.com/v4/letter/v/4af34b/32.png) [@velneooscarbarea](https://foros.velneo.com/u/velneooscarbarea)\
**Post date:** [11 Febrero, 2016 16:54 UTC](https://foros.velneo.com/t/vreport-imprimir-grafico/8679/15 "2016-02-11T16:54:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![pacosatu](https://yyz1.discourse-cdn.com/flex035/user_avatar/foros.velneo.com/pacosatu/32/5131_2.png) [@pacosatu](https://foros.velneo.com/u/pacosatu)\
**Post date:** [11 Febrero, 2016 23:08 UTC](https://foros.velneo.com/t/vreport-imprimir-grafico/8679/16 "2016-02-11T23:08:46Z")

</div>

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é

---

<div class="post-metadata">

**Author:** ![velneooscarbarea](https://avatars.discourse-cdn.com/v4/letter/v/4af34b/32.png) [@velneooscarbarea](https://foros.velneo.com/u/velneooscarbarea)\
**Post date:** [12 Febrero, 2016 07:00 UTC](https://foros.velneo.com/t/vreport-imprimir-grafico/8679/17 "2016-02-12T07:00:14Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![pacosatu](https://yyz1.discourse-cdn.com/flex035/user_avatar/foros.velneo.com/pacosatu/32/5131_2.png) [@pacosatu](https://foros.velneo.com/u/pacosatu)\
**Post date:** [12 Febrero, 2016 08:05 UTC](https://foros.velneo.com/t/vreport-imprimir-grafico/8679/18 "2016-02-12T08:05:38Z")

</div>

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).

```auto

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é

---

<div class="post-metadata">

**Author:** ![velneooscarbarea](https://avatars.discourse-cdn.com/v4/letter/v/4af34b/32.png) [@velneooscarbarea](https://foros.velneo.com/u/velneooscarbarea)\
**Post date:** [12 Febrero, 2016 08:22 UTC](https://foros.velneo.com/t/vreport-imprimir-grafico/8679/19 "2016-02-12T08:22:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![pacosatu](https://yyz1.discourse-cdn.com/flex035/user_avatar/foros.velneo.com/pacosatu/32/5131_2.png) [@pacosatu](https://foros.velneo.com/u/pacosatu)\
**Post date:** [12 Febrero, 2016 09:22 UTC](https://foros.velneo.com/t/vreport-imprimir-grafico/8679/20 "2016-02-12T09:22:19Z")

</div>

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é

[Página siguiente](https://foros.velneo.com/t/vreport-imprimir-grafico/8679.md?page=2)