• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <style>
    8.     * {
    9.       font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans';
    10.       font-size: 12px;
    11.     }
    12.   </style>
    13.   <link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
    14.   <script nonce="undefined" src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
    15.  
    16.   <script nonce="undefined">
    17.     window.ICONS24 = {
    18.       'ic00': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAa5JREFUeNrU1s8rg3EcwPFnmqmxRAkRp5lECTnJxcVNykUkJ3+Cgz9gIYflQMpBUkrKjwPJhVxcVtpNltomNIpkB5Y93t/1ffSYZ3u+mzn41Gu1Z3u+n+f57PP9PHPouq79ZZRofxyFJnBiBLsI4wLz8MrPXRhCnUaJqjCMMlEuBU74kdR/RggDWMJiuvy8+BDDjGKCCd0+XjCOHnFCtzyYwgqaba7+XCFBAnvoECe14tH0YRyzIjsqMxKIMr4qJLhFr1EiN/YtvvSBEyxgFC0ywY1CgkPjoowrE9miOU4Q5YsgKG/fLlaNBKJNK/CEtRxt6UATuuBWaOO4uZ/rsSUXKFZEzBvtGgeoLtLiKQS/3slaubChFyfC5k1rjIp3TGIaD7+8g3W8Wc0i8Rt45BwpNO6wmW3YRRGTNSw0Arj6dsRiHPThSPZ+PrEDT+Z62WZOKebyWPwUNVZrZR4ohxdTuFdcfDvb4oLYaJ0YSz8cNK0W7XLzqexWP5ZlF1oHWRrkMDuWA063mUnPCKBN5fnhMD30xUxqxCD64TPNnQRCOJMukVRpK8e//1fxKcAA7aHVBMYBzdMAAAAASUVORK5CYII=',
    19.       'ic01': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAihJREFUeNqsljssQ1EYx09Lm6jGIxavNAiDxCBWFZHYTHaTWUQsFiwSYmFhxGIWixgsRBCLSBCDR70fiXc8guj1P/U/zefm3rZRX/LL6f3ud/7/e3u+c1qPZVmKEQQdoA2UAS+I30wSHhAFR2AajIHn2B1tAKrAhPV/obUqYw9Pgynw/kexSVADwqAW7AgTlclXrAd+9bc4Advi+o5jg+L3rMOn/j980iBtIUSA4y9ND7sows5xiy9wBs55XQJKQQb4BB/sJC2WRRPdUeVmkSMJFvEB9IMy1mpCoJf33CIiu8jN4BI0C2FNEPj5uZE1SQ1OmVwEx6KoyybuZ24XzAAv6BT1x9SwqBk3eGRS8dV1HPCrkAY+jrrft8A4yAf7nNPL+xY1HbsoyvGaPS7jk+Mm6AYV4B7cOHWQDrPR5JnzwjEjSXuugGxb7tVe5HU4tCL8XAhCCQzewCxripjbo0b8ob1C2Dz1GtjnxNYEBuatW1mr56yKN/fI09QscoDXw7y+AE22hZY0scbiHEWN+CK7GeSBJebuQJ+to0LM3bJmmXNSNlDcuevMR9nXK+SUOYs15WJeygaaAjACrh12qs6Nska5GZjD7hHk8GfzxWFBq0Fd7PD6Cd1pG2DXoTZAjSeQa1zNedKQYEFTJUytK7mTFzgOguI0fhv03CG28LzcyQM8BtrBEpgDD2J/JAstmAdaQCWYpJGyH8M94DCNfxOH1Aga3W8BBgByzztIwcLIKwAAAABJRU5ErkJggg==',
    20.       'ic02': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAiZJREFUeNqMlrtrVEEUh/eKrIT4QkSE+MIUPgobBQshsJWLitpZiNYB/QusxcrSR4Ig5D9QRBQJakRtErRRMEpwjUmEBI0KgUR3Hb+B3+rJZObuHPjgnt3zuOfMmZlbOOcqGbIBLsJp6XfgGvzo5Li6kieHoQ6HpC/CKDzq5FhEKvBJL8BxeAEP4B5sCexm4QQcgyNwH65Dc5mVT2CowoD7Lzdg0KXlpmzaMqgY/2KuCt5qL5w3+nv1PyWb4YPRz8E+axAmWAtdRu+BryUJZmXTli7FSCZowLjRT8Ez+BIJPgNP4WRQcaNsDTw1GFNPF6EOfTBiej2i3+qycfKphfGKxD7YDlvhO0zCkqZoj/4fV3vWwA7YCFOxSm0CP5Y1OKBentH49cFO2ATbZOuDfYNPauFzuArTMLxsf5hyXpsW/IR+ly/edkHP86kxfRUsfveKBYtLQ7bOLHR0iibMcxXWq+RO4qdpnXza7Ysm+Agtc1zkJpjSZmyfa9OpBO9MmYXKnsmsoFs+pQnewGWNZEXj5/v7pyT4ksZ4l/QxHYzJjebHdkjT8BsewxVoRCbnM9yCYekT0BNutNhOvhQE2g9HIwnOwqjRn0RirTiLKmYa7P0wGbHzve7tdHnFEhQRvZp4kWaJXzJBK9BTi+wC21bunXxbb3cQ7sJbnUmh/NIF0w/zMBB/jcjCRNgNL7WYTR3XvTm+uV8Vc/BQG2pBHwJzOY5/BRgAmXVVm/eVlGQAAAAASUVORK5CYII=',
    21.       'ic03': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAYdJREFUeNq01r8vA2EYwHGnR+oqYehkaLSL1MwiwtaaTAz+AJNRIiIG4k9gN4ihs0Fil0g0wdShugibBAlSone+bzzkVXdvr+fuTT5J37u+z3P3/jzL87yeJEtvh/vDGNXqxziKM8E8KvJbJZrGg3Y/g4GoCVTDEvJaskFsSn0GN3I9UoIheeJDqZ/gDOtwJHkLp8Y+UIMcwEIRV9iWa2PeV1lGBhuoIR8Ux/QGanqlMI60XHvSBv8FWRTQF+UNlBK2tPoB7pGT+g5mTTEsWQfpgPF41QbcwhSeUUW/dt/xaeui+Z2ghlyIaW0K2F7UDCvaWoMwjZwu1pijT1M3gV3CDbOSY9uLrARiW3qCtwQSvOsJrmVhxVVUrLqeYB+NGBM0JObPSk5hAU3v/0XFWJSYf7aKMqpoRQjckrZlv62i/RSbwyRW5MC5MHTHEkawJife46+pZDiTC9KX57g1JJiQVZvtdjdVO+ZlyO6pwPaLYxue7A67WO1w7qr/7eHDd7Ul/dnyKcAAolbc3Fnck80AAAAASUVORK5CYII=',
    22.       'ic04': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAeRJREFUeNq01b1LW1EYx/F7Nba+lUIHlTo6KCJI6wuC0cnJRfwTnERwcHAqLqJYl7oUcdMl7h0KRWgpii5K9A/QKg6F+hYctKKGHL+H/gLHq7cxN/GBD7mce3KenOe8xDfGvPU87w3+oAFl3v24QgcW8FdtlRjBFioC/W/xC3VIeSRImn/RjyNTeBxpLBvJGFn2UavsF/BhvGjhawwbv+3YPllKeIhpajVoQzpiAjtOEscqddqWyBUvQoni7pixkF8yhA0tpht2kbux9NQplXjPHGEzWCpWglwzMCrLIGZwXqwZeFqDD5jEOr5gBd9xgG28VN+0tnrvUxPsYABnuHFmuoZFNOMnqtV+jaZ8Esxp8Ozhsecjo3J9wzDihZTo0Hne1T10iVL0YRmf8TpwX316uIqPH7SxQHtWB27zOWhhu2gcLYG2V5jVrBPokkSUEtXjh8qwikaMolXvB1WqbOJI29Qu7FTIuyrJfb3aOjlh/yTeF3ib2i1+qtv5XgJ7sZ3o0xRwO/g6mD3BEtmMH/HCSZDR9syoJGVO30sdwKrAlWO/vxe2TYOqMY+vaHfa29U2rz6hY+RKMKG9vYlyp71cbUZ9IiV4hxSu0fnI+069S6lv3gkS+oXT/+kzrT6JsD53AgwA/0uN0qJpovcAAAAASUVORK5CYII=',
    23.       'ic05': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAhhJREFUeNq01U1IFGEcx/HZXFFLMVCThMpQrIsk5CW1EKHL4qVOUdCl6OxBIQnsJB68hDcPhicVIr148SCegry560JedKHAMrRLrq5aTt9HfmOP68yw6vrAh3l75vk/L/95JuK6rkPpxBO0OvkpnzCB6ahutOMBruUpQAF+mAARjWAVV538lu+ouaCLXSf/5aBNL4B7DgEO2oyGVJjBTTRk3d/HTkinTKeL/4dhDZByj5YM6tCL3axnX1Cq9/zcVb0Ncx31GdY4prCMYcTxEF2qU4U+bAaM4IaOO/YUFej4Ec/xF69wEfNYsRqoQE8Oa7BtByiyApjGn6n3fglgXkxgL6DhMtxBob0Gq5q317quxBt8do+XZMj8G/Wq98tcex9aCrX4qbmeUM9Nb1rwFvesESyGfDvlaMQ3XA/KogS6Ua3nt61R5lqW/bLIK6YHg+r9Y2VUXNvJOkawFfCu2c9eosRe5EIdp7TIt/AVY1Zq1ul8A/34HRCgWQGK7EVe17BafRbNfHCj1tD3sYV0gIzqpewp2tZxAEnthO8Q01TZ23jEG/5J9iIvp++Lo0yJhfwjzFS+wELW/SaMotQOEPFp4EPA/eyNLfReWIBoDn+t9yHP03a0P1jDkq6Xzni+pik8/JLnMKkcN6n5VJVPe16JR+jwUrENl3EFQ9qLKk55btooR4udpnF9OJcw683fGc7TykLnnwADABWSG+pH1Il8AAAAAElFTkSuQmCC',
    24.       'ic06': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAe9JREFUeNrU1s9rE0EUwPFsaJNogrQllaQqYooXoQbsrVhTD6VQ/wBPngTxpBcRG1AIivRo/wAvnuylUGgltBDPBgsiPeilJUVEo0KChESrWb8PX2QYk3QDm0MHPtDOzM6bH29247iuG+hnCQb6XPwKEMV9jP7XIlvkgyMo4xnCZptfAWTQXfdveY5Yq22ARcRwATmE8VsXF0ER9/DdWngaDzCGX7rVSW27qs9exzeJkkLO7VzWzBnhHPbcg8tLZCVyU46iywFewRJktSH9+5SHg0/ghMwoihndwx+oqTqaOptXOvvH1iwbRv+mUf8WZ+GYBxXCURVBHA9RwUXM64Ctsq3bO4gRfNX61xjvJYvO62zeG4P/1IBmmkpdESd7TVMHq9bWPGmTpjftwb0GWLAGl/09bvUZ1G2M9hrgMqrG4JIElzCHtLVFX7CCY50CmIcsM5rFjjX7LE7jE/JI6nPDKGmfAhJmAFlWRgcz03TfGnwDQ9j0kKZbmmGOXJ44pnFGL0iozaX5jLuooGrUhztcMnn1vEChdZP3u9zIBu7gjf5/DcsebvIHlGQFZaxjAinjZRfUwIvIGw/WcQMfMaV9pO+ksaKnuI2an6/rkp7Do358DyRR3uGW3eb49NGXrcnIoer34V9xDv2vij8CDAC3qzmYkAoiegAAAABJRU5ErkJggg==',
    25.       'ic07': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAcpJREFUeNrElc9LAkEUx3crKpXwVEEHDTqI0EnoPygI+hc8lMeudQ6v0VXqr7C6dTCoQ9CpLhaamJUQFF6EICo3p+/AVxi3nZnVDg18WPb9mn1v3rx1hRBOiJUGm2CZ76dgH1RsjmMhgrtgDayAlCJ7AlVg/kKZgYWC0K+Czd+WwTSIgBPw4dNNUidtWsOWSJbkEdxq9DHatIYt0Q5L0dUgaKON4Vq6aIEd9KXRj7OT7ofNIC/sKz9IBiM8l28ySAajxANdXQYHoAKO+b4FPPCqwaONQ58KY2jbdBXMg4TSJfKrZgznFONTXsQo27evJOr6VG6q05eqfnV8sTqmDV5Y7wkwB2qW4PIA6yDJ85C+z6YNLsEN5evgEFwZNrgGRyBLn+ove98hZ8Au268BEiAN6gHtWacuCR4o2wNLakz/BrJtU6BJhxKYBVF2yxk4B9sgQl2Jtk36uqYNemSVL62BDRBX9HHKaopdNiiW6RbnQJvOHkt2QRqUCdrkdHFsoyLDC9QOOIM2dRlTjDA/HIe1LSrBi5RZfUeccOsOlJX3MmXOX//JCQ68ljI+evJF/s3koGv+27i2ZdCbTW/gnTgcapIpxSZw/QgwAHNVsX6myrLIAAAAAElFTkSuQmCC',
    26.       'ic08': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAY1JREFUeNqslL1KA0EQx++SU5NDkKRQ06TTShEEC0lnoeAjWAkGsfIBfABfwLewTGEVBbEQU/nRWWohkkJBcwEV1//IrKzn7OV24x9+x97s7Mx+TqCUCjwpgS3QBs9Mm20l7ecbfAa0lF0t9vFKUAXHqYB9xhT5VHwS7BhB7sEmmGaofWf0b7sGL4IzHvwO1gSfVe4jnYbf+5RfZfAAJkACKuAt5TMKnkAMuoXATSEH0CoKPqZt3DUBSaUSSpP48fVJ4KRhE6hBNtcEiREgFA444MONdTvCZwrsgcWcKy5zewycM/vgke2voMG+n3RvD9XwohgF6e3QO3ih62SZ8S044vY6mLX40awnQf/viSiVWGZ1AurGbOpCDdKiGLG0Avr0hAEfoCEMWDbKgKmeLYHtFtHtuBbsV5ab4/wORsCcYF9IlYocL0XeIl3Pa8Zyaxln4LxFpBXQNP6bbHMuFWFGf9XSzipwvxQNSLABLo22cwLap4t/eMkdENle8hLyHIB5z4p6A3ZBR+r8EmAA1mtktn3dfuIAAAAASUVORK5CYII=',
    27.       'ic09': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAY1JREFUeNq01s8rBGEYwPF9t6m1Dkr5A6SNtAeFclJTWuHAwYG7C7n6B/gLRNxdlFi0JUpb27blx5YSTpITbQ4oUSTj++rdbUwzs7Pz7r71mbd53+mZ3n2e950VlmVFGtmidYpjYheXqjcrM3IFmrpRsP63gho3hOZPFMMWJlzm9iXdF/ShCOEyJwOf6+ag3yN4RI23GSF+kk6MYAZdPs/eIx80ke2YRQZvtmS+o+gYk+0Hc0jYgySxggMsowdD2MSDI8AdltCLVkzjBE+ql/fRv/xyaUEKz44gX/i23T9iG+NodlmlgbjqK+PysohTy7tlMY+OMPtEXm4s/zagsxGDlGlC9yzawZnPMxtIYwxGzW/wSXIJF46SPMZouUJcktzklmR7ma7iUPVJFWhSld6nI/HDKqCwlWnJrUyDiGEKR45VprGOD6+NVuthF8cgFpCq8qw8KnJhy0+oXZ6rUuK3Rsjqk8vO4tXnuJbtRfe4vkbGY05+cNYa/smsxwskE3u4Ur1ZnhON/tvyK8AAFcrqDyZtVSsAAAAASUVORK5CYII=',
    28.       'ic10': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAZdJREFUeNq0lr1Ow0AMx5MSUMWHxNadBdaKiWdgQ4iZkSfoK/AIqBPqglQegREhYKjECIpUlaULSz9IlRRKw9+SD1znehUktfRTcrZj5+7sS/w0Tb1lSmmBPQANcAuqQl9lXYN95gvNwMExSMAUNIW+yTqyHbliuIIHoJ3+SihsodC32dcax7VENbBjJgrqwlZnncc+tb8u0RqIxFu2LD4tYY/4mUysQG3cAd+fgA1huwNnoiim4B7s85h8b8A1jx/Ak5zBFYjT4iQ2ReFzH3yA1YJbYEIxzZSfxaYVIRQrpBszgwo45T3Im8jnPbgEb746Kl7AVs4E72DvJ5tIsAn6YCVngi+wDSJ9FlHpJQWsf8KxMocd7fpYjD/BBV+NPDIunzHHynRyCXRFLfdZ3xe6Q8bl0+VYmU6macWqGuSVZN1SMdonnrdEntmYnBLpD4qUoWoWT/VFYmko7TN0JRgoW0X57Fq+eNpn4ErQE/d0Qr6CstCdK3+bT8+VYKTGZcsbewt8Rq4HOjM1/D/pzJTZsn9bvgUYAJpJ9J9Po4DmAAAAAElFTkSuQmCC',
    29.       'ic11': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAaRJREFUeNrs1U8oBFEcwPGdXW0bB0l78OeiXDhIkRsXFwcc/Ek5SUq5OHDT2qscHazDii1/SnKWUjZFouxNDuIm2nUgNpYd3+G39XbN7g47e/OrTzszO+/95r15vzearuuOYobTUeQoeoKSAtqu4AkhnCNpxwhK0S7HMYwjjAVUmrYwXrJFLTjCoZx7UI9l/TtO5TytnZWOqzCHZ+kolWALq2hEH5I4QLnVBG6M4EJPj1QCP2K4wzB65X9ftgSaDNvouBW7eNN/RiqBCzXYkOv9WEICTWYJZhDFS5aOMxMYD7CGWnk3EQzhUab0q191mY5lXQnmcYJZuLGIACpwhU47Cs2PKQziFh5J9oA6uyo5Ib8upXCNPnU7EkxLge3AizheZZpuzBIEZXhx5clyRRc2MYkJXCMq07NvVsnqMm3DXp5l6kQ11uX6AAJ4R7PVQhvFZZYEPlnW91JoPfkKLddWMS/1oSbYRggN6JYCC/9mq8hkVPexksAtm1tQEp/9dbNTlaFDjo1RxWUTNObea9ZGK+CbrH5wIvgwu0n7/+jni08BBgAhQkiY9snexwAAAABJRU5ErkJggg=='
    30.     };
    31.   </script>
    32.  
    33.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    34.   <style>
    35.     html,
    36.     body {
    37.       height: 100%;
    38.       width: 100%;
    39.       margin: 0;
    40.       padding: 0;
    41.     }
    42.  
    43.     #myChart {
    44.       height: 100%;
    45.       width: 100%;
    46.       min-height: 150px;
    47.     }
    48.  
    49.     .zc-ref {
    50.       display: none;
    51.     }
    52.   </style>
    53. </head>
    54.  
    55. <body>
    56.  
    57.   <div style="padding:5px;">
    58.     <select id="n">
    59.       <option value="5">5</option>
    60.       <option value="6">6</option>
    61.       <option value="7">7</option>
    62.       <option value="8">8</option>
    63.       <option value="9">9</option>
    64.       <option value="10">10</option>
    65.       <option value="11">11</option>
    66.       <option value="12" selected="selected">12</option>
    67.     </select> elements,
    68.     <select id="a">
    69.       <option value="180">180</option>
    70.       <option value="270">270</option>
    71.       <option value="360" selected="selected">360</option>
    72.     </select> aperture, starting at
    73.     <select id="ra">
    74.       <option value="0">0</option>
    75.       <option value="45">45</option>
    76.       <option value="90">90</option>
    77.       <option value="135">135</option>
    78.       <option value="180">180</option>
    79.       <option value="225">225</option>
    80.       <option value="270" selected="selected">270</option>
    81.       <option value="315">315</option>
    82.     </select> degrees, with
    83.     <select id="an">
    84.       <option value="-1" selected="selected">no animation</option>
    85.       <option value="0">effect 0</option>
    86.       <option value="1">effect 1</option>
    87.       <option value="2">effect 2</option>
    88.       <option value="3">effect 3</option>
    89.       <option value="4">effect 4</option>
    90.     </select>,
    91.     <select id="s">
    92.       <option value="0" selected="selected">non-sequenced</option>
    93.       <option value="1">in sequence</option>
    94.     </select>
    95.     <button id="r">Render</button>
    96.   </div>
    97.  
    98.   <div id="zc"></div>
    99.  
    100.   <script>
    101.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    102.     var aPalette = [
    103.       '#F6842E', '#FBAC33', '#8AC340', '#46B863', '#41BC9F', '#29C2EC',
    104.       '#387EC3', '#5253A3', '#764199', '#962871', '#C87F8A', '#F14F42'
    105.     ];
    106.     var aIcons = [
    107.       'ic00', 'ic01', 'ic02', 'ic03', 'ic04', 'ic05',
    108.       'ic06', 'ic07', 'ic08', 'ic09', 'ic10', 'ic11'
    109.     ];
    110.     var aText = [
    111.       'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.', 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
    112.       'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.', 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
    113.       'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.', 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
    114.       'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.', 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
    115.       'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.', 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
    116.       'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.', 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.'
    117.     ];
    118.     var aTooltipText = [
    119.       'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum',
    120.       'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum'
    121.     ];
    122.  
    123.     var render = function() {
    124.  
    125.       var cdata = {
    126.         resources: [{
    127.           type: 'css',
    128.           url: 'https://fonts.googleapis.com/css?family=Exo+2'
    129.         }],
    130.         type: 'pie',
    131.         plotarea: {
    132.           margin: 0
    133.         },
    134.         scaleR: {
    135.           aperture: parseInt(a.value, 10),
    136.           refAngle: parseInt(ra.value, 10)
    137.         },
    138.         plot: {
    139.           detach: false,
    140.           borderWidth: 0,
    141.           borderColor: '#fff',
    142.           slice: '19%',
    143.           pieTransform: 'fold=60',
    144.           hoverState: {
    145.             visible: false
    146.           }
    147.         },
    148.         series: []
    149.       };
    150.  
    151.       if (an.value !== '-1') {
    152.         cdata['plot'].animation = {
    153.           speed: 200,
    154.           method: 0,
    155.           effect: parseInt(an.value, 10),
    156.           sequence: parseInt(s.value, 10)
    157.         };
    158.       }
    159.  
    160.       var items = parseInt(n.value, 10);
    161.  
    162.       for (var i = 0; i < items; i++) {
    163.         var no = i + 1;
    164.         cdata['series'].push({
    165.           values: [1],
    166.           tooltipText: aTooltipText[i],
    167.           dataNo: ((no <= 9) ? '0' + no : no),
    168.           valueBox: [{
    169.               width: 48,
    170.               height: 48,
    171.               placement: 'fixed=90%;75%',
    172.               borderRadius: 23,
    173.               borderWidth: 0,
    174.               fontSize: 6,
    175.               shadow: false,
    176.               color: '#4B4B4B',
    177.               decimals: 0,
    178.               fontFamily: '"Exo 2"',
    179.               text: '<span style="font-size:27px">%data-no</span><br><span style="font-size:9px;color:' + aPalette[i] + '">\u2002\u2002OPTION</span>'
    180.             },
    181.             {
    182.               width: 24,
    183.               height: 24,
    184.               placement: 'fixed=80%;6',
    185.               backgroundColor: 'none',
    186.               shadow: false,
    187.               backgroundImage: ICONS24[aIcons[i]],
    188.               backgroundRepeat: 'no-repeat',
    189.               text: ' '
    190.             },
    191.             {
    192.               align: 'left',
    193.               placement: 'fixed=55%;50%',
    194.               backgroundColor: 'none',
    195.               shadow: false,
    196.               fontSize: 9,
    197.               text: aText[i]
    198.             }
    199.           ],
    200.           backgroundColor: aPalette[i],
    201.           gradientColors: ['#eee', '#eee', aPalette[i], aPalette[i]].join(' '),
    202.           gradientStops: [0.001, 0.30, 0.31, 0.35, 0.36, 0.5].join(' ')
    203.         });
    204.       }
    205.  
    206.       zingchart.render({
    207.         id: 'zc',
    208.         width: 600,
    209.         height: 600,
    210.         output: 'svg',
    211.         data: cdata,
    212.         events: {
    213.           animation_end: function(p) {
    214.             if (an.value !== '-1') {
    215.               addElements(p);
    216.             }
    217.           },
    218.           load: function(p) {
    219.             if (an.value === '-1') {
    220.               addElements(p);
    221.             }
    222.           }
    223.         }
    224.       });
    225.     }
    226.  
    227.     window.addEventListener('load', function() {
    228.  
    229.       WebFont.load({
    230.         google: {
    231.           families: ['Exo 2']
    232.         },
    233.         active: function() {
    234.  
    235.           r.addEventListener('click', function() {
    236.             render();
    237.           });
    238.           render();
    239.  
    240.           var _cpoint_ = function(iX, iY, iR, iAngle) {
    241.             return [iX + iR * Math.cos(iAngle * 2 * Math.PI / 360), iY + iR * Math.sin(iAngle * 2 * Math.PI / 360)];
    242.           }
    243.  
    244.           window.addElements = function(p) {
    245.             var iPlots = zingchart.exec(p.id, 'getplotlength');
    246.             var aObjects = [],
    247.               oInfo;
    248.             for (var i = 0; i < iPlots; i++) {
    249.               oInfo = zingchart.exec(p.id, 'getobjectinfo', {
    250.                 object: 'node',
    251.                 plotindex: i,
    252.                 nodeindex: 0
    253.               });
    254.               var iSlice = oInfo.size * oInfo.slice;
    255.               var aCP = _cpoint_(oInfo.x, oInfo.y, (iSlice + oInfo.size) / 2 - 4, oInfo.angleStart);
    256.  
    257.               aObjects.push({
    258.                 id: 'sh' + i,
    259.                 anchor: 'c',
    260.                 x: aCP[0],
    261.                 y: aCP[1],
    262.                 width: (oInfo.size - iSlice) - 2,
    263.                 height: 10,
    264.                 backgroundColor: '#eee',
    265.                 angle: oInfo.angleStart,
    266.                 gradientColors: 'rgba(0,0,0,0) rgba(0,0,0,0) rgba(100,100,100,0.5) rgba(100,100,100,0.4) rgba(100,100,100,0.3) rgba(100,100,100,0.2) rgba(100,100,100,0.1) rgba(100,100,100,0)',
    267.                 gradientStops: '0.01 0.5 0.51 0.6 0.7 0.8 0.9 0.99'
    268.               });
    269.             }
    270.  
    271.             aObjects.push({
    272.               x: oInfo.x,
    273.               y: oInfo.y,
    274.               width: 1.75 * oInfo.slice * oInfo.size,
    275.               fontFamily: '"Exo 2"',
    276.               fontSize: 14,
    277.               align: 'center',
    278.               fontWeight: 600,
    279.               color: '#000',
    280.               anchor: 'c',
    281.               text: 'INFOGRAPHIC<br>TEMPLATE'
    282.             });
    283.  
    284.             zingchart.exec(p.id, 'addobject', {
    285.               type: 'label',
    286.               data: aObjects
    287.             });
    288.           };
    289.  
    290.         }
    291.  
    292.       });
    293.  
    294.     });
    295.   </script>
    296. </body>
    297.  
    298. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <style>
    8.     * {
    9.       font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans';
    10.       font-size: 12px;
    11.     }
    12.   </style>
    13.   <link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
    14.   <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
    15.  
    16.   <script>
    17.     window.ICONS24 = {
    18.       'ic00': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAa5JREFUeNrU1s8rg3EcwPFnmqmxRAkRp5lECTnJxcVNykUkJ3+Cgz9gIYflQMpBUkrKjwPJhVxcVtpNltomNIpkB5Y93t/1ffSYZ3u+mzn41Gu1Z3u+n+f57PP9PHPouq79ZZRofxyFJnBiBLsI4wLz8MrPXRhCnUaJqjCMMlEuBU74kdR/RggDWMJiuvy8+BDDjGKCCd0+XjCOHnFCtzyYwgqaba7+XCFBAnvoECe14tH0YRyzIjsqMxKIMr4qJLhFr1EiN/YtvvSBEyxgFC0ywY1CgkPjoowrE9miOU4Q5YsgKG/fLlaNBKJNK/CEtRxt6UATuuBWaOO4uZ/rsSUXKFZEzBvtGgeoLtLiKQS/3slaubChFyfC5k1rjIp3TGIaD7+8g3W8Wc0i8Rt45BwpNO6wmW3YRRGTNSw0Arj6dsRiHPThSPZ+PrEDT+Z62WZOKebyWPwUNVZrZR4ohxdTuFdcfDvb4oLYaJ0YSz8cNK0W7XLzqexWP5ZlF1oHWRrkMDuWA063mUnPCKBN5fnhMD30xUxqxCD64TPNnQRCOJMukVRpK8e//1fxKcAA7aHVBMYBzdMAAAAASUVORK5CYII=',
    19.       'ic01': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAihJREFUeNqsljssQ1EYx09Lm6jGIxavNAiDxCBWFZHYTHaTWUQsFiwSYmFhxGIWixgsRBCLSBCDR70fiXc8guj1P/U/zefm3rZRX/LL6f3ud/7/e3u+c1qPZVmKEQQdoA2UAS+I30wSHhAFR2AajIHn2B1tAKrAhPV/obUqYw9Pgynw/kexSVADwqAW7AgTlclXrAd+9bc4Advi+o5jg+L3rMOn/j980iBtIUSA4y9ND7sows5xiy9wBs55XQJKQQb4BB/sJC2WRRPdUeVmkSMJFvEB9IMy1mpCoJf33CIiu8jN4BI0C2FNEPj5uZE1SQ1OmVwEx6KoyybuZ24XzAAv6BT1x9SwqBk3eGRS8dV1HPCrkAY+jrrft8A4yAf7nNPL+xY1HbsoyvGaPS7jk+Mm6AYV4B7cOHWQDrPR5JnzwjEjSXuugGxb7tVe5HU4tCL8XAhCCQzewCxripjbo0b8ob1C2Dz1GtjnxNYEBuatW1mr56yKN/fI09QscoDXw7y+AE22hZY0scbiHEWN+CK7GeSBJebuQJ+to0LM3bJmmXNSNlDcuevMR9nXK+SUOYs15WJeygaaAjACrh12qs6Nska5GZjD7hHk8GfzxWFBq0Fd7PD6Cd1pG2DXoTZAjSeQa1zNedKQYEFTJUytK7mTFzgOguI0fhv03CG28LzcyQM8BtrBEpgDD2J/JAstmAdaQCWYpJGyH8M94DCNfxOH1Aga3W8BBgByzztIwcLIKwAAAABJRU5ErkJggg==',
    20.       'ic02': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAiZJREFUeNqMlrtrVEEUh/eKrIT4QkSE+MIUPgobBQshsJWLitpZiNYB/QusxcrSR4Ig5D9QRBQJakRtErRRMEpwjUmEBI0KgUR3Hb+B3+rJZObuHPjgnt3zuOfMmZlbOOcqGbIBLsJp6XfgGvzo5Li6kieHoQ6HpC/CKDzq5FhEKvBJL8BxeAEP4B5sCexm4QQcgyNwH65Dc5mVT2CowoD7Lzdg0KXlpmzaMqgY/2KuCt5qL5w3+nv1PyWb4YPRz8E+axAmWAtdRu+BryUJZmXTli7FSCZowLjRT8Ez+BIJPgNP4WRQcaNsDTw1GFNPF6EOfTBiej2i3+qycfKphfGKxD7YDlvhO0zCkqZoj/4fV3vWwA7YCFOxSm0CP5Y1OKBentH49cFO2ATbZOuDfYNPauFzuArTMLxsf5hyXpsW/IR+ly/edkHP86kxfRUsfveKBYtLQ7bOLHR0iibMcxXWq+RO4qdpnXza7Ysm+Agtc1zkJpjSZmyfa9OpBO9MmYXKnsmsoFs+pQnewGWNZEXj5/v7pyT4ksZ4l/QxHYzJjebHdkjT8BsewxVoRCbnM9yCYekT0BNutNhOvhQE2g9HIwnOwqjRn0RirTiLKmYa7P0wGbHzve7tdHnFEhQRvZp4kWaJXzJBK9BTi+wC21bunXxbb3cQ7sJbnUmh/NIF0w/zMBB/jcjCRNgNL7WYTR3XvTm+uV8Vc/BQG2pBHwJzOY5/BRgAmXVVm/eVlGQAAAAASUVORK5CYII=',
    21.       'ic03': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAYdJREFUeNq01r8vA2EYwHGnR+oqYehkaLSL1MwiwtaaTAz+AJNRIiIG4k9gN4ihs0Fil0g0wdShugibBAlSone+bzzkVXdvr+fuTT5J37u+z3P3/jzL87yeJEtvh/vDGNXqxziKM8E8KvJbJZrGg3Y/g4GoCVTDEvJaskFsSn0GN3I9UoIheeJDqZ/gDOtwJHkLp8Y+UIMcwEIRV9iWa2PeV1lGBhuoIR8Ux/QGanqlMI60XHvSBv8FWRTQF+UNlBK2tPoB7pGT+g5mTTEsWQfpgPF41QbcwhSeUUW/dt/xaeui+Z2ghlyIaW0K2F7UDCvaWoMwjZwu1pijT1M3gV3CDbOSY9uLrARiW3qCtwQSvOsJrmVhxVVUrLqeYB+NGBM0JObPSk5hAU3v/0XFWJSYf7aKMqpoRQjckrZlv62i/RSbwyRW5MC5MHTHEkawJife46+pZDiTC9KX57g1JJiQVZvtdjdVO+ZlyO6pwPaLYxue7A67WO1w7qr/7eHDd7Ul/dnyKcAAolbc3Fnck80AAAAASUVORK5CYII=',
    22.       'ic04': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAeRJREFUeNq01b1LW1EYx/F7Nba+lUIHlTo6KCJI6wuC0cnJRfwTnERwcHAqLqJYl7oUcdMl7h0KRWgpii5K9A/QKg6F+hYctKKGHL+H/gLHq7cxN/GBD7mce3KenOe8xDfGvPU87w3+oAFl3v24QgcW8FdtlRjBFioC/W/xC3VIeSRImn/RjyNTeBxpLBvJGFn2UavsF/BhvGjhawwbv+3YPllKeIhpajVoQzpiAjtOEscqddqWyBUvQoni7pixkF8yhA0tpht2kbux9NQplXjPHGEzWCpWglwzMCrLIGZwXqwZeFqDD5jEOr5gBd9xgG28VN+0tnrvUxPsYABnuHFmuoZFNOMnqtV+jaZ8Esxp8Ozhsecjo3J9wzDihZTo0Hne1T10iVL0YRmf8TpwX316uIqPH7SxQHtWB27zOWhhu2gcLYG2V5jVrBPokkSUEtXjh8qwikaMolXvB1WqbOJI29Qu7FTIuyrJfb3aOjlh/yTeF3ib2i1+qtv5XgJ7sZ3o0xRwO/g6mD3BEtmMH/HCSZDR9syoJGVO30sdwKrAlWO/vxe2TYOqMY+vaHfa29U2rz6hY+RKMKG9vYlyp71cbUZ9IiV4hxSu0fnI+069S6lv3gkS+oXT/+kzrT6JsD53AgwA/0uN0qJpovcAAAAASUVORK5CYII=',
    23.       'ic05': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAhhJREFUeNq01U1IFGEcx/HZXFFLMVCThMpQrIsk5CW1EKHL4qVOUdCl6OxBIQnsJB68hDcPhicVIr148SCegry560JedKHAMrRLrq5aTt9HfmOP68yw6vrAh3l75vk/L/95JuK6rkPpxBO0OvkpnzCB6ahutOMBruUpQAF+mAARjWAVV538lu+ouaCLXSf/5aBNL4B7DgEO2oyGVJjBTTRk3d/HTkinTKeL/4dhDZByj5YM6tCL3axnX1Cq9/zcVb0Ncx31GdY4prCMYcTxEF2qU4U+bAaM4IaOO/YUFej4Ec/xF69wEfNYsRqoQE8Oa7BtByiyApjGn6n3fglgXkxgL6DhMtxBob0Gq5q317quxBt8do+XZMj8G/Wq98tcex9aCrX4qbmeUM9Nb1rwFvesESyGfDvlaMQ3XA/KogS6Ua3nt61R5lqW/bLIK6YHg+r9Y2VUXNvJOkawFfCu2c9eosRe5EIdp7TIt/AVY1Zq1ul8A/34HRCgWQGK7EVe17BafRbNfHCj1tD3sYV0gIzqpewp2tZxAEnthO8Q01TZ23jEG/5J9iIvp++Lo0yJhfwjzFS+wELW/SaMotQOEPFp4EPA/eyNLfReWIBoDn+t9yHP03a0P1jDkq6Xzni+pik8/JLnMKkcN6n5VJVPe16JR+jwUrENl3EFQ9qLKk55btooR4udpnF9OJcw683fGc7TykLnnwADABWSG+pH1Il8AAAAAElFTkSuQmCC',
    24.       'ic06': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAe9JREFUeNrU1s9rE0EUwPFsaJNogrQllaQqYooXoQbsrVhTD6VQ/wBPngTxpBcRG1AIivRo/wAvnuylUGgltBDPBgsiPeilJUVEo0KChESrWb8PX2QYk3QDm0MHPtDOzM6bH29247iuG+hnCQb6XPwKEMV9jP7XIlvkgyMo4xnCZptfAWTQXfdveY5Yq22ARcRwATmE8VsXF0ER9/DdWngaDzCGX7rVSW27qs9exzeJkkLO7VzWzBnhHPbcg8tLZCVyU46iywFewRJktSH9+5SHg0/ghMwoihndwx+oqTqaOptXOvvH1iwbRv+mUf8WZ+GYBxXCURVBHA9RwUXM64Ctsq3bO4gRfNX61xjvJYvO62zeG4P/1IBmmkpdESd7TVMHq9bWPGmTpjftwb0GWLAGl/09bvUZ1G2M9hrgMqrG4JIElzCHtLVFX7CCY50CmIcsM5rFjjX7LE7jE/JI6nPDKGmfAhJmAFlWRgcz03TfGnwDQ9j0kKZbmmGOXJ44pnFGL0iozaX5jLuooGrUhztcMnn1vEChdZP3u9zIBu7gjf5/DcsebvIHlGQFZaxjAinjZRfUwIvIGw/WcQMfMaV9pO+ksaKnuI2an6/rkp7Do358DyRR3uGW3eb49NGXrcnIoer34V9xDv2vij8CDAC3qzmYkAoiegAAAABJRU5ErkJggg==',
    25.       'ic07': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAcpJREFUeNrElc9LAkEUx3crKpXwVEEHDTqI0EnoPygI+hc8lMeudQ6v0VXqr7C6dTCoQ9CpLhaamJUQFF6EICo3p+/AVxi3nZnVDg18WPb9mn1v3rx1hRBOiJUGm2CZ76dgH1RsjmMhgrtgDayAlCJ7AlVg/kKZgYWC0K+Czd+WwTSIgBPw4dNNUidtWsOWSJbkEdxq9DHatIYt0Q5L0dUgaKON4Vq6aIEd9KXRj7OT7ofNIC/sKz9IBiM8l28ySAajxANdXQYHoAKO+b4FPPCqwaONQ58KY2jbdBXMg4TSJfKrZgznFONTXsQo27evJOr6VG6q05eqfnV8sTqmDV5Y7wkwB2qW4PIA6yDJ85C+z6YNLsEN5evgEFwZNrgGRyBLn+ove98hZ8Au268BEiAN6gHtWacuCR4o2wNLakz/BrJtU6BJhxKYBVF2yxk4B9sgQl2Jtk36uqYNemSVL62BDRBX9HHKaopdNiiW6RbnQJvOHkt2QRqUCdrkdHFsoyLDC9QOOIM2dRlTjDA/HIe1LSrBi5RZfUeccOsOlJX3MmXOX//JCQ68ljI+evJF/s3koGv+27i2ZdCbTW/gnTgcapIpxSZw/QgwAHNVsX6myrLIAAAAAElFTkSuQmCC',
    26.       'ic08': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAY1JREFUeNqslL1KA0EQx++SU5NDkKRQ06TTShEEC0lnoeAjWAkGsfIBfABfwLewTGEVBbEQU/nRWWohkkJBcwEV1//IrKzn7OV24x9+x97s7Mx+TqCUCjwpgS3QBs9Mm20l7ecbfAa0lF0t9vFKUAXHqYB9xhT5VHwS7BhB7sEmmGaofWf0b7sGL4IzHvwO1gSfVe4jnYbf+5RfZfAAJkACKuAt5TMKnkAMuoXATSEH0CoKPqZt3DUBSaUSSpP48fVJ4KRhE6hBNtcEiREgFA444MONdTvCZwrsgcWcKy5zewycM/vgke2voMG+n3RvD9XwohgF6e3QO3ih62SZ8S044vY6mLX40awnQf/viSiVWGZ1AurGbOpCDdKiGLG0Avr0hAEfoCEMWDbKgKmeLYHtFtHtuBbsV5ab4/wORsCcYF9IlYocL0XeIl3Pa8Zyaxln4LxFpBXQNP6bbHMuFWFGf9XSzipwvxQNSLABLo22cwLap4t/eMkdENle8hLyHIB5z4p6A3ZBR+r8EmAA1mtktn3dfuIAAAAASUVORK5CYII=',
    27.       'ic09': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAY1JREFUeNq01s8rBGEYwPF9t6m1Dkr5A6SNtAeFclJTWuHAwYG7C7n6B/gLRNxdlFi0JUpb27blx5YSTpITbQ4oUSTj++rdbUwzs7Pz7r71mbd53+mZ3n2e950VlmVFGtmidYpjYheXqjcrM3IFmrpRsP63gho3hOZPFMMWJlzm9iXdF/ShCOEyJwOf6+ag3yN4RI23GSF+kk6MYAZdPs/eIx80ke2YRQZvtmS+o+gYk+0Hc0jYgySxggMsowdD2MSDI8AdltCLVkzjBE+ql/fRv/xyaUEKz44gX/i23T9iG+NodlmlgbjqK+PysohTy7tlMY+OMPtEXm4s/zagsxGDlGlC9yzawZnPMxtIYwxGzW/wSXIJF46SPMZouUJcktzklmR7ma7iUPVJFWhSld6nI/HDKqCwlWnJrUyDiGEKR45VprGOD6+NVuthF8cgFpCq8qw8KnJhy0+oXZ6rUuK3Rsjqk8vO4tXnuJbtRfe4vkbGY05+cNYa/smsxwskE3u4Ur1ZnhON/tvyK8AAFcrqDyZtVSsAAAAASUVORK5CYII=',
    28.       'ic10': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAZdJREFUeNq0lr1Ow0AMx5MSUMWHxNadBdaKiWdgQ4iZkSfoK/AIqBPqglQegREhYKjECIpUlaULSz9IlRRKw9+SD1znehUktfRTcrZj5+7sS/w0Tb1lSmmBPQANcAuqQl9lXYN95gvNwMExSMAUNIW+yTqyHbliuIIHoJ3+SihsodC32dcax7VENbBjJgrqwlZnncc+tb8u0RqIxFu2LD4tYY/4mUysQG3cAd+fgA1huwNnoiim4B7s85h8b8A1jx/Ak5zBFYjT4iQ2ReFzH3yA1YJbYEIxzZSfxaYVIRQrpBszgwo45T3Im8jnPbgEb746Kl7AVs4E72DvJ5tIsAn6YCVngi+wDSJ9FlHpJQWsf8KxMocd7fpYjD/BBV+NPDIunzHHynRyCXRFLfdZ3xe6Q8bl0+VYmU6macWqGuSVZN1SMdonnrdEntmYnBLpD4qUoWoWT/VFYmko7TN0JRgoW0X57Fq+eNpn4ErQE/d0Qr6CstCdK3+bT8+VYKTGZcsbewt8Rq4HOjM1/D/pzJTZsn9bvgUYAJpJ9J9Po4DmAAAAAElFTkSuQmCC',
    29.       'ic11': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAaRJREFUeNrs1U8oBFEcwPGdXW0bB0l78OeiXDhIkRsXFwcc/Ek5SUq5OHDT2qscHazDii1/SnKWUjZFouxNDuIm2nUgNpYd3+G39XbN7g47e/OrTzszO+/95r15vzearuuOYobTUeQoeoKSAtqu4AkhnCNpxwhK0S7HMYwjjAVUmrYwXrJFLTjCoZx7UI9l/TtO5TytnZWOqzCHZ+kolWALq2hEH5I4QLnVBG6M4EJPj1QCP2K4wzB65X9ftgSaDNvouBW7eNN/RiqBCzXYkOv9WEICTWYJZhDFS5aOMxMYD7CGWnk3EQzhUab0q191mY5lXQnmcYJZuLGIACpwhU47Cs2PKQziFh5J9oA6uyo5Ib8upXCNPnU7EkxLge3AizheZZpuzBIEZXhx5clyRRc2MYkJXCMq07NvVsnqMm3DXp5l6kQ11uX6AAJ4R7PVQhvFZZYEPlnW91JoPfkKLddWMS/1oSbYRggN6JYCC/9mq8hkVPexksAtm1tQEp/9dbNTlaFDjo1RxWUTNObea9ZGK+CbrH5wIvgwu0n7/+jni08BBgAhQkiY9snexwAAAABJRU5ErkJggg=='
    30.     };
    31.   </script>
    32.  
    33.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    34. </head>
    35.  
    36. <body>
    37.  
    38.   <div style="padding:5px;">
    39.     <select id="n">
    40.       <option value="5">5</option>
    41.       <option value="6">6</option>
    42.       <option value="7">7</option>
    43.       <option value="8">8</option>
    44.       <option value="9">9</option>
    45.       <option value="10">10</option>
    46.       <option value="11">11</option>
    47.       <option value="12" selected="selected">12</option>
    48.     </select> elements,
    49.     <select id="a">
    50.       <option value="180">180</option>
    51.       <option value="270">270</option>
    52.       <option value="360" selected="selected">360</option>
    53.     </select> aperture, starting at
    54.     <select id="ra">
    55.       <option value="0">0</option>
    56.       <option value="45">45</option>
    57.       <option value="90">90</option>
    58.       <option value="135">135</option>
    59.       <option value="180">180</option>
    60.       <option value="225">225</option>
    61.       <option value="270" selected="selected">270</option>
    62.       <option value="315">315</option>
    63.     </select> degrees, with
    64.     <select id="an">
    65.       <option value="-1" selected="selected">no animation</option>
    66.       <option value="0">effect 0</option>
    67.       <option value="1">effect 1</option>
    68.       <option value="2">effect 2</option>
    69.       <option value="3">effect 3</option>
    70.       <option value="4">effect 4</option>
    71.     </select>,
    72.     <select id="s">
    73.       <option value="0" selected="selected">non-sequenced</option>
    74.       <option value="1">in sequence</option>
    75.     </select>
    76.     <button id="r">Render</button>
    77.   </div>
    78.  
    79.   <div id="zc"></div>
    80.  
    81. </body>
    82.  
    83. </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 aPalette = [
    2.   '#F6842E', '#FBAC33', '#8AC340', '#46B863', '#41BC9F', '#29C2EC',
    3.   '#387EC3', '#5253A3', '#764199', '#962871', '#C87F8A', '#F14F42'
    4. ];
    5. var aIcons = [
    6.   'ic00', 'ic01', 'ic02', 'ic03', 'ic04', 'ic05',
    7.   'ic06', 'ic07', 'ic08', 'ic09', 'ic10', 'ic11'
    8. ];
    9. var aText = [
    10.   'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.', 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
    11.   'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.', 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
    12.   'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.', 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
    13.   'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.', 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
    14.   'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.', 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
    15.   'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.', 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.'
    16. ];
    17. var aTooltipText = [
    18.   'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum',
    19.   'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum'
    20. ];
    21.  
    22. var render = function() {
    23.  
    24.   var cdata = {
    25.     resources: [{
    26.       type: 'css',
    27.       url: 'https://fonts.googleapis.com/css?family=Exo+2'
    28.     }],
    29.     type: 'pie',
    30.     plotarea: {
    31.       margin: 0
    32.     },
    33.     scaleR: {
    34.       aperture: parseInt(a.value, 10),
    35.       refAngle: parseInt(ra.value, 10)
    36.     },
    37.     plot: {
    38.       detach: false,
    39.       borderWidth: 0,
    40.       borderColor: '#fff',
    41.       slice: '19%',
    42.       pieTransform: 'fold=60',
    43.       hoverState: {
    44.         visible: false
    45.       }
    46.     },
    47.     series: []
    48.   };
    49.  
    50.   if (an.value !== '-1') {
    51.     cdata['plot'].animation = {
    52.       speed: 200,
    53.       method: 0,
    54.       effect: parseInt(an.value, 10),
    55.       sequence: parseInt(s.value, 10)
    56.     };
    57.   }
    58.  
    59.   var items = parseInt(n.value, 10);
    60.  
    61.   for (var i = 0; i < items; i++) {
    62.     var no = i + 1;
    63.     cdata['series'].push({
    64.       values: [1],
    65.       tooltipText: aTooltipText[i],
    66.       dataNo: ((no <= 9) ? '0' + no : no),
    67.       valueBox: [{
    68.           width: 48,
    69.           height: 48,
    70.           placement: 'fixed=90%;75%',
    71.           borderRadius: 23,
    72.           borderWidth: 0,
    73.           fontSize: 6,
    74.           shadow: false,
    75.           color: '#4B4B4B',
    76.           decimals: 0,
    77.           fontFamily: '"Exo 2"',
    78.           text: '<span style="font-size:27px">%data-no</span><br><span style="font-size:9px;color:' + aPalette[i] + '">\u2002\u2002OPTION</span>'
    79.         },
    80.         {
    81.           width: 24,
    82.           height: 24,
    83.           placement: 'fixed=80%;6',
    84.           backgroundColor: 'none',
    85.           shadow: false,
    86.           backgroundImage: ICONS24[aIcons[i]],
    87.           backgroundRepeat: 'no-repeat',
    88.           text: ' '
    89.         },
    90.         {
    91.           align: 'left',
    92.           placement: 'fixed=55%;50%',
    93.           backgroundColor: 'none',
    94.           shadow: false,
    95.           fontSize: 9,
    96.           text: aText[i]
    97.         }
    98.       ],
    99.       backgroundColor: aPalette[i],
    100.       gradientColors: ['#eee', '#eee', aPalette[i], aPalette[i]].join(' '),
    101.       gradientStops: [0.001, 0.30, 0.31, 0.35, 0.36, 0.5].join(' ')
    102.     });
    103.   }
    104.  
    105.   zingchart.render({
    106.     id: 'zc',
    107.     width: 600,
    108.     height: 600,
    109.     output: 'svg',
    110.     data: cdata,
    111.     events: {
    112.       animation_end: function(p) {
    113.         if (an.value !== '-1') {
    114.           addElements(p);
    115.         }
    116.       },
    117.       load: function(p) {
    118.         if (an.value === '-1') {
    119.           addElements(p);
    120.         }
    121.       }
    122.     }
    123.   });
    124. }
    125.  
    126. window.addEventListener('load', function() {
    127.  
    128.   WebFont.load({
    129.     google: {
    130.       families: ['Exo 2']
    131.     },
    132.     active: function() {
    133.  
    134.       r.addEventListener('click', function() {
    135.         render();
    136.       });
    137.       render();
    138.  
    139.       var _cpoint_ = function(iX, iY, iR, iAngle) {
    140.         return [iX + iR * Math.cos(iAngle * 2 * Math.PI / 360), iY + iR * Math.sin(iAngle * 2 * Math.PI / 360)];
    141.       }
    142.  
    143.       window.addElements = function(p) {
    144.         var iPlots = zingchart.exec(p.id, 'getplotlength');
    145.         var aObjects = [],
    146.           oInfo;
    147.         for (var i = 0; i < iPlots; i++) {
    148.           oInfo = zingchart.exec(p.id, 'getobjectinfo', {
    149.             object: 'node',
    150.             plotindex: i,
    151.             nodeindex: 0
    152.           });
    153.           var iSlice = oInfo.size * oInfo.slice;
    154.           var aCP = _cpoint_(oInfo.x, oInfo.y, (iSlice + oInfo.size) / 2 - 4, oInfo.angleStart);
    155.  
    156.           aObjects.push({
    157.             id: 'sh' + i,
    158.             anchor: 'c',
    159.             x: aCP[0],
    160.             y: aCP[1],
    161.             width: (oInfo.size - iSlice) - 2,
    162.             height: 10,
    163.             backgroundColor: '#eee',
    164.             angle: oInfo.angleStart,
    165.             gradientColors: 'rgba(0,0,0,0) rgba(0,0,0,0) rgba(100,100,100,0.5) rgba(100,100,100,0.4) rgba(100,100,100,0.3) rgba(100,100,100,0.2) rgba(100,100,100,0.1) rgba(100,100,100,0)',
    166.             gradientStops: '0.01 0.5 0.51 0.6 0.7 0.8 0.9 0.99'
    167.           });
    168.         }
    169.  
    170.         aObjects.push({
    171.           x: oInfo.x,
    172.           y: oInfo.y,
    173.           width: 1.75 * oInfo.slice * oInfo.size,
    174.           fontFamily: '"Exo 2"',
    175.           fontSize: 14,
    176.           align: 'center',
    177.           fontWeight: 600,
    178.           color: '#000',
    179.           anchor: 'c',
    180.           text: 'INFOGRAPHIC<br>TEMPLATE'
    181.         });
    182.  
    183.         zingchart.exec(p.id, 'addobject', {
    184.           type: 'label',
    185.           data: aObjects
    186.         });
    187.       };
    188.  
    189.     }
    190.  
    191.   });
    192.  
    193. });