# HighCharts. Exportar imagen offline **URL:** \ **Category:** Velneo\ **Created:** [9 Octubre, 2015 09:04 UTC](https://foros.velneo.com/t/highcharts-exportar-imagen-offline/8373 "2015-10-09T09:04:14Z")\ **Posts on this page:** 20\ **Page:** 1
**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:** [9 Octubre, 2015 09:04 UTC](https://foros.velneo.com/t/highcharts-exportar-imagen-offline/8373/1 "2015-10-09T09:04:14Z")
Hola. Estoy usando [HighCharts](http://www.highcharts.com/) desde hace un tiempo y la verdad que es un producto excelente. Te olvidas por completo que Velneo en el campo gráfico es un auténtico **erial**. Por supuesto surgen los problemas derivados de la desastrosa integración del Visor HTML con Velneo nativo. En este caso, el más importante es la imposibilidad de usar el menú de exportación de HighCharts, que permite imprimir el gráfico o generar una imagen (png, jpeg, pdf, …). Yo por lo menos no he conseguido que funcione. He descartado definitivamente esta opción, que además solo funciona Online, porque depende de un servidor externo para generar la exportación. Ahora estoy intentando ejecutar una exportación del gráfico de manera **Offline** usando librerías **Javascript**. Los resultados no son del todo satisfactorios en cuanto a calidad de la imagen. Mi pregunta es ¿Cómo habéis resuelto vosotros la exportación offLine del gráfico de HihgCharts? El objetivo es disponer de una imagen PNG/JPEG del gráfico para poder gestionarla de **forma nativa** con Velneo. Saludos Paco Satué ---
**Author:** ![manuel.rd](https://yyz1.discourse-cdn.com/flex035/user_avatar/foros.velneo.com/manuel.rd/32/3508_2.png) [@manuel.rd](https://foros.velneo.com/u/manuel.rd)\ **Post date:** [9 Octubre, 2015 17:59 UTC](https://foros.velneo.com/t/highcharts-exportar-imagen-offline/8373/2 "2015-10-09T17:59:56Z")
Buenas Paco, lo que se me ocurre para que puedas hacerlo es usar [http://phantomjs.org/](http://phantomjs.org/ "http://phantomjs.org/") Tendrías que servir el html y usar el ejemplo rasterize y usar el fichero como necesites. No se si será posible renderizar directamente el código html, seguramente sí. No se cuanto podría penalizarte en ejecución pero no debería notarse prácticamente. [http://phantomjs.org/screen-capture.html](http://phantomjs.org/screen-capture.html "http://phantomjs.org/screen-capture.html") ---
**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 Octubre, 2015 23:13 UTC](https://foros.velneo.com/t/highcharts-exportar-imagen-offline/8373/3 "2015-10-12T23:13:32Z")
Hola Manuel. Gracias por el aporte. No conocía esta utilidad y tiene muy buena pinta. Voy a hacer pruebas y os cuento los resultados. Saludos Paco Satué ---
**Author:** ![manuel.rd](https://yyz1.discourse-cdn.com/flex035/user_avatar/foros.velneo.com/manuel.rd/32/3508_2.png) [@manuel.rd](https://foros.velneo.com/u/manuel.rd)\ **Post date:** [13 Octubre, 2015 08:27 UTC](https://foros.velneo.com/t/highcharts-exportar-imagen-offline/8373/4 "2015-10-13T08:27:34Z")
Es un webkit embebido usando como javascript. Sobre todo te permite automatización web, incluso hay un framework para hacer muchas cosas. Yo lo probe y funciona, lo que no recuerdo si te sirve pasando directamente el fichero html. ---
**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:** [13 Octubre, 2015 09:02 UTC](https://foros.velneo.com/t/highcharts-exportar-imagen-offline/8373/5 "2015-10-13T09:02:05Z")
Hola Manuel. Sí, en cuanto ví que estaba basado en QT5 y el Webkit me lancé a ello. - Funciona perfectamente en offline con ficheros HTML o de otro tipo. - Es un ejecutable con todo el framework autocontenido. Tiene alguna pega: - El tamaño del fichero (46Mb) que es necesario descargar al cliente (no es grave, solo ocurre una vez). - Desgraciadamente, el Webkit ha sido descatalogado por QT, por lo tanto puede haber un futuro incierto para esta herramienta. - Me toca aprender otra ristra de comandos. Ya empiezo a estar un poco cansado de recurrir a herramientas externas a Velneo para resolver funcionalidades básicas. En resumen, un magnífico ejemplo de lo que Velneo podría hacer con su control Visor HTML, integrando Webkit, el API y Javascript. Saludos Paco Satué ---
**Author:** ![manuel.rd](https://yyz1.discourse-cdn.com/flex035/user_avatar/foros.velneo.com/manuel.rd/32/3508_2.png) [@manuel.rd](https://foros.velneo.com/u/manuel.rd)\ **Post date:** [13 Octubre, 2015 09:14 UTC](https://foros.velneo.com/t/highcharts-exportar-imagen-offline/8373/6 "2015-10-13T09:14:19Z")
Ya, supongo que al igual que Velneo tiene que buscar alternatias a Webkit, esto hará lo mismo. O harán ellos mismo el mantenimiento, no lo sé. Me alegro que te haya servido, igualmente te sire para informes complejos que puedes montar en html y generar un pdf. ---
**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:** [15 Octubre, 2015 21:40 UTC](https://foros.velneo.com/t/highcharts-exportar-imagen-offline/8373/7 "2015-10-15T21:40:51Z")
Hola Manuel. Tema resuelto. Al final he optado por usar la librería javascript [canvg.js](https://github.com/gabelerner/canvg) que renderiza el gráfico de HighCharts en el canvas de HTML5. Para este caso concreto de enlazar HighCharts con Velneo es la solución más sencilla y limpia que he encontrado. La herramienta [phantomjs](http://phantomjs.org/) la dejo para temas más complejos. Casualmente, es ésta la herramienta que usa HighCharts para la conversión remota de los gráficos, por algo será. Podéis ver un ejemplo en el apartado “Imprimir HighCharts” de la siguiente aplicación: ``` vatp://pruebas:pruebas@v7cloud6.velneo.com:8894/0PS_Varios_iapp ``` Saludos y gracias por tu interés. Paco Satué ---
**Author:** ![percyleoncio1](https://avatars.discourse-cdn.com/v4/letter/p/a587f6/32.png) [@percyleoncio1](https://foros.velneo.com/u/percyleoncio1)\ **Post date:** [15 Octubre, 2015 22:36 UTC](https://foros.velneo.com/t/highcharts-exportar-imagen-offline/8373/8 "2015-10-15T22:36:26Z")
Muchas gracias amigo Seh por la aportación ---
**Author:** ![jmcorredoira](https://avatars.discourse-cdn.com/v4/letter/j/a698b9/32.png) [@jmcorredoira](https://foros.velneo.com/u/jmcorredoira)\ **Post date:** [16 Octubre, 2015 06:19 UTC](https://foros.velneo.com/t/highcharts-exportar-imagen-offline/8373/9 "2015-10-16T06:19:46Z")
Gran aportación ---
**Author:** ![frugulletti](https://yyz1.discourse-cdn.com/flex035/user_avatar/foros.velneo.com/frugulletti/32/5616_2.png) [@frugulletti](https://foros.velneo.com/u/frugulletti)\ **Post date:** [12 Abril, 2016 15:51 UTC](https://foros.velneo.com/t/highcharts-exportar-imagen-offline/8373/10 "2016-04-12T15:51:56Z")
Buenos días Paco me parece excelente, entré a verla y tiene muy muy buena pinta, justo estaba buscando info al respecto ya que debo graficar algunas cosas con un desarrollo que estoy montando, ahora esa app la tienes como openapps o la vendes ? Me gustaría saber para ver si la heredo en ves de sentarme a desarrollar desde cero todo eso… ---
**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 Abril, 2016 20:51 UTC](https://foros.velneo.com/t/highcharts-exportar-imagen-offline/8373/11 "2016-04-12T20:51:32Z")
Hola frugulletti. Me alegro que te haya gustado. [HighCharts](http://www.highcharts.com/products/highcharts) es una opción perfecta para integrar los gráficos empresariales en las aplicaciones Velneo. El Visor HTML renderiza todos los tipos de gráfico y con los eventos javascript no hay problema. Con la aplicación solo pretendo mostrar algunos ejercicios que yo realizo en mi aprendizaje de Velneo y de paso comprobar las posibilidades de Velneo. No es posible descargar el vin. En este caso he querido implementar la posibilidad de imprimir el gráfico desde Velneo y sin necesidad de conexión a Internet. Tienes el código más importante disponible a través de la ayuda (Ctrl+F1). Con HighCharts, por supuesto, tendrás que tener conocimientos básicos de HTML y javascript para entender el código y poder implementar correctamente la librería. Cualquier consulta, por el foro, por favor. Saludos Paco Satué ---
**Author:** ![frugulletti](https://yyz1.discourse-cdn.com/flex035/user_avatar/foros.velneo.com/frugulletti/32/5616_2.png) [@frugulletti](https://foros.velneo.com/u/frugulletti)\ **Post date:** [12 Abril, 2016 23:12 UTC](https://foros.velneo.com/t/highcharts-exportar-imagen-offline/8373/12 "2016-04-12T23:12:11Z")
Ok perfecto, mil gracias amigo. ---
**Author:** ![jmcf3](https://avatars.discourse-cdn.com/v4/letter/j/35a633/32.png) [@jmcf3](https://foros.velneo.com/u/jmcf3)\ **Post date:** [13 Abril, 2016 14:00 UTC](https://foros.velneo.com/t/highcharts-exportar-imagen-offline/8373/13 "2016-04-13T14:00:04Z")
## Buenas, justamente llevo dos dias pegandome con el ejemplo de Paco y no se porque me devuelve un error de json. Con el código : importClass(“VImage”) importClass(“VByteArray”) var oByteArray = new VByteArray() var oForm = theRoot.dataView() var oImage = new VImage() var oRegistro = new VRegister(theRoot) oRegistro.setTable(“2c117rcg.vcd/GRAFICOS\_SEL”) // La URL del visor HTML -\> CHREF\_LINK contiene el string base64 de la imagen // Mediante la clase VByteArray obtenemos el objeto Imagen // Guardamos la Imagen en un campo Objeto de la tabla temporal GRAFICOS\_SEL cBase64 = theRoot.varToString(“CHREF\_LINK”).replace(“data:image/jpeg;base64,”,"") // Cargamos el Texto en Base64 var oTexto = new VByteArray() oTexto.setText(cBase64) ## // Obtenemos el ByteArray original del JPEG var oByteArray = new VByteArray() oByteArray.fromBase64(oTexto) alert( oByteArray.toLatin1String() ); el alert me devuelve “ÿØÿà”. ## Pensando y pensado que la culpa podria se mia y mirando el ejemplo de la documentacion hice este mismo con un jpg muy pequeño. Un dibujo solo rojo de pocos pixeles importClass(“VImage”); importClass(“VByteArray”); // -------------------------------------------------------------------------------- // Convertir texto en base64 a Latin-1 // ------------------------------------ var ba64 = new VByteArray(); ba64.setText( “/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAIBAQEBAQIBAQECAgICAgQDAgICAgUEBAMEBgUGBgYFBgYGBwkIBgcJBwYGCAsICQoKCgoKBggLDAsKDAkKCgr/2wBDAQICAgICAgUDAwUKBwYHCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgr/wAARCAAMAAkDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD5rooor8DP9oD/2Q==”); var ba4 = new VByteArray(); ba4.fromBase64(ba64); ## alert( ba4.toLatin1String() ); y el alerta me devuleve otra vez “ÿØÿà”. ¿Que puedo estar haciendo mal? Muchas gracias. ---
**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:** [13 Abril, 2016 15:44 UTC](https://foros.velneo.com/t/highcharts-exportar-imagen-offline/8373/14 "2016-04-13T15:44:53Z")
Hola josemanuel. No veo cuál es el problema. El string Base64 es correcto y el ByteArray ba4 contiene los Bytes (0’s y 1’s) de la imagen jpeg. Lo que no tiene sentido es hacer un alert(ba4.toLatin1String()) porque estás intentando mostrar como texto el contenido binario de una imagen. Los caracteres ÿØÿà son los 4 primeros bytes de cualquier jpeg que por supuesto no es texto legible. Así que por favor, quita esos alert(). Además no veo JSON por ningún lado para que te devuelva un error de json. Solo te queda: if (oImage.loadFromData(ba4, “JPEG”) { // pasar los bytes del Byte Array a un objeto Imagen del API —oRegistro.setFieldImage(“IMAGEN”,oImage) // guardar la imagen en un campo Objeto de Velneo } Saludos Paco Satué ---
**Author:** ![tecnico](https://yyz1.discourse-cdn.com/flex035/user_avatar/foros.velneo.com/tecnico/32/4096_2.png) [@tecnico](https://foros.velneo.com/u/tecnico)\ **Post date:** [13 Abril, 2016 16:03 UTC](https://foros.velneo.com/t/highcharts-exportar-imagen-offline/8373/15 "2016-04-13T16:03:30Z")
---
**Author:** ![jmcf3](https://avatars.discourse-cdn.com/v4/letter/j/35a633/32.png) [@jmcf3](https://foros.velneo.com/u/jmcf3)\ **Post date:** [13 Abril, 2016 16:07 UTC](https://foros.velneo.com/t/highcharts-exportar-imagen-offline/8373/16 "2016-04-13T16:07:28Z")
* * * 1-importClass(“VImage”); 2-importClass(“VByteArray”); // -------------------------------------------------------------------------------- // Convertir texto en base64 a Latin-1 // ------------------------------------ 8-var ba64 = new VByteArray(); 9-ba64.setText( “/9j/4AAQSkZJRgABAQEAYABgAAD10/2wBDAAIBAQEBAQIBAQECAgICAgQDAgICAgUEBAMEBgUGBgYFBgYGBwkIBgcJBwYGCAsICQoKCgoKBggLDAsKDAkKCgr/2wBDAQICAgICAgUDAwUKBwYHCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgr/wAARCAAMAAkDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD5rooor8DP9oD/2Q==”); 10- 11-var ba4 = new VByteArray(); 12-ba4.fromBase64(ba64); 13- 14-if (oImage.loadFromData(ba4, “JPEG”) { // pasar los bytes del Byte Array a un objeto Imagen del API 15-alert(“dentro”) // guardar la imagen en un campo Objeto de Velneo 16-} me sale este error: "Uncaught exception at /FIC1/GUARDAR\_IMAGEN1:14: SyntaxError: Parse error 14 if (oImage.loadFromData(ba4, “JPEG”) { // pasar los bytes del Byte Array a un objeto Imagen del API " Gracias. ---
**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:** [13 Abril, 2016 16:16 UTC](https://foros.velneo.com/t/highcharts-exportar-imagen-offline/8373/17 "2016-04-13T16:16:15Z")
Hola josemanuel. Vamos a ver, el código no está completo, por eso da error. El código completo lo tienes [aquí](http://s437145227.mialojamiento.es/web_ayudavelneoejem/VelneoEjercicios.html?ExportarHighChartsaVelneo.html) o a través de Ctrl+F1 en la aplicación de ejemplo. Coged uno de los miles de manuales que hay de javascript y dedicarle cuatro días, de lo contrario programar estas cosas se convierte en una pesadilla, a pesar de que son muy sencillas. Saludos Paco Satué ---
**Author:** ![jmcf3](https://avatars.discourse-cdn.com/v4/letter/j/35a633/32.png) [@jmcf3](https://foros.velneo.com/u/jmcf3)\ **Post date:** [14 Abril, 2016 07:26 UTC](https://foros.velneo.com/t/highcharts-exportar-imagen-offline/8373/18 "2016-04-14T07:26:10Z")
Vale y muchas gracias. ---
**Author:** ![ereitmann](https://avatars.discourse-cdn.com/v4/letter/e/8491ac/32.png) [@ereitmann](https://foros.velneo.com/u/ereitmann)\ **Post date:** [3 Julio, 2016 17:32 UTC](https://foros.velneo.com/t/highcharts-exportar-imagen-offline/8373/19 "2016-07-03T17:32:15Z")
Hola paco, he reproducido tu ejemplo que tienes en la nube, el problema es que no puedo importar la imagen a la tabla y viendo el escript del manejador de evento “Guardar imagen” el cual he copiado y pegado como tu lo tienes, reproduciendo las variables y la tabla en memoria, pero cuando paso el depurador me salta un error en ese script (que no se como subsanarlo por que de java script no se nada y ando al tanteo de ensayo error) te paso la imagen del error que me da tu escript. tal vez puedas revisarlo si es que esta mal escrito, se que al apretar el boton del control html de exportar jpg, crea la imagen por que control html cambia al formato definido de la imagen y si quiero con el boton derecho me permite copiar esa imagen, pero al parecer no guarda el string base 64 en la variable CHREF\_LINK por que he puesto un control de texto estatico para ver su contenido y este siempre esta vacio. Gracias ![image](https://canada1.discourse-cdn.com/flex035/uploads/velneo/original/2X/f/f54ff107867757505382f604e6e4f5a2f8bd2f4f.jpg) ---
**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:** [4 Julio, 2016 08:44 UTC](https://foros.velneo.com/t/highcharts-exportar-imagen-offline/8373/20 "2016-07-04T08:44:39Z")
Hola ereitmann. Para realizar estos ejercicios tienes que aprender primero Javascript y HTML como hemos hecho todos, de lo contrario escribir aplicaciones se convierte en una pesadilla. A esto se añade que Velneo no facilita en absoluto la depuración de código fuera del propio código nativo. Revisa la sintaxis del código Javascript, le falta un paréntesis. En cuanto al código HTML que he utilizado es muy sencillo de entender. Hay infinidad de manuales en Internet tanto de HTML como de Javascript. Empieza con ejemplos sencillos y siempre comprueba que son compatibles con el Visor HTML de Velneo. Saludos Paco Satué [Página siguiente](https://foros.velneo.com/t/highcharts-exportar-imagen-offline/8373.md?page=2)