• 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.     .zc-ref {
    10.       display: none;
    11.     }
    12.   </style>
    13. </head>
    14.  
    15. <body class="zc-body">
    16.  
    17.   <div id="myChart">
    18.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    19.   </div>
    20.  
    21.   <script>
    22.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // DEFINE CHART LOCATIONS (IDS)
    23.     // -----------------------------
    24.     // Main chart render location(s)
    25.     let chartId = 'myChart';
    26.  
    27.     // CHART CONFIG
    28.     // -----------------------------
    29.     let chartConfig = {
    30.       type: 'pie',
    31.       title: {
    32.         text: 'MSCI considering a further increase to China A-shares in the MSCI Global Investable Market indexes',
    33.         fontSize: '15px'
    34.       },
    35.       plot: {
    36.         detach: false,
    37.         animation: {
    38.           effect: 'ANIMATION_EXPAND_TOP',
    39.           method: 'ANIMATION_LINEAR',
    40.           sequence: 'ANIMATION_NO_SEQUENCE',
    41.           speed: 300
    42.         },
    43.         valueBox: {
    44.           text: '%node-value%',
    45.           fontSize: '11px',
    46.           fontWeight: 'bold',
    47.           offsetR: '15px',
    48.           placement: 'in',
    49.           rules: [{
    50.             rule: '%node-value < 4',
    51.             color: '#333',
    52.             offsetR: '-10px',
    53.             placement: 'out'
    54.           }]
    55.         }
    56.       },
    57.       plotarea: {
    58.         margin: '50px 10px 30px 10px'
    59.       },
    60.       scale: {
    61.         decimals: 3,
    62.         cursor: 'pointer',
    63.         values: [
    64.           'Current<br>MSCI EM 5% A-share<br>LC Inclusion',
    65.           'August 2021<br>MSCI EM 20% A-share<br>LC Inclusion',
    66.           'May 2022<br>MSCI EM 20% A-share<br>LC+MC Inclusion'
    67.         ],
    68.         maxTicks: 2,
    69.         item: {
    70.           fontWeight: 'bold',
    71.           fontSize: '13px',
    72.           placement: 'top',
    73.  
    74.           mediaRules: [{
    75.             maxWidth: 400,
    76.             color: 'red'
    77.           }]
    78.         },
    79.         layout: '1x3',
    80.         sizeFactor: 0.8,
    81.       },
    82.       legend: {
    83.         borderWidth: 0,
    84.         layout: 'float',
    85.         margin: 'auto auto 25px auto',
    86.         toggleAction: 'remove',
    87.         item: {
    88.           paddingLeft: '-5px',
    89.           fontSize: '13px',
    90.           fontWeight: 'bold'
    91.         },
    92.         marker: {
    93.           size: '4px'
    94.         },
    95.       },
    96.       tooltip: {
    97.         text: '%plot-text: %node-value%',
    98.         fontSize: '17px'
    99.       },
    100.       source: {
    101.         text: 'Source: https://www.marquetteassociates.com/research/a-shining-light-for-china/',
    102.         align: 'left',
    103.         target: '_blank',
    104.         url: 'https://www.marquetteassociates.com/research/a-shining-light-for-china/'
    105.       },
    106.       series: [{
    107.           values: [30.6, 29.1, 28.9],
    108.           text: 'China',
    109.           backgroundColor: '#5C7CB5'
    110.         },
    111.         {
    112.           values: [0.7, 2.8, 3.4],
    113.           text: 'A Shares',
    114.           backgroundColor: '#D79024'
    115.         },
    116.         {
    117.           values: [14.8, 14.0, 13.9],
    118.           text: 'Korea',
    119.           backgroundColor: '#BCC342'
    120.         },
    121.         {
    122.           values: [12.2, 11.6, 11.5],
    123.           text: 'Taiwan',
    124.           backgroundColor: '#74667F'
    125.         },
    126.         {
    127.           values: [9.3, 8.8, 8.8],
    128.           text: 'India',
    129.           backgroundColor: '#92B5C8'
    130.         },
    131.         {
    132.           values: [6.2, 5.9, 5.8],
    133.           text: 'South Africa',
    134.           backgroundColor: '#BBB1BA'
    135.         },
    136.         {
    137.           values: [5.8, 5.5, 5.4],
    138.           text: 'Brazil',
    139.           backgroundColor: '#AFA492'
    140.         },
    141.         {
    142.           values: [20.4, 22.3, 22.4],
    143.           text: 'Others',
    144.           backgroundColor: '#494C55'
    145.         }
    146.       ]
    147.     };
    148.  
    149.  
    150.     // RENDER CHARTS
    151.     // -----------------------------
    152.     zingchart.render({
    153.       id: chartId,
    154.       data: chartConfig,
    155.       width: '100%',
    156.       height: '540px',
    157.       output: 'svg'
    158.     });
    159.   </script>
    160. </body>
    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 class="zc-body">
    11.  
    12.   <div id="myChart">
    13.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    14.   </div>
    15.  
    16. </body>
    1. .zc-ref {
    2.   display: none;
    3. }
    1. // DEFINE CHART LOCATIONS (IDS)
    2. // -----------------------------
    3. // Main chart render location(s)
    4. let chartId = 'myChart';
    5.  
    6. // CHART CONFIG
    7. // -----------------------------
    8. let chartConfig = {
    9.   type: 'pie',
    10.   title: {
    11.     text: 'MSCI considering a further increase to China A-shares in the MSCI Global Investable Market indexes',
    12.     fontSize: '15px'
    13.   },
    14.   plot: {
    15.     detach: false,
    16.     animation: {
    17.       effect: 'ANIMATION_EXPAND_TOP',
    18.       method: 'ANIMATION_LINEAR',
    19.       sequence: 'ANIMATION_NO_SEQUENCE',
    20.       speed: 300
    21.     },
    22.     valueBox: {
    23.       text: '%node-value%',
    24.       fontSize: '11px',
    25.       fontWeight: 'bold',
    26.       offsetR: '15px',
    27.       placement: 'in',
    28.       rules: [{
    29.         rule: '%node-value < 4',
    30.         color: '#333',
    31.         offsetR: '-10px',
    32.         placement: 'out'
    33.       }]
    34.     }
    35.   },
    36.   plotarea: {
    37.     margin: '50px 10px 30px 10px'
    38.   },
    39.   scale: {
    40.     decimals: 3,
    41.     cursor: 'pointer',
    42.     values: [
    43.       'Current<br>MSCI EM 5% A-share<br>LC Inclusion',
    44.       'August 2021<br>MSCI EM 20% A-share<br>LC Inclusion',
    45.       'May 2022<br>MSCI EM 20% A-share<br>LC+MC Inclusion'
    46.     ],
    47.     maxTicks: 2,
    48.     item: {
    49.       fontWeight: 'bold',
    50.       fontSize: '13px',
    51.       placement: 'top',
    52.  
    53.       mediaRules: [{
    54.         maxWidth: 400,
    55.         color: 'red'
    56.       }]
    57.     },
    58.     layout: '1x3',
    59.     sizeFactor: 0.8,
    60.   },
    61.   legend: {
    62.     borderWidth: 0,
    63.     layout: 'float',
    64.     margin: 'auto auto 25px auto',
    65.     toggleAction: 'remove',
    66.     item: {
    67.       paddingLeft: '-5px',
    68.       fontSize: '13px',
    69.       fontWeight: 'bold'
    70.     },
    71.     marker: {
    72.       size: '4px'
    73.     },
    74.   },
    75.   tooltip: {
    76.     text: '%plot-text: %node-value%',
    77.     fontSize: '17px'
    78.   },
    79.   source: {
    80.     text: 'Source: https://www.marquetteassociates.com/research/a-shining-light-for-china/',
    81.     align: 'left',
    82.     target: '_blank',
    83.     url: 'https://www.marquetteassociates.com/research/a-shining-light-for-china/'
    84.   },
    85.   series: [{
    86.       values: [30.6, 29.1, 28.9],
    87.       text: 'China',
    88.       backgroundColor: '#5C7CB5'
    89.     },
    90.     {
    91.       values: [0.7, 2.8, 3.4],
    92.       text: 'A Shares',
    93.       backgroundColor: '#D79024'
    94.     },
    95.     {
    96.       values: [14.8, 14.0, 13.9],
    97.       text: 'Korea',
    98.       backgroundColor: '#BCC342'
    99.     },
    100.     {
    101.       values: [12.2, 11.6, 11.5],
    102.       text: 'Taiwan',
    103.       backgroundColor: '#74667F'
    104.     },
    105.     {
    106.       values: [9.3, 8.8, 8.8],
    107.       text: 'India',
    108.       backgroundColor: '#92B5C8'
    109.     },
    110.     {
    111.       values: [6.2, 5.9, 5.8],
    112.       text: 'South Africa',
    113.       backgroundColor: '#BBB1BA'
    114.     },
    115.     {
    116.       values: [5.8, 5.5, 5.4],
    117.       text: 'Brazil',
    118.       backgroundColor: '#AFA492'
    119.     },
    120.     {
    121.       values: [20.4, 22.3, 22.4],
    122.       text: 'Others',
    123.       backgroundColor: '#494C55'
    124.     }
    125.   ]
    126. };
    127.  
    128.  
    129. // RENDER CHARTS
    130. // -----------------------------
    131. zingchart.render({
    132.   id: chartId,
    133.   data: chartConfig,
    134.   width: '100%',
    135.   height: '540px',
    136.   output: 'svg'
    137. });