<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ZingSoft Demo</title> <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } #myChart { height: 100%; width: 100%; min-height: 150px; } .zc-ref { display: none; } </style> </head> <body> <div id="myChart"> <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a> </div> <script> ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; var myConfig = { "type": "null", "images": [{ "x": 50, "y": 50, "width": 16, "background-repeat": "no-repeat", "background-position": "0 0", "src": "https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png", "repeat": true, "items": 23, "cols": 8, "rows": 4, "space-x": 16, "space-y": 35, topState: { alpha: 0.2, offsetX: 10, offsetY: 10, backgroundColor: 'red', } }, { "x": 250, "y": 50, "width": 16, "background-repeat": "no-repeat", "background-position": "0 0", "src": "https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png", "repeat": true, "items": 13, "cols": 8, "rows": 4, "space-x": 16, "space-y": 35, "inactive": { "alpha": 0.25 } }, { "x": 450, "y": 50, "width": 16, "background-repeat": "no-repeat", "background-position": "0 0", "src": "https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png", "repeat": true, "items": 13, "cols": 8, "rows": 4, "space-x": 16, "space-y": 35, "inactive": { "background-position": "-16px 0" } }, { "x": 50, "y": 250, "width": 16, "background-repeat": "no-repeat", "background-position": "0 0", "src": "https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png", "repeat": true, "items": 23, "cols": 8, "rows": 4, "space-x": 16, "space-y": 35, "offset-col": 5 }, { "x": 250, "y": 250, "width": 16, "background-repeat": "no-repeat", "background-position": "0 0", "src": "https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png", "repeat": true, "items": 13, "cols": 8, "rows": 4, "space-x": 16, "space-y": 35, "offset-row": 10, "inactive": { "alpha": 0.25 } }, { "x": 450, "y": 250, "width": 16, "background-repeat": "no-repeat", "background-position": "0 0", "src": "https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png", "repeat": true, "items": 13, "cols": 12, "rows": 3, "space-x": 16, "space-y": 35, "offset-col": -5, "offset-row": 10, "inactive": { "background-position": "-16px 0" } } ] }; zingchart.render({ id: 'myChart', data: myConfig, height: 500, width: 800 }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ZingSoft Demo</title> <script src="https://cdn.zingchart.com/zingchart.min.js"></script> </head> <body> <div id="myChart"> <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a> </div> </body> </html>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; } #myChart { height: 100%; width: 100%; min-height: 150px; } .zc-ref { display: none; }
var myConfig = { "type": "null", "images": [{ "x": 50, "y": 50, "width": 16, "background-repeat": "no-repeat", "background-position": "0 0", "src": "https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png", "repeat": true, "items": 23, "cols": 8, "rows": 4, "space-x": 16, "space-y": 35, topState: { alpha: 0.2, offsetX: 10, offsetY: 10, backgroundColor: 'red', } }, { "x": 250, "y": 50, "width": 16, "background-repeat": "no-repeat", "background-position": "0 0", "src": "https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png", "repeat": true, "items": 13, "cols": 8, "rows": 4, "space-x": 16, "space-y": 35, "inactive": { "alpha": 0.25 } }, { "x": 450, "y": 50, "width": 16, "background-repeat": "no-repeat", "background-position": "0 0", "src": "https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png", "repeat": true, "items": 13, "cols": 8, "rows": 4, "space-x": 16, "space-y": 35, "inactive": { "background-position": "-16px 0" } }, { "x": 50, "y": 250, "width": 16, "background-repeat": "no-repeat", "background-position": "0 0", "src": "https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png", "repeat": true, "items": 23, "cols": 8, "rows": 4, "space-x": 16, "space-y": 35, "offset-col": 5 }, { "x": 250, "y": 250, "width": 16, "background-repeat": "no-repeat", "background-position": "0 0", "src": "https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png", "repeat": true, "items": 13, "cols": 8, "rows": 4, "space-x": 16, "space-y": 35, "offset-row": 10, "inactive": { "alpha": 0.25 } }, { "x": 450, "y": 250, "width": 16, "background-repeat": "no-repeat", "background-position": "0 0", "src": "https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png", "repeat": true, "items": 13, "cols": 12, "rows": 3, "space-x": 16, "space-y": 35, "offset-col": -5, "offset-row": 10, "inactive": { "background-position": "-16px 0" } } ] }; zingchart.render({ id: 'myChart', data: myConfig, height: 500, width: 800 });