• 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.   <div id="myChart" class="chart--container">
    31.     <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    32.   </div>
    33.   <script>
    34.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    35.     let countryData = [
    36.       ['Norway', 50.2, 335504],
    37.       ['Denmark', 42, 277339],
    38.       ['Belgium', 39.2, 421611],
    39.       ['Sweden', 38, 462057],
    40.       ['France', 35.6, 2228857],
    41.       ['Netherlands', 34.3, 702641],
    42.       ['Finland', 33.2, 215615],
    43.       ['Germany', 33.0, 3144050],
    44.       ['Austria', 32.7, 349344],
    45.       ['Ireland', 30.4, 275567],
    46.       ['Italy', 27.8, 1672438],
    47.       ['United Kingdom', 26.7, 2366911],
    48.       ['Spain', 21.3, 1113851],
    49.       ['Greece', 14.2, 175887],
    50.       ['Portugal', 13.7, 184933],
    51.       ['Czech Republic', 10.2, 176564],
    52.       ['Poland', 8.6, 424269],
    53.       ['Romania', 5.5, 169578],
    54.     ]
    55.  
    56.     let myConfig = {
    57.       type: 'variwide',
    58.       globals: {
    59.         fontFamily: 'Lucida Sans Unicode',
    60.       },
    61.       title: {
    62.         text: 'Labor costs in Europe, 2016',
    63.         adjustLayout: true,
    64.       },
    65.       options: {
    66.         data: countryData
    67.       },
    68.       plot: {
    69.         valueBox: {
    70.           text: '\u20AC%data-value',
    71.           color: '#000',
    72.           overlap: false,
    73.         },
    74.         tooltipText: "<span style='font-size:17px;color:%color'><b>%plot-text</b></span><br><br>Labor costs: <b>\u20AC%data-value/h</b><br>GDP: <b>\u20AC%data-size million</b>",
    75.       },
    76.       plotarea: {
    77.         margin: 'dynamic',
    78.       },
    79.       scaleX: {
    80.         label: {
    81.           text: 'Column widths are proportional to GDP',
    82.           bold: false,
    83.         },
    84.         item: {
    85.           color: '#000',
    86.           fontSize: 10,
    87.           angle: 330,
    88.         },
    89.       },
    90.       scaleY: {
    91.         guide: {
    92.           lineStyle: 'solid',
    93.         },
    94.       },
    95.       source: {
    96.         text: 'Source: Eurostat',
    97.         adjustLayout: true,
    98.       },
    99.       tooltip: {
    100.         padding: '10px',
    101.         fontSize: '12px',
    102.         backgroundColor: '#fff',
    103.         alpha: 0.9,
    104.         color: '#000',
    105.         align: 'left',
    106.         borderRadius: '7px',
    107.         borderWidth: '2px',
    108.         offsetY: 5,
    109.         shadow: true,
    110.         shadowDistance: 2,
    111.         borderColor: '%color-1',
    112.         placement: 'node:top',
    113.         callout: true,
    114.         text: "<span style='font-size:17px;color:%color;font-weight:bold;'>\u220e %plot-text</span><br><br>Labor costs: <b>\u20AC%data-value/h</b><br>GDP: <b>\u20AC%data-size million</b>",
    115.       },
    116.     };
    117.  
    118.     zingchart.render({
    119.       id: 'myChart',
    120.       data: myConfig,
    121.       height: '400px',
    122.       width: '100%',
    123.     });
    124.   </script>
    125. </body>
    126.  
    127. </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.   <div id="myChart" class="chart--container">
    12.     <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    13.   </div>
    14. </body>
    15.  
    16. </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. let countryData = [
    2.   ['Norway', 50.2, 335504],
    3.   ['Denmark', 42, 277339],
    4.   ['Belgium', 39.2, 421611],
    5.   ['Sweden', 38, 462057],
    6.   ['France', 35.6, 2228857],
    7.   ['Netherlands', 34.3, 702641],
    8.   ['Finland', 33.2, 215615],
    9.   ['Germany', 33.0, 3144050],
    10.   ['Austria', 32.7, 349344],
    11.   ['Ireland', 30.4, 275567],
    12.   ['Italy', 27.8, 1672438],
    13.   ['United Kingdom', 26.7, 2366911],
    14.   ['Spain', 21.3, 1113851],
    15.   ['Greece', 14.2, 175887],
    16.   ['Portugal', 13.7, 184933],
    17.   ['Czech Republic', 10.2, 176564],
    18.   ['Poland', 8.6, 424269],
    19.   ['Romania', 5.5, 169578],
    20. ]
    21.  
    22. let myConfig = {
    23.   type: 'variwide',
    24.   globals: {
    25.     fontFamily: 'Lucida Sans Unicode',
    26.   },
    27.   title: {
    28.     text: 'Labor costs in Europe, 2016',
    29.     adjustLayout: true,
    30.   },
    31.   options: {
    32.     data: countryData
    33.   },
    34.   plot: {
    35.     valueBox: {
    36.       text: '\u20AC%data-value',
    37.       color: '#000',
    38.       overlap: false,
    39.     },
    40.     tooltipText: "<span style='font-size:17px;color:%color'><b>%plot-text</b></span><br><br>Labor costs: <b>\u20AC%data-value/h</b><br>GDP: <b>\u20AC%data-size million</b>",
    41.   },
    42.   plotarea: {
    43.     margin: 'dynamic',
    44.   },
    45.   scaleX: {
    46.     label: {
    47.       text: 'Column widths are proportional to GDP',
    48.       bold: false,
    49.     },
    50.     item: {
    51.       color: '#000',
    52.       fontSize: 10,
    53.       angle: 330,
    54.     },
    55.   },
    56.   scaleY: {
    57.     guide: {
    58.       lineStyle: 'solid',
    59.     },
    60.   },
    61.   source: {
    62.     text: 'Source: Eurostat',
    63.     adjustLayout: true,
    64.   },
    65.   tooltip: {
    66.     padding: '10px',
    67.     fontSize: '12px',
    68.     backgroundColor: '#fff',
    69.     alpha: 0.9,
    70.     color: '#000',
    71.     align: 'left',
    72.     borderRadius: '7px',
    73.     borderWidth: '2px',
    74.     offsetY: 5,
    75.     shadow: true,
    76.     shadowDistance: 2,
    77.     borderColor: '%color-1',
    78.     placement: 'node:top',
    79.     callout: true,
    80.     text: "<span style='font-size:17px;color:%color;font-weight:bold;'>\u220e %plot-text</span><br><br>Labor costs: <b>\u20AC%data-value/h</b><br>GDP: <b>\u20AC%data-size million</b>",
    81.   },
    82. };
    83.  
    84. zingchart.render({
    85.   id: 'myChart',
    86.   data: myConfig,
    87.   height: '400px',
    88.   width: '100%',
    89. });