[Docs] Internationalization locale file

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }

    .chart--container {
      min-height: 150px;
      width: 100%;
      height: 100%;
    }

    .zc-ref {
      display: none;
    }
  </style>
</head>

<body>
  <!-- CHART CONTAINER -->
  <div id="myChart" class="chart--container">
    <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
  </div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // window:load event for Javascript to run after HTML
    // because this Javascript is injected into the document head
    window.addEventListener('load', () => {
      // Javascript code to execute after DOM content

      // locale file to replace ZingChart defaults
      let locale = {
        'rtl': false,
        'decimals-separator': '.',
        'thousands-separator': '',
        'menu-reload': 'Refrescar',
        'menu-print': 'Imprimir graphíco',
        'menu-viewaspng': 'Mostrar Cómo PNG',
        'menu-viewasjpg': 'Mostrar Cómo JPG',
        'menu-downloadpdf': 'Descargar PDF',
        'menu-downloadsvg': 'Descargar SVG',
        'menu-exportdata': 'Exportar Datos',
        'menu-downloadcsv': 'Descargar CSV',
        'menu-downloadxls': 'Descargar XLS',
        'menu-viewdatatable': 'Mostrar Cómo Mesa',
        'menu-zoomin': 'Aumentar',
        'menu-zoomout': 'Reducir',
        'menu-viewall': 'Visualizar Todos',
        'menu-viewsource': 'Muestra Código Fuente',
        'menu-bugreport': 'Enviar Reporte De Error',
        'menu-switchto2d': 'Cambiar a 2D',
        'menu-switchto3d': 'Cambiar a 3D',
        'menu-showguide': 'Muestra Guía',
        'menu-hideguide': 'Esconde Guía',
        'menu-switchtolin': 'Muestra Escala Linear',
        'menu-switchtolog': 'Muestra Escala Logarítmica',
        'menu-fullscreen': 'Muestra Pantalla Completa',
        'menu-exitfullscreen': 'Reducir Pantalla Completa',
        'menu-goback': 'Regresar',
        'menu-goforward': 'Avanzar',
        'date-formats': {
          'msecond': '%d %M %Y<br>%g:%i:%s %A<br>%q ms',
          'second': '%d %M %Y<br>%g:%i:%s %A',
          'minute': '%d %M %Y<br>%g:%i %A',
          'hour': '%d %M %Y<br>%g %A',
          'day': '%d %M %Y',
          'month': '%M %Y',
          'year': '%Y'
        },
        'days-short': ['Dom', 'Lun', 'Mart', 'Mier', 'Jue', 'Vier', 'Sab'],
        'days-long': ['Domingo', 'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado'],
        'months-short': ['Enero', 'Feb.', 'Marzo', 'Abr', 'Mayo', 'Jun.', 'Jul.', 'Agosto', 'Sep.', 'Oct', 'Nov', 'Dic'],
        'months-long': ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Augusto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
        'sync-wait': 'Por Favor Espere...',
        'export-wait': 'Exportando...',
        'progress-wait-long': 'Por Favor Espere...Cargando...',
        'progress-wait-short': 'Por Favor Espere...',
        'progress-wait-mini': '...',
        'error-header': 'Un Error Ha Ocurrido',
        'error-message': 'Mensaje de Error:',
        'error-close': 'Cerrar',
        'bugreport-header': 'Muestra informe de error',
        'bugreport-senddata': 'Enviar datos de JSON',
        'bugreport-sendcapture': 'Enviar Captura de Grafico',
        'bugreport-yourcomment': 'Su Commento:',
        'bugreport-jsondata': 'Datos de JSON:',
        'bugreport-youremail': 'Su Dirección de Correo Electrónico',
        'bugreport-infoemail': 'Si Gustas Recibir Correo Electrónico Sobre Su Reporte de Error',
        'bugreport-emailmandatory': 'Su Dirección de Correo Electrónico es mandatorio...',
        'bugreport-submit': 'Enviar',
        'bugreport-cancel': 'Cancelar',
        'bugreport-confirm': 'Su Informe de Error Se Ha Enviado.\n\nGracias!',
        'about-close': 'Cerrar',
        'viewsource-jsonsource': 'JSON Analizado Gramaticalmente',
        'viewsource-originalsource': 'JSON Original',
        'viewsource-close': 'Cerrar',
        'viewsource-apply': 'Aplique',
        'viewimage-close': 'Cerrar',
        'legend-pagination': 'Pagina %page% de %pages%'
      };

      // assign locale file to ZingChart object
      zingchart.i18n.es = locale;

      // full ZingChart schema can be found here:
      // https://www.zingchart.com/docs/api/json-configuration/
      let chartConfig = {
        type: 'bar',
        locale: 'es',
        globals: {
          fontSize: '14px'
        },
        title: {
          text: 'Right Click To View Spanish Menu',
          fontSize: '24px'
        },
        legend: {
          draggable: true
        },
        // plot represents general series, or plots, styling
        plot: {
          // hoverstate
          tooltip: {
            // % symbol represents a token to insert a value. Full list here:
            // https://www.zingchart.com/docs/tutorials/chart-elements/zingchart-tokens/
            text: '%plot-text %kl was %v (&deg;F)',
            borderRadius: '3px',
            // htmlMode renders text attribute as html so
            // &deg; is rendered
            htmlMode: true
          },
          valueBox: {
            color: '#fff',
            placement: 'top-in'
          },
          // animation docs here:
          // https://www.zingchart.com/docs/tutorials/design-and-styling/chart-animation/#animation__effect
          animation: {
            effect: 'ANIMATION_EXPAND_BOTTOM',
            method: 'ANIMATION_STRONG_EASE_OUT',
            sequence: 'ANIMATION_BY_NODE',
            speed: 275
          }
        },
        scaleX: {
          // set scale label
          label: {
            text: 'Days'
          },
          // convert text on scale indices
          labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        scaleY: {
          // scale label with unicode character
          label: {
            text: 'Temperature (°F)'
          }
        },
        // plot values
        series: [{
            text: 'Week 1',
            values: [23, 20, 27, 29, 25, 17, 15],
            backgroundColor: '#64b5f6'
          },
          {
            text: 'Week 2',
            values: [35, 42, 33, 49, 35, 47, 35],
            backgroundColor: '#ffb74d'
          }
        ]
      };


      zingchart.render({
        id: 'myChart',
        data: chartConfig
      });
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body>
  <!-- CHART CONTAINER -->
  <div id="myChart" class="chart--container">
    <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
  </div>
</body>

</html>

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.chart--container {
  min-height: 150px;
  width: 100%;
  height: 100%;
}

.zc-ref {
  display: none;
}

// window:load event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
  // Javascript code to execute after DOM content

  // locale file to replace ZingChart defaults
  let locale = {
    'rtl': false,
    'decimals-separator': '.',
    'thousands-separator': '',
    'menu-reload': 'Refrescar',
    'menu-print': 'Imprimir graphíco',
    'menu-viewaspng': 'Mostrar Cómo PNG',
    'menu-viewasjpg': 'Mostrar Cómo JPG',
    'menu-downloadpdf': 'Descargar PDF',
    'menu-downloadsvg': 'Descargar SVG',
    'menu-exportdata': 'Exportar Datos',
    'menu-downloadcsv': 'Descargar CSV',
    'menu-downloadxls': 'Descargar XLS',
    'menu-viewdatatable': 'Mostrar Cómo Mesa',
    'menu-zoomin': 'Aumentar',
    'menu-zoomout': 'Reducir',
    'menu-viewall': 'Visualizar Todos',
    'menu-viewsource': 'Muestra Código Fuente',
    'menu-bugreport': 'Enviar Reporte De Error',
    'menu-switchto2d': 'Cambiar a 2D',
    'menu-switchto3d': 'Cambiar a 3D',
    'menu-showguide': 'Muestra Guía',
    'menu-hideguide': 'Esconde Guía',
    'menu-switchtolin': 'Muestra Escala Linear',
    'menu-switchtolog': 'Muestra Escala Logarítmica',
    'menu-fullscreen': 'Muestra Pantalla Completa',
    'menu-exitfullscreen': 'Reducir Pantalla Completa',
    'menu-goback': 'Regresar',
    'menu-goforward': 'Avanzar',
    'date-formats': {
      'msecond': '%d %M %Y<br>%g:%i:%s %A<br>%q ms',
      'second': '%d %M %Y<br>%g:%i:%s %A',
      'minute': '%d %M %Y<br>%g:%i %A',
      'hour': '%d %M %Y<br>%g %A',
      'day': '%d %M %Y',
      'month': '%M %Y',
      'year': '%Y'
    },
    'days-short': ['Dom', 'Lun', 'Mart', 'Mier', 'Jue', 'Vier', 'Sab'],
    'days-long': ['Domingo', 'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado'],
    'months-short': ['Enero', 'Feb.', 'Marzo', 'Abr', 'Mayo', 'Jun.', 'Jul.', 'Agosto', 'Sep.', 'Oct', 'Nov', 'Dic'],
    'months-long': ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Augusto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
    'sync-wait': 'Por Favor Espere...',
    'export-wait': 'Exportando...',
    'progress-wait-long': 'Por Favor Espere...Cargando...',
    'progress-wait-short': 'Por Favor Espere...',
    'progress-wait-mini': '...',
    'error-header': 'Un Error Ha Ocurrido',
    'error-message': 'Mensaje de Error:',
    'error-close': 'Cerrar',
    'bugreport-header': 'Muestra informe de error',
    'bugreport-senddata': 'Enviar datos de JSON',
    'bugreport-sendcapture': 'Enviar Captura de Grafico',
    'bugreport-yourcomment': 'Su Commento:',
    'bugreport-jsondata': 'Datos de JSON:',
    'bugreport-youremail': 'Su Dirección de Correo Electrónico',
    'bugreport-infoemail': 'Si Gustas Recibir Correo Electrónico Sobre Su Reporte de Error',
    'bugreport-emailmandatory': 'Su Dirección de Correo Electrónico es mandatorio...',
    'bugreport-submit': 'Enviar',
    'bugreport-cancel': 'Cancelar',
    'bugreport-confirm': 'Su Informe de Error Se Ha Enviado.\n\nGracias!',
    'about-close': 'Cerrar',
    'viewsource-jsonsource': 'JSON Analizado Gramaticalmente',
    'viewsource-originalsource': 'JSON Original',
    'viewsource-close': 'Cerrar',
    'viewsource-apply': 'Aplique',
    'viewimage-close': 'Cerrar',
    'legend-pagination': 'Pagina %page% de %pages%'
  };

  // assign locale file to ZingChart object
  zingchart.i18n.es = locale;

  // full ZingChart schema can be found here:
  // https://www.zingchart.com/docs/api/json-configuration/
  let chartConfig = {
    type: 'bar',
    locale: 'es',
    globals: {
      fontSize: '14px'
    },
    title: {
      text: 'Right Click To View Spanish Menu',
      fontSize: '24px'
    },
    legend: {
      draggable: true
    },
    // plot represents general series, or plots, styling
    plot: {
      // hoverstate
      tooltip: {
        // % symbol represents a token to insert a value. Full list here:
        // https://www.zingchart.com/docs/tutorials/chart-elements/zingchart-tokens/
        text: '%plot-text %kl was %v (&deg;F)',
        borderRadius: '3px',
        // htmlMode renders text attribute as html so
        // &deg; is rendered
        htmlMode: true
      },
      valueBox: {
        color: '#fff',
        placement: 'top-in'
      },
      // animation docs here:
      // https://www.zingchart.com/docs/tutorials/design-and-styling/chart-animation/#animation__effect
      animation: {
        effect: 'ANIMATION_EXPAND_BOTTOM',
        method: 'ANIMATION_STRONG_EASE_OUT',
        sequence: 'ANIMATION_BY_NODE',
        speed: 275
      }
    },
    scaleX: {
      // set scale label
      label: {
        text: 'Days'
      },
      // convert text on scale indices
      labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    scaleY: {
      // scale label with unicode character
      label: {
        text: 'Temperature (°F)'
      }
    },
    // plot values
    series: [{
        text: 'Week 1',
        values: [23, 20, 27, 29, 25, 17, 15],
        backgroundColor: '#64b5f6'
      },
      {
        text: 'Week 2',
        values: [35, 42, 33, 49, 35, 47, 35],
        backgroundColor: '#ffb74d'
      }
    ]
  };


  zingchart.render({
    id: 'myChart',
    data: chartConfig
  });
});