• 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.     var myConfig = {
    37.       "type": "null",
    38.       "images": [{
    39.           "x": 50,
    40.           "y": 50,
    41.           "width": 16,
    42.           "background-repeat": "no-repeat",
    43.           "background-position": "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.           "space-x": 16,
    50.           "space-y": 35
    51.         },
    52.         {
    53.           "x": 250,
    54.           "y": 50,
    55.           "width": 16,
    56.           "background-repeat": "no-repeat",
    57.           "background-position": "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.           "space-x": 16,
    64.           "space-y": 35,
    65.           "inactive": {
    66.             "alpha": 0.25
    67.           }
    68.         },
    69.         {
    70.           "x": 450,
    71.           "y": 50,
    72.           "width": 16,
    73.           "background-repeat": "no-repeat",
    74.           "background-position": "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.           "space-x": 16,
    81.           "space-y": 35,
    82.           "inactive": {
    83.             "background-position": "-16px 0"
    84.           }
    85.         },
    86.  
    87.         {
    88.           "x": 50,
    89.           "y": 250,
    90.           "width": 16,
    91.           "background-repeat": "no-repeat",
    92.           "background-position": "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.           "space-x": 16,
    99.           "space-y": 35,
    100.           "offset-col": 5
    101.         },
    102.         {
    103.           "x": 250,
    104.           "y": 250,
    105.           "width": 16,
    106.           "background-repeat": "no-repeat",
    107.           "background-position": "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.           "space-x": 16,
    114.           "space-y": 35,
    115.           "offset-row": 10,
    116.           "inactive": {
    117.             "alpha": 0.25
    118.           }
    119.         },
    120.         {
    121.           "x": 450,
    122.           "y": 250,
    123.           "width": 16,
    124.           "background-repeat": "no-repeat",
    125.           "background-position": "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.           "space-x": 16,
    132.           "space-y": 35,
    133.           "offset-col": -5,
    134.           "offset-row": 10,
    135.           "inactive": {
    136.             "background-position": "-16px 0"
    137.           }
    138.         }
    139.  
    140.  
    141.  
    142.       ]
    143.     };
    144.  
    145.     zingchart.render({
    146.       id: 'myChart',
    147.       data: myConfig,
    148.       height: 500,
    149.       width: 800
    150.     });
    151.   </script>
    152. </body>
    153.  
    154. </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. var myConfig = {
    2.   "type": "null",
    3.   "images": [{
    4.       "x": 50,
    5.       "y": 50,
    6.       "width": 16,
    7.       "background-repeat": "no-repeat",
    8.       "background-position": "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.       "space-x": 16,
    15.       "space-y": 35
    16.     },
    17.     {
    18.       "x": 250,
    19.       "y": 50,
    20.       "width": 16,
    21.       "background-repeat": "no-repeat",
    22.       "background-position": "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.       "space-x": 16,
    29.       "space-y": 35,
    30.       "inactive": {
    31.         "alpha": 0.25
    32.       }
    33.     },
    34.     {
    35.       "x": 450,
    36.       "y": 50,
    37.       "width": 16,
    38.       "background-repeat": "no-repeat",
    39.       "background-position": "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.       "space-x": 16,
    46.       "space-y": 35,
    47.       "inactive": {
    48.         "background-position": "-16px 0"
    49.       }
    50.     },
    51.  
    52.     {
    53.       "x": 50,
    54.       "y": 250,
    55.       "width": 16,
    56.       "background-repeat": "no-repeat",
    57.       "background-position": "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.       "space-x": 16,
    64.       "space-y": 35,
    65.       "offset-col": 5
    66.     },
    67.     {
    68.       "x": 250,
    69.       "y": 250,
    70.       "width": 16,
    71.       "background-repeat": "no-repeat",
    72.       "background-position": "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.       "space-x": 16,
    79.       "space-y": 35,
    80.       "offset-row": 10,
    81.       "inactive": {
    82.         "alpha": 0.25
    83.       }
    84.     },
    85.     {
    86.       "x": 450,
    87.       "y": 250,
    88.       "width": 16,
    89.       "background-repeat": "no-repeat",
    90.       "background-position": "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.       "space-x": 16,
    97.       "space-y": 35,
    98.       "offset-col": -5,
    99.       "offset-row": 10,
    100.       "inactive": {
    101.         "background-position": "-16px 0"
    102.       }
    103.     }
    104.  
    105.  
    106.  
    107.   ]
    108. };
    109.  
    110. zingchart.render({
    111.   id: 'myChart',
    112.   data: myConfig,
    113.   height: 500,
    114.   width: 800
    115. });