• 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">
    32.     <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
    33.   </div>
    34.   <script>
    35.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    36.     let chartConfig = {
    37.       type: 'null',
    38.       images: [{
    39.           x: 50,
    40.           y: 50,
    41.           width: 16,
    42.           backgroundRepeat: 'no-repeat',
    43.           backgroundPosition: '0 0',
    44.           src: 'https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png',
    45.           repeat: true,
    46.           items: 23,
    47.           cols: 8,
    48.           rows: 4,
    49.           spaceX: 16,
    50.           spaceY: 35
    51.         },
    52.         {
    53.           x: 250,
    54.           y: 50,
    55.           width: 16,
    56.           backgroundRepeat: 'no-repeat',
    57.           backgroundPosition: '0 0',
    58.           src: 'https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png',
    59.           repeat: true,
    60.           items: 13,
    61.           cols: 8,
    62.           rows: 4,
    63.           spaceX: 16,
    64.           spaceY: 35,
    65.           inactive: {
    66.             alpha: 0.25
    67.           }
    68.         },
    69.         {
    70.           x: 450,
    71.           y: 50,
    72.           width: 16,
    73.           backgroundRepeat: 'no-repeat',
    74.           backgroundPosition: '0 0',
    75.           src: 'https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png',
    76.           repeat: true,
    77.           items: 13,
    78.           cols: 8,
    79.           rows: 4,
    80.           spaceX: 16,
    81.           spaceY: 35,
    82.           inactive: {
    83.             backgroundPosition: '-16px 0'
    84.           }
    85.         },
    86.  
    87.         {
    88.           x: 50,
    89.           y: 250,
    90.           width: 16,
    91.           backgroundRepeat: 'no-repeat',
    92.           backgroundPosition: '0 0',
    93.           src: 'https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png',
    94.           repeat: true,
    95.           items: 23,
    96.           cols: 8,
    97.           rows: 4,
    98.           spaceX: 16,
    99.           spaceY: 35,
    100.           offsetCol: 5
    101.         },
    102.         {
    103.           x: 250,
    104.           y: 250,
    105.           width: 16,
    106.           backgroundRepeat: 'no-repeat',
    107.           backgroundPosition: '0 0',
    108.           src: 'https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png',
    109.           repeat: true,
    110.           items: 13,
    111.           cols: 8,
    112.           rows: 4,
    113.           spaceX: 16,
    114.           spaceY: 35,
    115.           offsetRow: 10,
    116.           inactive: {
    117.             alpha: 0.25
    118.           }
    119.         },
    120.         {
    121.           x: 450,
    122.           y: 250,
    123.           width: 16,
    124.           backgroundRepeat: 'no-repeat',
    125.           backgroundPosition: '0 0',
    126.           src: 'https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png',
    127.           repeat: true,
    128.           items: 13,
    129.           cols: 12,
    130.           rows: 3,
    131.           spaceX: 16,
    132.           spaceY: 35,
    133.           offsetCol: -5,
    134.           offsetRow: 10,
    135.           inactive: {
    136.             backgroundPosition: '-16px 0'
    137.           }
    138.         }
    139.       ]
    140.     };
    141.  
    142.     zingchart.render({
    143.       id: 'myChart',
    144.       data: chartConfig,
    145.       height: 500,
    146.       width: 800
    147.     });
    148.   </script>
    149. </body>
    150.  
    151. </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">
    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.   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. let chartConfig = {
    2.   type: 'null',
    3.   images: [{
    4.       x: 50,
    5.       y: 50,
    6.       width: 16,
    7.       backgroundRepeat: 'no-repeat',
    8.       backgroundPosition: '0 0',
    9.       src: 'https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png',
    10.       repeat: true,
    11.       items: 23,
    12.       cols: 8,
    13.       rows: 4,
    14.       spaceX: 16,
    15.       spaceY: 35
    16.     },
    17.     {
    18.       x: 250,
    19.       y: 50,
    20.       width: 16,
    21.       backgroundRepeat: 'no-repeat',
    22.       backgroundPosition: '0 0',
    23.       src: 'https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png',
    24.       repeat: true,
    25.       items: 13,
    26.       cols: 8,
    27.       rows: 4,
    28.       spaceX: 16,
    29.       spaceY: 35,
    30.       inactive: {
    31.         alpha: 0.25
    32.       }
    33.     },
    34.     {
    35.       x: 450,
    36.       y: 50,
    37.       width: 16,
    38.       backgroundRepeat: 'no-repeat',
    39.       backgroundPosition: '0 0',
    40.       src: 'https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png',
    41.       repeat: true,
    42.       items: 13,
    43.       cols: 8,
    44.       rows: 4,
    45.       spaceX: 16,
    46.       spaceY: 35,
    47.       inactive: {
    48.         backgroundPosition: '-16px 0'
    49.       }
    50.     },
    51.  
    52.     {
    53.       x: 50,
    54.       y: 250,
    55.       width: 16,
    56.       backgroundRepeat: 'no-repeat',
    57.       backgroundPosition: '0 0',
    58.       src: 'https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png',
    59.       repeat: true,
    60.       items: 23,
    61.       cols: 8,
    62.       rows: 4,
    63.       spaceX: 16,
    64.       spaceY: 35,
    65.       offsetCol: 5
    66.     },
    67.     {
    68.       x: 250,
    69.       y: 250,
    70.       width: 16,
    71.       backgroundRepeat: 'no-repeat',
    72.       backgroundPosition: '0 0',
    73.       src: 'https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png',
    74.       repeat: true,
    75.       items: 13,
    76.       cols: 8,
    77.       rows: 4,
    78.       spaceX: 16,
    79.       spaceY: 35,
    80.       offsetRow: 10,
    81.       inactive: {
    82.         alpha: 0.25
    83.       }
    84.     },
    85.     {
    86.       x: 450,
    87.       y: 250,
    88.       width: 16,
    89.       backgroundRepeat: 'no-repeat',
    90.       backgroundPosition: '0 0',
    91.       src: 'https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png',
    92.       repeat: true,
    93.       items: 13,
    94.       cols: 12,
    95.       rows: 3,
    96.       spaceX: 16,
    97.       spaceY: 35,
    98.       offsetCol: -5,
    99.       offsetRow: 10,
    100.       inactive: {
    101.         backgroundPosition: '-16px 0'
    102.       }
    103.     }
    104.   ]
    105. };
    106.  
    107. zingchart.render({
    108.   id: 'myChart',
    109.   data: chartConfig,
    110.   height: 500,
    111.   width: 800
    112. });