• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
        <style>
            * {
                font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans';
                font-size: 12px;
            }
        </style>
        <link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
        <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
    
        <script>
            window.ICONS24 = {
                'ic00': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAa5JREFUeNrU1s8rg3EcwPFnmqmxRAkRp5lECTnJxcVNykUkJ3+Cgz9gIYflQMpBUkrKjwPJhVxcVtpNltomNIpkB5Y93t/1ffSYZ3u+mzn41Gu1Z3u+n+f57PP9PHPouq79ZZRofxyFJnBiBLsI4wLz8MrPXRhCnUaJqjCMMlEuBU74kdR/RggDWMJiuvy8+BDDjGKCCd0+XjCOHnFCtzyYwgqaba7+XCFBAnvoECe14tH0YRyzIjsqMxKIMr4qJLhFr1EiN/YtvvSBEyxgFC0ywY1CgkPjoowrE9miOU4Q5YsgKG/fLlaNBKJNK/CEtRxt6UATuuBWaOO4uZ/rsSUXKFZEzBvtGgeoLtLiKQS/3slaubChFyfC5k1rjIp3TGIaD7+8g3W8Wc0i8Rt45BwpNO6wmW3YRRGTNSw0Arj6dsRiHPThSPZ+PrEDT+Z62WZOKebyWPwUNVZrZR4ohxdTuFdcfDvb4oLYaJ0YSz8cNK0W7XLzqexWP5ZlF1oHWRrkMDuWA063mUnPCKBN5fnhMD30xUxqxCD64TPNnQRCOJMukVRpK8e//1fxKcAA7aHVBMYBzdMAAAAASUVORK5CYII=',
                '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==',
                '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=',
                '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=',
                '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=',
                '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',
                'ic06': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAe9JREFUeNrU1s9rE0EUwPFsaJNogrQllaQqYooXoQbsrVhTD6VQ/wBPngTxpBcRG1AIivRo/wAvnuylUGgltBDPBgsiPeilJUVEo0KChESrWb8PX2QYk3QDm0MHPtDOzM6bH29247iuG+hnCQb6XPwKEMV9jP7XIlvkgyMo4xnCZptfAWTQXfdveY5Yq22ARcRwATmE8VsXF0ER9/DdWngaDzCGX7rVSW27qs9exzeJkkLO7VzWzBnhHPbcg8tLZCVyU46iywFewRJktSH9+5SHg0/ghMwoihndwx+oqTqaOptXOvvH1iwbRv+mUf8WZ+GYBxXCURVBHA9RwUXM64Ctsq3bO4gRfNX61xjvJYvO62zeG4P/1IBmmkpdESd7TVMHq9bWPGmTpjftwb0GWLAGl/09bvUZ1G2M9hrgMqrG4JIElzCHtLVFX7CCY50CmIcsM5rFjjX7LE7jE/JI6nPDKGmfAhJmAFlWRgcz03TfGnwDQ9j0kKZbmmGOXJ44pnFGL0iozaX5jLuooGrUhztcMnn1vEChdZP3u9zIBu7gjf5/DcsebvIHlGQFZaxjAinjZRfUwIvIGw/WcQMfMaV9pO+ksaKnuI2an6/rkp7Do358DyRR3uGW3eb49NGXrcnIoer34V9xDv2vij8CDAC3qzmYkAoiegAAAABJRU5ErkJggg==',
                'ic07': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAcpJREFUeNrElc9LAkEUx3crKpXwVEEHDTqI0EnoPygI+hc8lMeudQ6v0VXqr7C6dTCoQ9CpLhaamJUQFF6EICo3p+/AVxi3nZnVDg18WPb9mn1v3rx1hRBOiJUGm2CZ76dgH1RsjmMhgrtgDayAlCJ7AlVg/kKZgYWC0K+Czd+WwTSIgBPw4dNNUidtWsOWSJbkEdxq9DHatIYt0Q5L0dUgaKON4Vq6aIEd9KXRj7OT7ofNIC/sKz9IBiM8l28ySAajxANdXQYHoAKO+b4FPPCqwaONQ58KY2jbdBXMg4TSJfKrZgznFONTXsQo27evJOr6VG6q05eqfnV8sTqmDV5Y7wkwB2qW4PIA6yDJ85C+z6YNLsEN5evgEFwZNrgGRyBLn+ove98hZ8Au268BEiAN6gHtWacuCR4o2wNLakz/BrJtU6BJhxKYBVF2yxk4B9sgQl2Jtk36uqYNemSVL62BDRBX9HHKaopdNiiW6RbnQJvOHkt2QRqUCdrkdHFsoyLDC9QOOIM2dRlTjDA/HIe1LSrBi5RZfUeccOsOlJX3MmXOX//JCQ68ljI+evJF/s3koGv+27i2ZdCbTW/gnTgcapIpxSZw/QgwAHNVsX6myrLIAAAAAElFTkSuQmCC',
                'ic08': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAY1JREFUeNqslL1KA0EQx++SU5NDkKRQ06TTShEEC0lnoeAjWAkGsfIBfABfwLewTGEVBbEQU/nRWWohkkJBcwEV1//IrKzn7OV24x9+x97s7Mx+TqCUCjwpgS3QBs9Mm20l7ecbfAa0lF0t9vFKUAXHqYB9xhT5VHwS7BhB7sEmmGaofWf0b7sGL4IzHvwO1gSfVe4jnYbf+5RfZfAAJkACKuAt5TMKnkAMuoXATSEH0CoKPqZt3DUBSaUSSpP48fVJ4KRhE6hBNtcEiREgFA444MONdTvCZwrsgcWcKy5zewycM/vgke2voMG+n3RvD9XwohgF6e3QO3ih62SZ8S044vY6mLX40awnQf/viSiVWGZ1AurGbOpCDdKiGLG0Avr0hAEfoCEMWDbKgKmeLYHtFtHtuBbsV5ab4/wORsCcYF9IlYocL0XeIl3Pa8Zyaxln4LxFpBXQNP6bbHMuFWFGf9XSzipwvxQNSLABLo22cwLap4t/eMkdENle8hLyHIB5z4p6A3ZBR+r8EmAA1mtktn3dfuIAAAAASUVORK5CYII=',
                '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=',
                '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',
                'ic11': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAaRJREFUeNrs1U8oBFEcwPGdXW0bB0l78OeiXDhIkRsXFwcc/Ek5SUq5OHDT2qscHazDii1/SnKWUjZFouxNDuIm2nUgNpYd3+G39XbN7g47e/OrTzszO+/95r15vzearuuOYobTUeQoeoKSAtqu4AkhnCNpxwhK0S7HMYwjjAVUmrYwXrJFLTjCoZx7UI9l/TtO5TytnZWOqzCHZ+kolWALq2hEH5I4QLnVBG6M4EJPj1QCP2K4wzB65X9ftgSaDNvouBW7eNN/RiqBCzXYkOv9WEICTWYJZhDFS5aOMxMYD7CGWnk3EQzhUab0q191mY5lXQnmcYJZuLGIACpwhU47Cs2PKQziFh5J9oA6uyo5Ib8upXCNPnU7EkxLge3AizheZZpuzBIEZXhx5clyRRc2MYkJXCMq07NvVsnqMm3DXp5l6kQ11uX6AAJ4R7PVQhvFZZYEPlnW91JoPfkKLddWMS/1oSbYRggN6JYCC/9mq8hkVPexksAtm1tQEp/9dbNTlaFDjo1RxWUTNObea9ZGK+CbrH5wIvgwu0n7/+jni08BBgAhQkiY9snexwAAAABJRU5ErkJggg=='
            };
        </script>
    
        <script 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;
            }
    
            zing-grid[loading] {
                height: 500px;
            }
        </style>
    </head>
    
    <body>
    
        <div style="padding:5px;">
            <select id="n">
                <option value="3">3</option>
                <option value="4" selected="selected">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
            </select> elements,
            <select id="a">
                <option value="180">180</option>
                <option value="270">270</option>
                <option value="360" selected="selected">360</option>
            </select> aperture, starting at
            <select id="ra">
                <option value="0">0</option>
                <option value="45">45</option>
                <option value="90">90</option>
                <option value="135">135</option>
                <option value="180" selected="selected">180</option>
                <option value="225">225</option>
                <option value="270">270</option>
                <option value="315">315</option>
            </select> degrees, with
            <select id="an">
                <option value="-1" selected="selected">no animation</option>
                <option value="0">effect 0</option>
                <option value="1">effect 1</option>
                <option value="2">effect 2</option>
                <option value="3">effect 3</option>
                <option value="4">effect 4</option>
            </select>,
            <select id="s">
                <option value="0" selected="selected">non-sequenced</option>
                <option value="1">in sequence</option>
            </select>
            <button id="r">Render</button>
        </div>
    
        <div id="zc"></div>
    
        <script>
            ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
            var aPalette = ['#F78022', '#00ADD5', '#606C7A', '#61BB49', '#A7CD3A', '#F15942'];
            var aIcons = ['ic00', 'ic01', 'ic07', 'ic03', 'ic04', 'ic02'];
    
            var aText = [
                'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
                'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
                'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
                'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
                'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
                'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.'
            ];
            var aTooltipText = ['Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum'];
    
            var render = function() {
    
                var cdata = {
                    resources: [{
                        type: 'css',
                        url: 'https://fonts.googleapis.com/css?family=Exo+2'
                    }],
                    type: 'pie',
    
                    plotarea: {
                        margin: 10
                    },
    
                    scaleR: {
                        aperture: parseInt(a.value, 10),
                        refAngle: parseInt(ra.value, 10)
                    },
    
                    scale: {
                        sizeFactor: 0.75
                    },
    
                    plot: {
                        detach: false,
                        borderWidth: 8,
                        borderColor: '#FFF',
                        slice: '0%',
                        pieTransform: 'droplet',
                        hoverState: {
                            visible: false
                        }
                    },
                    series: []
                };
    
                if (an.value !== '-1') {
                    cdata['plot'].animation = {
                        speed: 200,
                        method: 0,
                        effect: parseInt(an.value, 10),
                        sequence: parseInt(s.value, 10)
                    };
                }
    
                var items = parseInt(n.value, 10);
    
                for (var i = 0; i < items; i++) {
                    var no = i + 1;
    
                    cdata['series'].push({
                        values: [1],
                        tooltipText: aTooltipText[i],
                        dataNo: ((no <= 9) ? '0' + no : no),
                        valueBox: [{
                                placement: 'fixed=25%;50%',
                                fontSize: 6,
                                shadow: false,
                                color: '#FFF',
                                decimals: 0,
                                fontFamily: '"Exo 2"',
                                text: '<span style="font-size:23px">%data-no</span>'
                            },
                            {
                                width: 24,
                                height: 24,
                                placement: 'fixed=95%;50%',
                                backgroundColor: 'none',
                                shadow: false,
                                backgroundImage: ICONS24[aIcons[i]],
                                backgroundRepeat: 'no-repeat',
                                text: ' '
                            },
                            {
                                align: 'left',
                                placement: 'fixed=60%;50%',
                                backgroundColor: 'none',
                                shadow: false,
                                fontSize: 10,
                                text: aText[i]
                            }
                        ],
                        backgroundColor: aPalette[i]
                    });
                }
    
                zingchart.render({
                    id: 'zc',
                    width: 500,
                    height: 500,
                    output: 'svg',
                    data: cdata,
                    events: {
                        animation_end: function(p) {
                            if (an.value !== '-1') {
                                addElements(p);
                            }
                        },
                        load: function(p) {
                            if (an.value === '-1') {
                                addElements(p);
                            }
                        }
                    }
                });
            }
    
            window.addEventListener('load', function() {
    
                WebFont.load({
                    google: {
                        families: ['Exo 2']
                    },
                    active: function() {
    
                        r.addEventListener('click', function() {
                            render();
                        });
                        render();
    
                        window.addElements = function(p) {
                            var iPlots = zingchart.exec(p.id, 'getplotlength');
                            var aObjects = [],
                                oInfo;
    
                            for (var i = 0; i < iPlots; i++) {
                                oInfo = zingchart.exec(p.id, 'getobjectinfo', {
                                    object: 'node',
                                    plotindex: i,
                                    nodeindex: 0
                                });
                            }
    
                            zingchart.exec(p.id, 'addobject', {
                                type: 'label',
                                data: aObjects
                            });
                        };
    
                    }
    
                });
    
            });
        </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    	<head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
    		<style>
    	  * { 
    	    font-family:'Lucida Sans Unicode','Lucida Grande','Lucida Sans';
    	    font-size:12px;
    	  }
    	</style>
    	<link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
    
    	<script>
    
    window.ICONS24 = {
    	'ic00' : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAa5JREFUeNrU1s8rg3EcwPFnmqmxRAkRp5lECTnJxcVNykUkJ3+Cgz9gIYflQMpBUkrKjwPJhVxcVtpNltomNIpkB5Y93t/1ffSYZ3u+mzn41Gu1Z3u+n+f57PP9PHPouq79ZZRofxyFJnBiBLsI4wLz8MrPXRhCnUaJqjCMMlEuBU74kdR/RggDWMJiuvy8+BDDjGKCCd0+XjCOHnFCtzyYwgqaba7+XCFBAnvoECe14tH0YRyzIjsqMxKIMr4qJLhFr1EiN/YtvvSBEyxgFC0ywY1CgkPjoowrE9miOU4Q5YsgKG/fLlaNBKJNK/CEtRxt6UATuuBWaOO4uZ/rsSUXKFZEzBvtGgeoLtLiKQS/3slaubChFyfC5k1rjIp3TGIaD7+8g3W8Wc0i8Rt45BwpNO6wmW3YRRGTNSw0Arj6dsRiHPThSPZ+PrEDT+Z62WZOKebyWPwUNVZrZR4ohxdTuFdcfDvb4oLYaJ0YSz8cNK0W7XLzqexWP5ZlF1oHWRrkMDuWA063mUnPCKBN5fnhMD30xUxqxCD64TPNnQRCOJMukVRpK8e//1fxKcAA7aHVBMYBzdMAAAAASUVORK5CYII=',
    	'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==',
    	'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=',
    	'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=',
    	'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=',
    	'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',
    	'ic06' : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAe9JREFUeNrU1s9rE0EUwPFsaJNogrQllaQqYooXoQbsrVhTD6VQ/wBPngTxpBcRG1AIivRo/wAvnuylUGgltBDPBgsiPeilJUVEo0KChESrWb8PX2QYk3QDm0MHPtDOzM6bH29247iuG+hnCQb6XPwKEMV9jP7XIlvkgyMo4xnCZptfAWTQXfdveY5Yq22ARcRwATmE8VsXF0ER9/DdWngaDzCGX7rVSW27qs9exzeJkkLO7VzWzBnhHPbcg8tLZCVyU46iywFewRJktSH9+5SHg0/ghMwoihndwx+oqTqaOptXOvvH1iwbRv+mUf8WZ+GYBxXCURVBHA9RwUXM64Ctsq3bO4gRfNX61xjvJYvO62zeG4P/1IBmmkpdESd7TVMHq9bWPGmTpjftwb0GWLAGl/09bvUZ1G2M9hrgMqrG4JIElzCHtLVFX7CCY50CmIcsM5rFjjX7LE7jE/JI6nPDKGmfAhJmAFlWRgcz03TfGnwDQ9j0kKZbmmGOXJ44pnFGL0iozaX5jLuooGrUhztcMnn1vEChdZP3u9zIBu7gjf5/DcsebvIHlGQFZaxjAinjZRfUwIvIGw/WcQMfMaV9pO+ksaKnuI2an6/rkp7Do358DyRR3uGW3eb49NGXrcnIoer34V9xDv2vij8CDAC3qzmYkAoiegAAAABJRU5ErkJggg==',
    	'ic07' : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAcpJREFUeNrElc9LAkEUx3crKpXwVEEHDTqI0EnoPygI+hc8lMeudQ6v0VXqr7C6dTCoQ9CpLhaamJUQFF6EICo3p+/AVxi3nZnVDg18WPb9mn1v3rx1hRBOiJUGm2CZ76dgH1RsjmMhgrtgDayAlCJ7AlVg/kKZgYWC0K+Czd+WwTSIgBPw4dNNUidtWsOWSJbkEdxq9DHatIYt0Q5L0dUgaKON4Vq6aIEd9KXRj7OT7ofNIC/sKz9IBiM8l28ySAajxANdXQYHoAKO+b4FPPCqwaONQ58KY2jbdBXMg4TSJfKrZgznFONTXsQo27evJOr6VG6q05eqfnV8sTqmDV5Y7wkwB2qW4PIA6yDJ85C+z6YNLsEN5evgEFwZNrgGRyBLn+ove98hZ8Au268BEiAN6gHtWacuCR4o2wNLakz/BrJtU6BJhxKYBVF2yxk4B9sgQl2Jtk36uqYNemSVL62BDRBX9HHKaopdNiiW6RbnQJvOHkt2QRqUCdrkdHFsoyLDC9QOOIM2dRlTjDA/HIe1LSrBi5RZfUeccOsOlJX3MmXOX//JCQ68ljI+evJF/s3koGv+27i2ZdCbTW/gnTgcapIpxSZw/QgwAHNVsX6myrLIAAAAAElFTkSuQmCC',
    	'ic08' : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAY1JREFUeNqslL1KA0EQx++SU5NDkKRQ06TTShEEC0lnoeAjWAkGsfIBfABfwLewTGEVBbEQU/nRWWohkkJBcwEV1//IrKzn7OV24x9+x97s7Mx+TqCUCjwpgS3QBs9Mm20l7ecbfAa0lF0t9vFKUAXHqYB9xhT5VHwS7BhB7sEmmGaofWf0b7sGL4IzHvwO1gSfVe4jnYbf+5RfZfAAJkACKuAt5TMKnkAMuoXATSEH0CoKPqZt3DUBSaUSSpP48fVJ4KRhE6hBNtcEiREgFA444MONdTvCZwrsgcWcKy5zewycM/vgke2voMG+n3RvD9XwohgF6e3QO3ih62SZ8S044vY6mLX40awnQf/viSiVWGZ1AurGbOpCDdKiGLG0Avr0hAEfoCEMWDbKgKmeLYHtFtHtuBbsV5ab4/wORsCcYF9IlYocL0XeIl3Pa8Zyaxln4LxFpBXQNP6bbHMuFWFGf9XSzipwvxQNSLABLo22cwLap4t/eMkdENle8hLyHIB5z4p6A3ZBR+r8EmAA1mtktn3dfuIAAAAASUVORK5CYII=',
    	'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=',
    	'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',
    	'ic11' : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAaRJREFUeNrs1U8oBFEcwPGdXW0bB0l78OeiXDhIkRsXFwcc/Ek5SUq5OHDT2qscHazDii1/SnKWUjZFouxNDuIm2nUgNpYd3+G39XbN7g47e/OrTzszO+/95r15vzearuuOYobTUeQoeoKSAtqu4AkhnCNpxwhK0S7HMYwjjAVUmrYwXrJFLTjCoZx7UI9l/TtO5TytnZWOqzCHZ+kolWALq2hEH5I4QLnVBG6M4EJPj1QCP2K4wzB65X9ftgSaDNvouBW7eNN/RiqBCzXYkOv9WEICTWYJZhDFS5aOMxMYD7CGWnk3EQzhUab0q191mY5lXQnmcYJZuLGIACpwhU47Cs2PKQziFh5J9oA6uyo5Ib8upXCNPnU7EkxLge3AizheZZpuzBIEZXhx5clyRRc2MYkJXCMq07NvVsnqMm3DXp5l6kQ11uX6AAJ4R7PVQhvFZZYEPlnW91JoPfkKLddWMS/1oSbYRggN6JYCC/9mq8hkVPexksAtm1tQEp/9dbNTlaFDjo1RxWUTNObea9ZGK+CbrH5wIvgwu0n7/+jni08BBgAhQkiY9snexwAAAABJRU5ErkJggg=='
    };
    
    	</script>
    	
    		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    	<body>
    	
    	<div style="padding:5px;">
    	<select id="n">
    		<option value="3">3</option>
    		<option value="4" selected="selected">4</option>
    		<option value="5">5</option>
    		<option value="6">6</option>
    	</select> elements,
    	<select id="a">
    		<option value="180">180</option>
    		<option value="270">270</option>
    		<option value="360" selected="selected">360</option>
    	</select> aperture, starting at 
    	<select id="ra">
    		<option value="0">0</option>
    		<option value="45">45</option>
    		<option value="90">90</option>
    		<option value="135">135</option>
    		<option value="180" selected="selected">180</option>
    		<option value="225">225</option>
    		<option value="270">270</option>
    		<option value="315">315</option>
    	</select> degrees, with
    	<select id="an">
    		<option value="-1" selected="selected">no animation</option>
    		<option value="0">effect 0</option>
    		<option value="1">effect 1</option>
    		<option value="2">effect 2</option>
    		<option value="3">effect 3</option>
    		<option value="4">effect 4</option>
    	</select>, 
    	<select id="s">
    		<option value="0" selected="selected">non-sequenced</option>
    		<option value="1">in sequence</option>
    	</select>
    	<button id="r">Render</button>
    </div>
    
    <div id="zc"></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 aPalette = ['#F78022', '#00ADD5', '#606C7A', '#61BB49', '#A7CD3A', '#F15942'];
    var aIcons = ['ic00', 'ic01', 'ic07', 'ic03', 'ic04', 'ic02'];
    
    var aText = [
    	'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
    	'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
    	'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
    	'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
    	'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
    	'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.'
    ];
    var aTooltipText = ['Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum'];
    
    var render = function() {
    
    	var cdata = {
    		resources : [
    			{
    				type : 'css',
    				url : 'https://fonts.googleapis.com/css?family=Exo+2'
    			}
    		],
    		type : 'pie',
    
    		plotarea : {
    			margin : 10
    		},
    
    		scaleR : {
    			aperture : parseInt(a.value, 10),
    			refAngle : parseInt(ra.value, 10)
    		},
    
    		scale:{
    			sizeFactor : 0.75
    		},
    		
    		plot : {
    			detach : false,
    			borderWidth : 8,
    			borderColor : '#FFF',
    			slice : '0%',
    			pieTransform : 'droplet',
    			hoverState : {
    				visible : false
    			}
    		},
    		series:[]
    	};
    
    	if (an.value !== '-1') {
    		cdata['plot'].animation = {
    			speed : 200,
    			method : 0,
    			effect : parseInt(an.value, 10),
    			sequence : parseInt(s.value, 10)
    		};
    	}
    
    	var items = parseInt(n.value, 10);
    	
    	for (var i=0;i<items;i++) {
    		var no = i+1;
    
    		cdata['series'].push({
    			values : [1],
    			tooltipText : aTooltipText[i],
    			dataNo : ((no<=9)?'0'+no:no),
    			valueBox : [
    				{
    					placement : 'fixed=25%;50%',
    					fontSize : 6,
    					shadow : false,
    					color : '#FFF',
    					decimals : 0,
    					fontFamily : '"Exo 2"',
    					text : '<span style="font-size:23px">%data-no</span>'
    				},
    				{
    					width : 24,
    					height : 24,
    					placement : 'fixed=95%;50%',
    					backgroundColor : 'none',
    					shadow : false,
    					backgroundImage : ICONS24[aIcons[i]],
    					backgroundRepeat : 'no-repeat',
    					text : ' '
    				},
    				{
    					align : 'left',
    					placement : 'fixed=60%;50%',
    					backgroundColor : 'none',
    					shadow : false,
    					fontSize : 10,
    					text : aText[i]
    				}
    			],
    			backgroundColor : aPalette[i]
    		});
    	}
    
    	zingchart.render({
    		id : 'zc',
    		width : 500,
    		height : 500,
    		output : 'svg',
    		data : cdata,
    		events : {
    			animation_end : function(p) {
    				if (an.value !== '-1') { 
    					addElements(p);
    				}
    			},
    			load : function(p) {
    				if (an.value === '-1') { 
    					addElements(p);
    				}
    			}
    		}
    	});
    }
    
    window.addEventListener('load', function() {
    
    WebFont.load({
    	google : {
    		families: ['Exo 2']
    	},
    	active : function() {
    
    		r.addEventListener('click', function() {
    			render();
    		});
    		render();
    
    		window.addElements = function(p) {
    			var iPlots = zingchart.exec(p.id, 'getplotlength');
    			var aObjects = [], oInfo;
    			
    			for (var i=0;i<iPlots;i++) {
    				oInfo = zingchart.exec(p.id, 'getobjectinfo', {
    					object : 'node',
    					plotindex : i,
    					nodeindex : 0
    				});
    			}
    
    			zingchart.exec(p.id, 'addobject', {
    				type : 'label',
    				data : aObjects
    			});
    		};
    
    	}
    
    });
    
    });