# HighCharts. Exportar imagen offline

**URL:** <https://foros.velneo.com/t/highcharts-exportar-imagen-offline/8373>\
**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:** 19\
**Page:** 2

<div class="post-metadata">

**Author:** ![ereitmann](https://avatars.discourse-cdn.com/v4/letter/e/8491ac/32.png) [@ereitmann](https://foros.velneo.com/u/ereitmann)\
**Post date:** [5 Julio, 2016 11:47 UTC](https://foros.velneo.com/t/highcharts-exportar-imagen-offline/8373/21 "2016-07-05T11:47:38Z")

</div>

Gracias Paco por la atención prestada, lo que me desorienta de tu ejemplo, es que en la ayuda, en la seccion que explicas el diseño del ejercicio, cuando explicas el proceso haces referencia a la utilización de una variable local EVENT\_PARAMS y analizando tu código tanto de la Plantilla HTML como del manejador de evento en javascript no aparece en ninguna parte la referencia a esa variable local.

el texto en la ayuda es este:  
“4.Mediante un evento click() de javascript enviamos el string base64 a Velneo donde es capturado por la variable local EVENT\_PARAMS[1].”

---

<div class="post-metadata">

**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:** [5 Julio, 2016 13:57 UTC](https://foros.velneo.com/t/highcharts-exportar-imagen-offline/8373/22 "2016-07-05T13:57:20Z")

</div>

Como bien te dice Paco te falta un parentesis  
if (oImage.loadFromData(oByteArray, “JPEG”)) {

Y lo del EVENT\_PARAMS[1] esta aqui todo  
[https://velneo.es/info\_v7\_719\_es/velneo\_vdevelop/proyectos\_objetos\_y\_editores/variable\_local/variables\_locales\_especiales/](https://velneo.es/info_v7_719_es/velneo_vdevelop/proyectos_objetos_y_editores/variable_local/variables_locales_especiales/)

---

<div class="post-metadata">

**Author:** ![ereitmann](https://avatars.discourse-cdn.com/v4/letter/e/8491ac/32.png) [@ereitmann](https://foros.velneo.com/u/ereitmann)\
**Post date:** [5 Julio, 2016 20:17 UTC](https://foros.velneo.com/t/highcharts-exportar-imagen-offline/8373/23 "2016-07-05T20:17:15Z")

</div>

GraCIAS por responder tecnico, entendi lo de EVENT\_PARAMS[1] (DE LO CUAL NO TENIA IDEA), veo entonces que lo que me esta faltando, según la ayuda del documento de paco es un evento click() de javascript para enviar el string base64 a Velneo donde es capturado por la variable local EVENT\_PARAMS[1]. delo cual TAMPOCO tengo IDEA de como hacerlo (por lo de javascript),

---

<div class="post-metadata">

**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:** [6 Julio, 2016 06:28 UTC](https://foros.velneo.com/t/highcharts-exportar-imagen-offline/8373/24 "2016-07-06T06:28:34Z")

</div>

Mirate este link en el foro

[https://velneo.es/foros/topic/enlazar-velneo-con-html/](https://velneo.es/foros/topic/enlazar-velneo-con-html/)

---

<div class="post-metadata">

**Author:** ![ereitmann](https://avatars.discourse-cdn.com/v4/letter/e/8491ac/32.png) [@ereitmann](https://foros.velneo.com/u/ereitmann)\
**Post date:** [6 Julio, 2016 11:35 UTC](https://foros.velneo.com/t/highcharts-exportar-imagen-offline/8373/25 "2016-07-06T11:35:36Z")

</div>

Gracias Técnico Nuevamente, era lo que me faltaba… ahora funciona perfectamente… en mi caso faltaba esta parte:

// Atrapamos todos los clics en enlaces del control visor html  
menu = theRoot.dataView().control( “CONTROL” );  
menu.setLinkDelegationPolicy( VCWebView.DelegateAllLinks );

la cual es un manejador de evento en javasript, del formulario que contiene el control HTML asociado a un evento botón pulsado de ese control HTML,

y otro manejador de evento que cargue el contenido de EVENT-PARAMS[1] a la variable CHREF\_LINK asociado al evento LinK clicked del control html y que el mismo manejador llame al manejador de vento Guardar Imagen… Ha y por supuesto definir la variable reservada especial EVENT\_PARAMS, de tipo texto , array de 1 dimensión… Todo lo demás lo resuelve el código de Paco

Todo esto lo aclaro por si lee este post otro dummie como yo!

Un gran agradecimeinto a Paco y a Técnico ya que sin sus aporte y guía… los Analfabetos en programacion como yo no tendrían oprtunidad!!

---

<div class="post-metadata">

**Author:** ![osuna](https://yyz1.discourse-cdn.com/flex035/user_avatar/foros.velneo.com/osuna/32/5306_2.png) [@osuna](https://foros.velneo.com/u/osuna)\
**Post date:** [4 Abril, 2017 20:25 UTC](https://foros.velneo.com/t/highcharts-exportar-imagen-offline/8373/26 "2017-04-04T20:25:46Z")

</div>

Hola paco que tal, tengo una pregunta para ti quien fue el que desarrollo la idea, en mi caso yo envio dos variables con contenidos html por separado para mostrar dos graficas distintas pero con los mismo datos, como se muestran en las imagenes, lei toda la documentacion acerca de este ejercicio y en uno de los comentarios dices que cada vez que se le asigne un nuevo contenido html al visor se ejecute el codigo del API que por [alli](https://velneo.es/foros/topic/vreport-imprimir-grafico/) colocastes una vez, en mi caso tengo dos botonos de izq y der, para cambiar el tipo de grafica y en efecto cada vez que se cambia el contenido html del visor ejecuto ese manejador de evento.

Para la grafica que contiene no solo las lineas sino el efecto de sombreado el boton de JPEG ejecuta la funcion exportar pero no realiza el evento click() que es necesario para extrar la url con el contenido base64, caso contrario pasa con la primera grafica que a ella si puedo dar el alta extrayendo su contenido, es algo raro de verdad, porque cada grafica posee una leyenda y si clickeo sobre ella se oculta su contenido en la grafica y para el caso de la grafica con sombreado si oculto su contenido hay si me extrae el url en bae64, obviamente sale en blanco porque se le oculta su contenido.

De verdad no se cual es error.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/velneo/original/2X/6/6715cf93050c66006900dd3ead64e5aafff82691.png)

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/velneo/original/2X/7/7994c95259dc1ce1de0c98a6023107485919bcb2.png)

---

<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:** [4 Abril, 2017 22:11 UTC](https://foros.velneo.com/t/highcharts-exportar-imagen-offline/8373/27 "2017-04-04T22:11:27Z")

</div>

Hola osuna.

Creo recordar que cuando estaba haciendo mis primeras pruebas había problemas con los gráficos que tenían fondos semitransparentes.  
Quizás era un problema de incompatibilidad del Visor HTML con SVG.

Haz una prueba poniendo los 2 fondos con colores planos, sin transaparencia.

Si no se arregla puedo intentar echar un vistazo al código HTML (adjúntalo al mensaje).

Saludos  
Paco Satué

---

<div class="post-metadata">

**Author:** ![osuna](https://yyz1.discourse-cdn.com/flex035/user_avatar/foros.velneo.com/osuna/32/5306_2.png) [@osuna](https://foros.velneo.com/u/osuna)\
**Post date:** [5 Abril, 2017 12:58 UTC](https://foros.velneo.com/t/highcharts-exportar-imagen-offline/8373/28 "2017-04-05T12:58:40Z")

</div>

La verdad no entendi a lo que haces referencia, comparto el codigo HTML de la segunda grafica que es la que no realiza la funcion:

“\<html\>  
\<head\>  
\<title\>  
Chart  
\</title\>  
\<meta http-equiv=‘Content-Type’ content=‘text/html; charset=utf-8’\>  
\<link rel=‘stylesheet’ href=‘[https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css](https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css)’\>  
\<script src='file:///”+sysCacheClientPath+"/canvg.js’\>\</script\>  
\<script src=‘file:///"+sysCacheClientPath+"/rgbcolor.js’\>\</script\>  
\<script src=‘file:///"+sysCacheClientPath+"/jquery.min.js’\>\</script\>  
\<script src=‘file:///"+sysCacheClientPath+"/bootstrap.min.js’\>\</script\>  
\<script src=‘file:///"+sysCacheClientPath+"/jquery-1.9.1.js’ type=‘text/javascript’\>\</script\>  
\<script src=‘file:///"+sysCacheClientPath+"/highcharts.js’ type=‘text/javascript’\>\</script\>  
\<script src=‘[http://code.highcharts.com/modules/exporting.js](http://code.highcharts.com/modules/exporting.js)’\>\</script\>  
\<script type=‘text/javascript’\>  
$(function () {  
Highcharts.setOptions({  
// Opciones del gráfico para la exportación  
// Se tienen en cuenta en la función getSVGForExport  
lang: {  
contextButtonTitle: ‘Exportar gráfico a Velneo’  
},  
chart: {  
// Espacio para que quepa el botón de exportar  
spacing: [10, 10, 10, 60],  
borderWidth: 0  
},  
exporting: {  
chartOptions: {  
// chart: {backgroundColor: ‘transparent’},  
chart: {  
backgroundColor: ‘white’,  
spacing: [10, 10, 15, 10],  
borderWidth: 0,  
width: 600,  
height: 400  
},  
plotOptions: {  
series: {  
dataLabels: {  
enabled: false  
}  
}  
}  
},  
// Hacemos que el Botón contextual ejecute directamente la Exportación  
buttons: {  
contextButton: {  
menuItems: null,  
onclick: function () {  
exportar();  
},  
text: ‘JPEG’,  
verticalAlign: ‘bottom’,  
align: ‘left’,  
height: 20,  
x: -60,  
y: 0,  
symbol: ‘triangle-down’,  
symbolStroke: ‘DarkRed’,  
symbolFill: ‘DarkSalmon’,  
symbolStrokeWidth: 2,  
symbolSize: 14,  
symbolX: 16,  
symbolY: 14,  
theme: {  
‘stroke-width’: 1,  
stroke: ‘silver’,  
fill: ‘WhiteSmoke’,  
r: 4,  
states: {  
hover: {  
fill: ‘Orange’  
}  
}  
}  
}  
}  
},  
credits: {  
enabled: false  
}  
});  
});  
$(function() {  
$(’#container’).highcharts({  
chart: {  
type: ‘area’  
},  
credits: {  
enabled: true  
},  
title: {  
text: ‘Relación Tiempos - Tickets’,  
x: -20 //center  
},  
yAxis: { title: { text: ‘Numeros’ } },  
xAxis: { categories: ["+MES+"] },  
tooltip: { pointFormat: ‘{series.name} producidpos \<b\>{point.y:,.0f}\</b\>’},  
legend: { layout: ‘vertical’, align: ‘right’, verticalAlign: ‘middle’ },  
plotOptions: {  
area: {  
marker: {  
dataLabels: { enabled: true },  
enableMouseTracking: true  
}  
}  
},  
series:  
[  
{  
name: ‘Tiempos’,  
data: ["+TIME+"]  
},  
{  
name: ‘Tickets’,  
data: ["+TIKC+"]  
}  
]  
});  
});  
\</script\>  
\<script type=‘text/javascript’\>  
function exportar() {  
var chart = $(’#container’).highcharts();  
// svg = chart.getSVG()  
svg = chart.getSVGForExport()  
var chartWidth = chart.options.exporting.chartOptions.chart.width  
var chartHeight = chart.options.exporting.chartOptions.chart.height  
var nRelacion = chartHeight / chartWidth;  
// Creamos un elemento Canvas o usamos uno ya existente  
// var canvas = document.getElementById(‘canvas’)  
// canvas.style.display=‘none’;  
var canvas = document.createElement(‘canvas’)  
canvas.width = 1200;  
canvas.height = canvas.width \* nRelacion;  
canvg(canvas, svg, {  
ignoreDimensions: true,  
scaleWidth: canvas.width,  
scaleHeight: canvas.height  
});  
var a = document.createElement(‘a’);  
a.href = canvas.toDataURL(‘image/jpeg’,1);  
a.click();  
}  
\</script\>  
\</head\>  
\<body\>

  
\</body\>  
\</html\>"

Saludos.

---

<div class="post-metadata">

**Author:** ![osuna](https://yyz1.discourse-cdn.com/flex035/user_avatar/foros.velneo.com/osuna/32/5306_2.png) [@osuna](https://foros.velneo.com/u/osuna)\
**Post date:** [5 Abril, 2017 13:09 UTC](https://foros.velneo.com/t/highcharts-exportar-imagen-offline/8373/29 "2017-04-05T13:09:21Z")

</div>

El comentario anterior no se ve ordenado el codigo, espero que la imagen lo deje claro.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/velneo/original/2X/8/8a08e061a231aa7f4e9c6307196ec51ef1537b9a.png)

---

<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:** [5 Abril, 2017 17:04 UTC](https://foros.velneo.com/t/highcharts-exportar-imagen-offline/8373/30 "2017-04-05T17:04:00Z")

</div>

Hola osuna.

Envíame en un fichero adjunto el código HTML final que muestras en el Visor (opción Ver código fuente de la barra de herramientas).

Saludos  
Paco Satué

---

<div class="post-metadata">

**Author:** ![osuna](https://yyz1.discourse-cdn.com/flex035/user_avatar/foros.velneo.com/osuna/32/5306_2.png) [@osuna](https://foros.velneo.com/u/osuna)\
**Post date:** [5 Abril, 2017 19:00 UTC](https://foros.velneo.com/t/highcharts-exportar-imagen-offline/8373/31 "2017-04-05T19:00:35Z")

</div>

Hola paco, gracias por la atencion, aqui adjunto el archivo html

---

<div class="post-metadata">

**Author:** ![osuna](https://yyz1.discourse-cdn.com/flex035/user_avatar/foros.velneo.com/osuna/32/5306_2.png) [@osuna](https://foros.velneo.com/u/osuna)\
**Post date:** [5 Abril, 2017 19:09 UTC](https://foros.velneo.com/t/highcharts-exportar-imagen-offline/8373/32 "2017-04-05T19:09:51Z")

</div>



---

<div class="post-metadata">

**Author:** ![osuna](https://yyz1.discourse-cdn.com/flex035/user_avatar/foros.velneo.com/osuna/32/5306_2.png) [@osuna](https://foros.velneo.com/u/osuna)\
**Post date:** [5 Abril, 2017 19:11 UTC](https://foros.velneo.com/t/highcharts-exportar-imagen-offline/8373/33 "2017-04-05T19:11:47Z")

</div>

.

---

<div class="post-metadata">

**Author:** ![osuna](https://yyz1.discourse-cdn.com/flex035/user_avatar/foros.velneo.com/osuna/32/5306_2.png) [@osuna](https://foros.velneo.com/u/osuna)\
**Post date:** [5 Abril, 2017 19:21 UTC](https://foros.velneo.com/t/highcharts-exportar-imagen-offline/8373/34 "2017-04-05T19:21:22Z")

</div>

Me toco compartir por dropbox:

[https://www.dropbox.com/s/d8a3gu3g43rmb7c/Grafica3.html?dl=0](https://www.dropbox.com/s/d8a3gu3g43rmb7c/Grafica3.html?dl=0)

---

<div class="post-metadata">

**Author:** ![osuna](https://yyz1.discourse-cdn.com/flex035/user_avatar/foros.velneo.com/osuna/32/5306_2.png) [@osuna](https://foros.velneo.com/u/osuna)\
**Post date:** [5 Abril, 2017 19:27 UTC](https://foros.velneo.com/t/highcharts-exportar-imagen-offline/8373/35 "2017-04-05T19:27:32Z")

</div>

Si no pueden descargar el archivo aqui esta este:

[https://www.dropbox.com/s/ay5ensl3j9zgqlt/Grafica3.txt?dl=0](https://www.dropbox.com/s/ay5ensl3j9zgqlt/Grafica3.txt?dl=0)

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:** [5 Abril, 2017 21:28 UTC](https://foros.velneo.com/t/highcharts-exportar-imagen-offline/8373/36 "2017-04-05T21:28:03Z")

</div>

Hola osuna.

En la aplicación de ejercicios (vatp://pruebas:pruebas@v7cloud6.velneo.com:8894/0PS\_Varios\_iapp) he colocado tu código y funciona perfectamente sin tocar nada. Está en el apartado del Editor de Código HTML, en la rama Gráfico HighCharts.

Verás que la pulsación del Botón \<Exportar\> funciona perfectamente. He sustituido la línea _a.click()_ por _window.location.href = a.href_ para que veas el resultado en el Visor HTML.

Saludos  
Paco Satué

---

<div class="post-metadata">

**Author:** ![osuna](https://yyz1.discourse-cdn.com/flex035/user_avatar/foros.velneo.com/osuna/32/5306_2.png) [@osuna](https://foros.velneo.com/u/osuna)\
**Post date:** [6 Abril, 2017 15:49 UTC](https://foros.velneo.com/t/highcharts-exportar-imagen-offline/8373/37 "2017-04-06T15:49:27Z")

</div>

Hola paco que tal, esto se me ha vuelto engorroso, imagino que el contenido de tu visor html es la direccion url del archivo alojado en la cacherun, de no ser asi que rabia, porque si a ese visor le envias una variable como parametro cuyo contenido es tooooodo el codigo que alli se encuentra no entiendo porque si te funciona y en mi caso no.

Yo simplemente tomo los datos que tengo en una rejilla y los proceso para extraer los valores que necesito para armar mi grafica, y en una variable alfabetica tengo todo mi codigo html y le concateno esos valores, creo el manejador de objeto(el formulario que tiene el visor), le asigno la variable CHTML, disparo el objeto y ya el formulario me presenta la grafica sin nungun problema, pero desde alli para ese tipo de gráfica no funciona esa funcion Exportar… obviamente cambie la conexión de evento que no fuese link clicked sino URLchanged por la modificacion que hiciste en la linea de la funcion pero igual no funciona.

Saludos

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/velneo/original/2X/2/2d75820ea8838c6415aed079475fe93a5a1ad840.png)

---

<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:** [6 Abril, 2017 17:24 UTC](https://foros.velneo.com/t/highcharts-exportar-imagen-offline/8373/38 "2017-04-06T17:24:54Z")

</div>

Hola osuna.

Tranquilo, te puedo asegurar que los ejercicios llevan muchas horas de “prueba y error” y de acordarme de las pocas herramientas avanzadas que tenemos en Velneo para torear con estos problemas.

En mi Visor HTML el proceso es el mismo que tú usas, es decir, asigno el código HTML al Visor mediante la función setSourceCode().

De todas formas poco tiene que ver eso porque el gráfico se pinta bien. Dices que donde falla es al ejecutar la función exportar().  
Como ves, el código HTML que me has enviado funciona perfectamente.

- De todas formas ¿Me has enviado exactamente el código HTML que te está fallando? Ten en cuenta que a veces una coma mal puesta echa al traste todo el resultado. También en el código que me has enviado hay un cierto caos con las librerías que usas.
- Te adjunto las librerías con las que funciona bien el gráfico. Puede ser que estés usando una librería más moderna de highcharts y tenga problemas al renderizar este tipo de gráfico en el canvas. Ya te dije que los gráficos con colores semitransparentes pueden dar problemas.

Tienes que entender que lo que se muestra en el Visor es código SVG y lo que envías a Velneo para imprimir es un gráfico rasterizado como una imagen. La función canvg() es la que transforma el SVG en imagen y ahí puede estar el fallo con ese tipo concreto de gráfico que tiene colores con transparencias.

Saludos  
Paco Satué

[lib-highcharts.zip](https://canada1.discourse-cdn.com/flex035/uploads/velneo/original/2X/e/e1bc94440b85cf7c1f62f8bc1f5f15347c6efd58.zip) (113 KB)

---

<div class="post-metadata">

**Author:** ![osuna](https://yyz1.discourse-cdn.com/flex035/user_avatar/foros.velneo.com/osuna/32/5306_2.png) [@osuna](https://foros.velneo.com/u/osuna)\
**Post date:** [6 Abril, 2017 19:15 UTC](https://foros.velneo.com/t/highcharts-exportar-imagen-offline/8373/39 "2017-04-06T19:15:11Z")

</div>

'-\_-

Mil Gracias paco, con estas librerías si funciona correctamente.

Saludos

[Página anterior](https://foros.velneo.com/t/highcharts-exportar-imagen-offline/8373.md?page=1)