.png)
Usar Graficas de HighCharts.com en #Genexus
En esta ocasión les mostrare como utilizar las gráficas de highcharts.com en nuestras aplicaciones Genexus.
En la página de HighCharts podemos encontrar muchos tipos de gráficas y ejemplos de cómo utilizarlas, estos son algunos tipos de graficas que podemos encontrar:
Y así como estas bastantes más, las cuales son muy útiles.
Eligiendo la gráfica en HighCharts.com
Para este ejemplo vamos a utilizar la gráfica Pie Chart, en la parte inferior de la gráfica hacemos clic sobre el botón “Edit in JSFIDDLE”
Esto nos permitirá ver el código HTML y JavaScript que necesitamos para utilizar la grafica
Integrando HighCharts con Genexus
Creamos un WebPanel en Genexus con un TextBlock en el WebForm lo llamaremos Contenedor, es importante que en las propiedades del TextBlock configuremos la propiedad Format = Raw HTML, como se muestra a continuación:
En el evento Start del WebPanel, primero cargaremos los archivos JavaScript, después llamaremos a una subrutina para obtener el código de la grafica
En la subrutina vamos a llenar la variable &Script (es un LongVarChar) con la etiqueta div que veíamos en el código de ejemplo de la gráfica, a continuación especificamos una etiqueta para indicar que lo que tendremos a continuación será código JavaScript, y a partir de ahí copiamos todo el código de ejemplo que tiene la gráfica todo concatenándolo a nuestra variable &Script
Al final no olvidemos cerrar la etiqueta del script
Ejecutamos:
En la parte de arriba a la izquierda tenemos un botón que nos permite exportar la gráfica en distintos formatos:
Quiero aclarar que hay varias formas para ingresarle los datos que necesitamos para que nos grafique lo que queremos, en este caso utilice los datos que trae de ejemplo la gráfica.
Espero que les sirva de ayuda y lo compartan, saludos.
GRANDE!!!!
ResponderBorrarConoces algún método para hacer Refresh a un WComponet de una Masterpage desde un webpanel para la ev3?
ResponderBorrarHola!
ResponderBorrarQuise aplicar lo que nos muestras pero con otro tipo de grafica (columnas) al ejecutar se queda en blanco el wp, mira mi codigo no sé que estoy haciendo mal :(
Sub "Inicializar"
&Script='...'
&Script+='<>'
&Script+='Highcharts.chart("Contenedor", {'
// &Script+='$(function(){'
// &Script+='$("#contenedor").highcharts({'
&Script+="chart: {"
&Script+="type: 'column'"
&Script+="},"
&Script+="title: {"
&Script+="text: 'Estadisticas PDS 2'"
&Script+="},"
&Script+="xAxis: {"
&Script+=" categories: ['Enero', 'Febrero', 'Marzo', 'Abril']"
&Script+="},"
&Script+="yAxis: {"
&Script+=" min: 0,"
&Script+=" title: {"
&Script+=" text: 'Ordenes'"
&Script+=" }"
&Script+="},"
&Script+="tooltip: {"
// &Script+=" pointFormat: ': {point.y} ({point.percentage:.0f}%)
',"
&Script+=" shared: true"
&Script+="},"
&Script+="plotOptions: {"
&Script+=" column: {"
&Script+=" stacking: 'percent'"
&Script+=" }"
&Script+="},"
&Script+="series: [{"
&Script+=" name: 'Entregadas',"
&Script+=" data: [5, 3, 4, 7]"
&Script+="}, {"
&Script+=" name: 'Reparadas'"
&Script+=" data: [2, 2, 3, 2]"
&Script+="}, {"
&Script+=" name: 'Ingresadas',"
&Script+=" data: [3, 4, 4, 2]"
&Script+="}]"
&Script+="});"
&Script+=
EndSub
Gracias
Agradezco tu ayuda
ResponderBorrar