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