Cómo usar plantillas de objetos de opciones JSON con gráficos en Jitterbit App Builder

App Builder utiliza Highcharts como motor de informes para los gráficos creados en las páginas de la aplicación. Se proporcionan valores predeterminados para la apariencia de los gráficos. Con una Plantilla JSON, puede definir opciones JSON para reemplazar las opciones enviadas a Highcharts al generar gráficos en una aplicación de App Builder y así permitir una mayor personalización.

Highcharts define todas las opciones de configuración de gráficos que admite, así como los métodos y propiedades de los objetos Highchart en su documentación API.

Para crear tu propia Plantilla JSON, visita una página de tu aplicación distinta a la del gráfico que deseas modificar. Abre una utilidad desarrollador web, como DevTools de Chrome o Firefox, y pega lo siguiente en la consola:

var logging = require("vinyl.logging");
logging.enabled = true;
logging.preserve = true;

A continuación, dirígete a la página que contiene el gráfico que quieres modificar (no recargues el navegador web). En tu consola verás el JSON App Builder generado:

Chart Customers By Country  - using the following chart configuration:

Object { chart: {…}, xAxis: {…}, credits: {…}, title: {…}, plotOptions: {…}, yAxis: (1)`[…], `series: (1)`[…], `tooltip: {…}, exporting: {…}, legend: {} }

Con esta salida, junto con la documentación de la API de Highcharts, identifique qué desea modificar específicamente. A continuación, vaya a IDE > Look and Feel > seleccione la Plantilla de la colección que desea modificar > y +Plantilla para crear una nueva modelo. Especifique JSON como el tipo de contenido de la nueva modelo. Escriba el JSON de salida en el cuadro de texto.

Por último, vaya a su Página de Gráfico > Cajón de Acciones > Diseñar esta página y agregue un nuevo Control. Elija Objeto de Opciones JSON como Tipo de Control y seleccione su modelo JSON. Puede proporcionar parámetros si la modelo JSON utilizó esa función.

Ejemplos de opciones JSON

Para dar formato a un gráfico circular con una etiqueta útil, utilice lo siguiente. El resultado será "EE. UU. 5%".

{
    "series":[
       {
          "dataLabels": { "format": "{point.name} {point.percentage:.0f}%" }
       }
    ]
}

Para establecer un valor mínimo y máximo en el eje Y (válido para valores del 0 al 100 %), utilice:

{
             "yAxis": [{
                 "softMin": {{min}},
                 "softMax": {{máx}}
             }]
}

Para dar formato a las etiquetas del gráfico de embudo para que aparezcan junto al gráfico sin que se corten:

{
             "plotOptions": [{
                        "funnel": {
                        "dataLabels":{
                            "crop": "false"
                         }
                                }]
}

Notas importantes

En JSON, el nombre del parámetro debe ser una cadena: "propiedad": 1
Null es un valor válido

Recursos

El siguiente enlace externo de Github a Chartopedia de AnyChart es una herramienta útil a la hora de intentar determinar qué propiedad modificar en un objeto JSON de Highcharts:

https://www.anychart.com/chartopedia/