• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <style>
    9.     html,
    10.     body {
    11.       margin: 0;
    12.       padding: 0;
    13.       width: 100%;
    14.       height: 100%;
    15.     }
    16.  
    17.     .chart--container {
    18.       min-height: 150px;
    19.       width: 100%;
    20.       height: 100%;
    21.     }
    22.  
    23.     .zc-ref {
    24.       display: none;
    25.     }
    26.   </style>
    27. </head>
    28.  
    29. <body>
    30.   <!-- CHART CONTAINER -->
    31.   <div id="myChart" class="chart--container">
    32.     <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    33.   </div>
    34.   <script>
    35.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // window:load event for Javascript to run after HTML
    36.     // because this Javascript is injected into the document head
    37.     window.addEventListener('load', () => {
    38.       // Javascript code to execute after DOM content
    39.  
    40.       // locale file to replace ZingChart defaults
    41.       let locale = {
    42.         'rtl': false,
    43.         'decimals-separator': '.',
    44.         'thousands-separator': '',
    45.         'menu-reload': 'Refrescar',
    46.         'menu-print': 'Imprimir graphíco',
    47.         'menu-viewaspng': 'Mostrar Cómo PNG',
    48.         'menu-viewasjpg': 'Mostrar Cómo JPG',
    49.         'menu-downloadpdf': 'Descargar PDF',
    50.         'menu-downloadsvg': 'Descargar SVG',
    51.         'menu-exportdata': 'Exportar Datos',
    52.         'menu-downloadcsv': 'Descargar CSV',
    53.         'menu-downloadxls': 'Descargar XLS',
    54.         'menu-viewdatatable': 'Mostrar Cómo Mesa',
    55.         'menu-zoomin': 'Aumentar',
    56.         'menu-zoomout': 'Reducir',
    57.         'menu-viewall': 'Visualizar Todos',
    58.         'menu-viewsource': 'Muestra Código Fuente',
    59.         'menu-bugreport': 'Enviar Reporte De Error',
    60.         'menu-switchto2d': 'Cambiar a 2D',
    61.         'menu-switchto3d': 'Cambiar a 3D',
    62.         'menu-showguide': 'Muestra Guía',
    63.         'menu-hideguide': 'Esconde Guía',
    64.         'menu-switchtolin': 'Muestra Escala Linear',
    65.         'menu-switchtolog': 'Muestra Escala Logarítmica',
    66.         'menu-fullscreen': 'Muestra Pantalla Completa',
    67.         'menu-exitfullscreen': 'Reducir Pantalla Completa',
    68.         'menu-goback': 'Regresar',
    69.         'menu-goforward': 'Avanzar',
    70.         'date-formats': {
    71.           'msecond': '%d %M %Y<br>%g:%i:%s %A<br>%q ms',
    72.           'second': '%d %M %Y<br>%g:%i:%s %A',
    73.           'minute': '%d %M %Y<br>%g:%i %A',
    74.           'hour': '%d %M %Y<br>%g %A',
    75.           'day': '%d %M %Y',
    76.           'month': '%M %Y',
    77.           'year': '%Y'
    78.         },
    79.         'days-short': ['Dom', 'Lun', 'Mart', 'Mier', 'Jue', 'Vier', 'Sab'],
    80.         'days-long': ['Domingo', 'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado'],
    81.         'months-short': ['Enero', 'Feb.', 'Marzo', 'Abr', 'Mayo', 'Jun.', 'Jul.', 'Agosto', 'Sep.', 'Oct', 'Nov', 'Dic'],
    82.         'months-long': ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Augusto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
    83.         'sync-wait': 'Por Favor Espere...',
    84.         'export-wait': 'Exportando...',
    85.         'progress-wait-long': 'Por Favor Espere...Cargando...',
    86.         'progress-wait-short': 'Por Favor Espere...',
    87.         'progress-wait-mini': '...',
    88.         'error-header': 'Un Error Ha Ocurrido',
    89.         'error-message': 'Mensaje de Error:',
    90.         'error-close': 'Cerrar',
    91.         'bugreport-header': 'Muestra informe de error',
    92.         'bugreport-senddata': 'Enviar datos de JSON',
    93.         'bugreport-sendcapture': 'Enviar Captura de Grafico',
    94.         'bugreport-yourcomment': 'Su Commento:',
    95.         'bugreport-jsondata': 'Datos de JSON:',
    96.         'bugreport-youremail': 'Su Dirección de Correo Electrónico',
    97.         'bugreport-infoemail': 'Si Gustas Recibir Correo Electrónico Sobre Su Reporte de Error',
    98.         'bugreport-emailmandatory': 'Su Dirección de Correo Electrónico es mandatorio...',
    99.         'bugreport-submit': 'Enviar',
    100.         'bugreport-cancel': 'Cancelar',
    101.         'bugreport-confirm': 'Su Informe de Error Se Ha Enviado.\n\nGracias!',
    102.         'about-close': 'Cerrar',
    103.         'viewsource-jsonsource': 'JSON Analizado Gramaticalmente',
    104.         'viewsource-originalsource': 'JSON Original',
    105.         'viewsource-close': 'Cerrar',
    106.         'viewsource-apply': 'Aplique',
    107.         'viewimage-close': 'Cerrar',
    108.         'legend-pagination': 'Pagina %page% de %pages%'
    109.       };
    110.  
    111.       // assign locale file to ZingChart object
    112.       zingchart.i18n.es = locale;
    113.  
    114.       // full ZingChart schema can be found here:
    115.       // https://www.zingchart.com/docs/api/json-configuration/
    116.       let chartConfig = {
    117.         type: 'bar',
    118.         locale: 'es',
    119.         globals: {
    120.           fontSize: '14px'
    121.         },
    122.         title: {
    123.           text: 'Right Click To View Spanish Menu',
    124.           fontSize: '24px'
    125.         },
    126.         legend: {
    127.           draggable: true
    128.         },
    129.         // plot represents general series, or plots, styling
    130.         plot: {
    131.           // hoverstate
    132.           tooltip: {
    133.             // % symbol represents a token to insert a value. Full list here:
    134.             // https://www.zingchart.com/docs/tutorials/chart-elements/zingchart-tokens/
    135.             text: '%plot-text %kl was %v (&deg;F)',
    136.             borderRadius: '3px',
    137.             // htmlMode renders text attribute as html so
    138.             // &deg; is rendered
    139.             htmlMode: true
    140.           },
    141.           valueBox: {
    142.             color: '#fff',
    143.             placement: 'top-in'
    144.           },
    145.           // animation docs here:
    146.           // https://www.zingchart.com/docs/tutorials/design-and-styling/chart-animation/#animation__effect
    147.           animation: {
    148.             effect: 'ANIMATION_EXPAND_BOTTOM',
    149.             method: 'ANIMATION_STRONG_EASE_OUT',
    150.             sequence: 'ANIMATION_BY_NODE',
    151.             speed: 275
    152.           }
    153.         },
    154.         scaleX: {
    155.           // set scale label
    156.           label: {
    157.             text: 'Days'
    158.           },
    159.           // convert text on scale indices
    160.           labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    161.         },
    162.         scaleY: {
    163.           // scale label with unicode character
    164.           label: {
    165.             text: 'Temperature (°F)'
    166.           }
    167.         },
    168.         // plot values
    169.         series: [{
    170.             text: 'Week 1',
    171.             values: [23, 20, 27, 29, 25, 17, 15],
    172.             backgroundColor: '#64b5f6'
    173.           },
    174.           {
    175.             text: 'Week 2',
    176.             values: [35, 42, 33, 49, 35, 47, 35],
    177.             backgroundColor: '#ffb74d'
    178.           }
    179.         ]
    180.       };
    181.  
    182.  
    183.       zingchart.render({
    184.         id: 'myChart',
    185.         data: chartConfig
    186.       });
    187.     });
    188.   </script>
    189. </body>
    190.  
    191. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11.   <!-- CHART CONTAINER -->
    12.   <div id="myChart" class="chart--container">
    13.     <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    14.   </div>
    15. </body>
    16.  
    17. </html>
    1. html,
    2. body {
    3.   margin: 0;
    4.   padding: 0;
    5.   width: 100%;
    6.   height: 100%;
    7. }
    8.  
    9. .chart--container {
    10.   min-height: 150px;
    11.   width: 100%;
    12.   height: 100%;
    13. }
    14.  
    15. .zc-ref {
    16.   display: none;
    17. }
    1. // window:load event for Javascript to run after HTML
    2. // because this Javascript is injected into the document head
    3. window.addEventListener('load', () => {
    4.   // Javascript code to execute after DOM content
    5.  
    6.   // locale file to replace ZingChart defaults
    7.   let locale = {
    8.     'rtl': false,
    9.     'decimals-separator': '.',
    10.     'thousands-separator': '',
    11.     'menu-reload': 'Refrescar',
    12.     'menu-print': 'Imprimir graphíco',
    13.     'menu-viewaspng': 'Mostrar Cómo PNG',
    14.     'menu-viewasjpg': 'Mostrar Cómo JPG',
    15.     'menu-downloadpdf': 'Descargar PDF',
    16.     'menu-downloadsvg': 'Descargar SVG',
    17.     'menu-exportdata': 'Exportar Datos',
    18.     'menu-downloadcsv': 'Descargar CSV',
    19.     'menu-downloadxls': 'Descargar XLS',
    20.     'menu-viewdatatable': 'Mostrar Cómo Mesa',
    21.     'menu-zoomin': 'Aumentar',
    22.     'menu-zoomout': 'Reducir',
    23.     'menu-viewall': 'Visualizar Todos',
    24.     'menu-viewsource': 'Muestra Código Fuente',
    25.     'menu-bugreport': 'Enviar Reporte De Error',
    26.     'menu-switchto2d': 'Cambiar a 2D',
    27.     'menu-switchto3d': 'Cambiar a 3D',
    28.     'menu-showguide': 'Muestra Guía',
    29.     'menu-hideguide': 'Esconde Guía',
    30.     'menu-switchtolin': 'Muestra Escala Linear',
    31.     'menu-switchtolog': 'Muestra Escala Logarítmica',
    32.     'menu-fullscreen': 'Muestra Pantalla Completa',
    33.     'menu-exitfullscreen': 'Reducir Pantalla Completa',
    34.     'menu-goback': 'Regresar',
    35.     'menu-goforward': 'Avanzar',
    36.     'date-formats': {
    37.       'msecond': '%d %M %Y<br>%g:%i:%s %A<br>%q ms',
    38.       'second': '%d %M %Y<br>%g:%i:%s %A',
    39.       'minute': '%d %M %Y<br>%g:%i %A',
    40.       'hour': '%d %M %Y<br>%g %A',
    41.       'day': '%d %M %Y',
    42.       'month': '%M %Y',
    43.       'year': '%Y'
    44.     },
    45.     'days-short': ['Dom', 'Lun', 'Mart', 'Mier', 'Jue', 'Vier', 'Sab'],
    46.     'days-long': ['Domingo', 'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado'],
    47.     'months-short': ['Enero', 'Feb.', 'Marzo', 'Abr', 'Mayo', 'Jun.', 'Jul.', 'Agosto', 'Sep.', 'Oct', 'Nov', 'Dic'],
    48.     'months-long': ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Augusto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
    49.     'sync-wait': 'Por Favor Espere...',
    50.     'export-wait': 'Exportando...',
    51.     'progress-wait-long': 'Por Favor Espere...Cargando...',
    52.     'progress-wait-short': 'Por Favor Espere...',
    53.     'progress-wait-mini': '...',
    54.     'error-header': 'Un Error Ha Ocurrido',
    55.     'error-message': 'Mensaje de Error:',
    56.     'error-close': 'Cerrar',
    57.     'bugreport-header': 'Muestra informe de error',
    58.     'bugreport-senddata': 'Enviar datos de JSON',
    59.     'bugreport-sendcapture': 'Enviar Captura de Grafico',
    60.     'bugreport-yourcomment': 'Su Commento:',
    61.     'bugreport-jsondata': 'Datos de JSON:',
    62.     'bugreport-youremail': 'Su Dirección de Correo Electrónico',
    63.     'bugreport-infoemail': 'Si Gustas Recibir Correo Electrónico Sobre Su Reporte de Error',
    64.     'bugreport-emailmandatory': 'Su Dirección de Correo Electrónico es mandatorio...',
    65.     'bugreport-submit': 'Enviar',
    66.     'bugreport-cancel': 'Cancelar',
    67.     'bugreport-confirm': 'Su Informe de Error Se Ha Enviado.\n\nGracias!',
    68.     'about-close': 'Cerrar',
    69.     'viewsource-jsonsource': 'JSON Analizado Gramaticalmente',
    70.     'viewsource-originalsource': 'JSON Original',
    71.     'viewsource-close': 'Cerrar',
    72.     'viewsource-apply': 'Aplique',
    73.     'viewimage-close': 'Cerrar',
    74.     'legend-pagination': 'Pagina %page% de %pages%'
    75.   };
    76.  
    77.   // assign locale file to ZingChart object
    78.   zingchart.i18n.es = locale;
    79.  
    80.   // full ZingChart schema can be found here:
    81.   // https://www.zingchart.com/docs/api/json-configuration/
    82.   let chartConfig = {
    83.     type: 'bar',
    84.     locale: 'es',
    85.     globals: {
    86.       fontSize: '14px'
    87.     },
    88.     title: {
    89.       text: 'Right Click To View Spanish Menu',
    90.       fontSize: '24px'
    91.     },
    92.     legend: {
    93.       draggable: true
    94.     },
    95.     // plot represents general series, or plots, styling
    96.     plot: {
    97.       // hoverstate
    98.       tooltip: {
    99.         // % symbol represents a token to insert a value. Full list here:
    100.         // https://www.zingchart.com/docs/tutorials/chart-elements/zingchart-tokens/
    101.         text: '%plot-text %kl was %v (&deg;F)',
    102.         borderRadius: '3px',
    103.         // htmlMode renders text attribute as html so
    104.         // &deg; is rendered
    105.         htmlMode: true
    106.       },
    107.       valueBox: {
    108.         color: '#fff',
    109.         placement: 'top-in'
    110.       },
    111.       // animation docs here:
    112.       // https://www.zingchart.com/docs/tutorials/design-and-styling/chart-animation/#animation__effect
    113.       animation: {
    114.         effect: 'ANIMATION_EXPAND_BOTTOM',
    115.         method: 'ANIMATION_STRONG_EASE_OUT',
    116.         sequence: 'ANIMATION_BY_NODE',
    117.         speed: 275
    118.       }
    119.     },
    120.     scaleX: {
    121.       // set scale label
    122.       label: {
    123.         text: 'Days'
    124.       },
    125.       // convert text on scale indices
    126.       labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    127.     },
    128.     scaleY: {
    129.       // scale label with unicode character
    130.       label: {
    131.         text: 'Temperature (°F)'
    132.       }
    133.     },
    134.     // plot values
    135.     series: [{
    136.         text: 'Week 1',
    137.         values: [23, 20, 27, 29, 25, 17, 15],
    138.         backgroundColor: '#64b5f6'
    139.       },
    140.       {
    141.         text: 'Week 2',
    142.         values: [35, 42, 33, 49, 35, 47, 35],
    143.         backgroundColor: '#ffb74d'
    144.       }
    145.     ]
    146.   };
    147.  
    148.  
    149.   zingchart.render({
    150.     id: 'myChart',
    151.     data: chartConfig
    152.   });
    153. });