• 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.ICONS32 = {
                'ic00': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAeZJREFUeNpi/P//P8NAAiaGAQbDzgFRQLwFiF8BMShu7wHxIiA2Q1MnCsSZYBYoDQCxJRDrQtnkYFEgPvwfP+iCqg0E4ldA7AROf1DBaUC8C4iZybCcDYgv/ScOPITSB2D6GaG54DwQGwDxDiAOBeIvJAR7PhBPIDGqsqDRcBPmi3tIrrwBDSZiQ+Dkf/JAI3IUHMOiAGRwCDSI8TngJ7mWIzugHY/it0A8E4j9gJgfiwO+kWj5H2T9sDSgAsRXgZiNiPg7AsT7oPQFID4JxIokxP9TIJaB85Bck/+fPuAwcgggF0QTgbiVDoXfO2QOC5TeApWwoYMDHmFzwGUgrqBT8X8TmQNLhPzQxKROBwcYQhMvigNAQAuIj0EdQyvwApoD/mKrDa8BsTmUphVYiWw5ejaEYU4gnk+D7AcqgNTR7WNBc6ETECfQKDesRE+AuEIgnMzyHR/4DMTS2OoSXBWMMbRWpBZIxlWZ4avlOKG11nMKLZ+ArzYlpr63pMDypYRaWYQsB1XBH2jhc2y5QAVaCBlAS8QQEqtZGHgNxLnQVE8YAF1hD20kUgOsg7aQiW7UInNsgHg1mUG+EZpWSG7SM2LpGzIDsSsUm0HrCCEk+e/Q4voUUuvoBbmlE+No53SgHQAQYABi53bBk19gcAAAAABJRU5ErkJggg==',
                'ic01': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAftJREFUeNrEl89LQkEQx/eVCIGgePIqdA2EQDACIejUKQj6D4KgP0AwOkjQv9E1BKOTUBBCV7sEHYIgiAeCYCR2MYxt1mZjWnefu7ovB764zv6Yj09nnGWcc6aoDLoChdyfhXhmWY2nBq/w+K1iAhB0o38AEDE2dQB3ngMxjaS1pC8YU/zYOyjN/Fmg8clgfVBmvIgAcObXogB+55fYgm3hAIkYz+ZxPYEPUA20gR8ggeMazjliTqZIlIn0yRtSjOFcyyVNXQAaEYFVNXwD9EApTaAk6BRrfYjjJK7tzQqgA6oaPmkaA5ZATVx7hnNVQ2W0BhgSX8Hy0ddBXRwXlPo/F0DSEmCNAKRtnkBUGr6R8YplUj2BznH8Rfx9lzog/5BeiS9vCSCCHuN4lfif8TVlAyBpb4lvxwHgU7PnhhSxqYVIvi8RX9eQhialcI+00iw/QqE28dcdAOpkX9vQlFgBFJVsuLYoxU2yfohnzAwgdKCk0wB0ohxcRN9AWXsY0ZZZAwgdOTasI9zDfAEw7GQfLII/0q53GoCuJwwi0mwZtAvax9qwjv570AvoAnSpFCFToxKYmtJMVOWa00QhGpiaUhl0K8Y2bXuiIGkuJuI7zDrkvK2yePafi4npaiaaiz1QzkPgHJ4VTruaLfxyql7POx6DdkzX828BBgC1EO0f4E9h/QAAAABJRU5ErkJggg==',
                'ic02': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAcNJREFUeNrsl79KA0EQxnMqASurVAFBEAKBVIKFCKkUu5R5AMHKB0hho28hWMuBIFxhlUaxEAQrq0AgECJCQiQBQQTD+S18gWXd29vdHLnGgR/h5l8muzN7myCO40KesuIZVwcRGJCIOncRK+BIK06Wlms+k7EMQjAgx6AOfgwFCNs+fedxIXM5FVABYyW5SPwYp8s9fWURuaouBdxoEhfBxKKACX1VudV9V1ITHizQ2KugaJvTZQp2wKuF3wuoLTqGbY2uCc7AzJBvRp+mZU6nJvwGNYsxrNFXbcKK7xi+E3mcxDhGki2iLi3uD0HeR/Ga8rwJjthwW6AM9sA62CUlsA02pGYTzTkFXTACz+QLXIEOn9vUJfbAWLOvVcv5150HVU0vGM+BjmaVxCr0PFa3x1hZRmlj2NUkEtvS9yigz1hZ3nwLyGoF+mkF9DLegtxXwLmApCb07QHnLfgAFxltgVrAA3iyfRecK/MrjtNTMLSY/yF9Q0l3yTuC07tAl7jEi0WSCNuJptCCz7tAZwgMtrndFJfZtTz3/wX/BSylgAa4A5/8bFjmdIrzvRGZpmApW3DIXzfliXdNnbPkfif8FWAAK308Gia1hSIAAAAASUVORK5CYII=',
                'ic03': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAVdJREFUeNpi/P//P8NAAiaGAQaUOuA/FNPFASCLPiDxE6D0Asq8AEwDRGIYgPEfQvlySGJCULG3xJpLbAisgNIRSGJnobQxkthGKO1P7SjYAcRfgNgGiJmhYqFAvBiIVwNxLFRsLlRdOJI6qkWBLjR49yKJiULFXhFQR3EUgAAnlOZBEvsLpZF9+wtKS9MiEX5DE0uDis9EEnsOFZMgxlxGCktCmGZGcg1gobAgYqS0JGTB4ht6AcZhUReMOmDUAVR1wEc62vsFmwPu09EBd7A5YBMdHQC3C7kuEALi21CaluAdEKtCaZQQeAdt8fyloeUgs6NhluOqjs2A+NJ/6oNLULNR7MNVT7MBcREQHwDizxRY+hlqRhHUTAZiHYCOt2BpARPTfNtOrQYJqD/AT0acg5pn7NQoCY+TmegOUqtNKA3Eq4H4J5Fx/xOqXprWbcKhXxkBBBgAsb4Y2yiT2McAAAAASUVORK5CYII=',
                'ic04': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAVpJREFUeNpi/P//PwMZAJcmRlINYoLSdUiG/icC43MYMXr/Q+1kYISGwH8kH5AVJCQAZDsYYSHQxEB/0IQcAgMGWEhMZNQIfqyJcNCFAKnZiuwQG/QhQPMUOuAhQI4DBIDYFohnUcUFoHIAC0YGf4C4F4iNoXxkdeH/SQMYdhFyAMhyezRxdLUrcBmOxTwMOUJR0AHEBwmomU5ERYQ7n+MoimGCSkB8H00cvWzgAeLP5JaEhBzADsS/iMyWjERkZ5KLYmksliBjJSLbAmRnwygK5SnOht+A2BKHGjOoPK4UTpVsCMuKXUBsAJUzgPL//CcdYNhFKBGO3PYA40A6gB6NRMZBHQWM9HQAKSHgjVSybcEivwVJ3pvSgggdswHxbWhe/gnEKljUqEDl/kPVshFjNrEOqEYqTFrwqGtBUldNLQeQ4jNiQopkB2xB8pU3Eeq9kdRvIaQeIMAADRicX6Vy96oAAAAASUVORK5CYII=',
                'ic05': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAY1JREFUeNpi/P//P8NAAiYktj0QnwTi/zTGJ6F2gQEjUgg8B2IJOnn8BRBLojuA3nHBiB4FA54GRh2AC2wC4gU0cwEoEUIxLmADxPz/8QMnJHPwYSckPWAxFgJZ5QiU/g7EHUCsCMQ2QCyNppaNSP+yERsCk4GYB4cvOIH453/KAc4QOA7EuVA2DxDnA7EcEL8G4rNALEqCjwkCbA5Yj8QuBeK6gcwFO6A+JwScoSUbIexMjANCgJgZKTpAZbY/NDv+JTpxUZgItwOxOpYEKAHEq/9TB4DNJFQOHADiBLQcwQzEJ+nlABh4ixYiRdRyALF1gRAQGyDxv1MrEWLLhmuA+Bq0xOMH4ptAfAEqDgMetEyENgTK8zRqJkJsIeANdSnI50+hYqBsGQvEUUDsStVmERFNMlsgvgzEHwaqSaaOlgApKRWJSoToYA6JPmMjRW60VYzugINQTC8+RhTAEslepARFKz4jeiJcBsT7oOx90LxPK/5ibCEASqG/oGwnJI204MPtYhzo7jlAgAEAS1s0yEiExxYAAAAASUVORK5CYII=',
                'ic06': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAc9JREFUeNrslzFLA0EQhS8GBMEqkCoQCAQCQuAgVSSVNoIiBAJW/gDBKq0gCLZWVlZCbAJ2YmEZSJVKSKVYRQKCEDiIWCnrG5jAOuxebk/JFjrwNbc3M293Z+duM0qpwKctBZ7tTwjogJJtMLOAGhiBLNgEj762oAD6IPRZA3nQA/VvT2kLmK6Kt7b2riQLjkGk5tsUbMx89QBJ7Mwi4FK52TvY1gUEDs6HIvm+SmdjKWCa0PED1Nmn4uCnWzSLoQtoJ9zDCciBZXCfIjn512QNxLEKWuCVAxzw83ND8BdQFv76pChGqI8nETCjCDpcsLuW2e0Z/CJN3JocdxGgC5kYkl9b3icBI1Ayjbsmp9n3DclpafMWHzolBVtMVwEnlqVvzVmx4DcENPgISuvyeNniR8t/y8WcWkCeA0kb8ZGscF0ULQLIBqZtSpKczuyDpSFRT18BQ37WM+y3LvxJipSNaOLQUE7Z78KxEdFxrJoEuCQfcCfMOfrp3bAhBUQJnaei4GopRYzTrAB9RpuWOnERQZPYkgKOLJWuV3wtplhDS7Ga4lR/0opd0Sc1lKdgkf+Ed2AdPPv4Kb0CO+DNx72gCW7Ap6+Lyf/dMNa+BBgANQljAQT+NQgAAAAASUVORK5CYII=',
                'ic07': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAYlJREFUeNrsVsFqwkAQNVoCAUvBa8E/EPyJQn6i10JBEDwJvXrth/TuBwR6EixCerF3Cz1G9JJeprMwgWHJZmdiQhD64LFhM/N2MrthXwAAvS7Rr5ETImfIBJkTE5oL1WqmAwreI3fgxo5ixJqaxUNkCn6kFCvS1WzBE3IiiJtQrAjBNR1Cc9hAyLyNDmhbFUiCbpoW1EJTQCsd6Pc6Rudb4OrAilq+srZAwyot719wQg6RZ+TthWegTMtbAJQI1S0AqrbRtQVH6/Yz+FUsfqZxWDInKuCHPY9p/FAU8GnlGnxrCvhizzGNb4oCitgHh6bXDzxa1+ugxnU8sOKfNX7gDpmx5BkzJKln8cKQzNl8RpoqQ7JkAjkyZsbEiCfs/TvNFUYkppwCyzqOyIhtrS98RUYVORHFcGyrciQe8GAJ7pEL5JTFTWlub8UefB5R4tvGyA3osaHcRkypaeGLdTBdyCg2atoVG47oj1iXLLymdyON5iWmFJq4rjs3JFfliKCNLfn3hH8CDABg4XbpmFgBpAAAAABJRU5ErkJggg==',
                'ic08': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAXBJREFUeNpi/P//PwOVgToQpwGxPRAbQMUuAPFBIJ4FxDdRVIMcQEVcBMTf/uMG36Bq4HqoZTEbEG//TzzYDtVDNQdM+E866KWWA3SB+A+a4RuB2AmIRaHYCSqGDEB6tGjh+0V41M5HDwVGKuSCG9CUDwOSQPwCh1oJIH6OxL9GDQf8BGI2JD4jAfXIFn6khgPQDSDFAQxMDAMMRh0w6gBaOECUFDkmaB5uAeIn0CxCKkYHr6BmtaCVDyDwGppNERhYDrT/px1oJ1SUgwqiVwSCjRIA8rEYoTRAjOVPgTgCiGWgOAIqRkl6gLeICIEbQCyEJfhAYleJ0I83CohxQAgeAwIpdQDjf8K1kQCo1sIhxwPEnwnoZxzyBZETHjlXil1ARBxepWUiJCYNwLKhDJoYqLSTJkIv3jRArAOwGUSuPrIToTQONt1qwznQVq0ElE0VMCjqgrk0zOYLiMmGbNB+2nMqVsPPoWayEcqGAAEGAHnNnEOZpvtRAAAAAElFTkSuQmCC',
                'ic09': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAXVJREFUeNpi/P//P8NAAiaGAQa0doA9EG8E4idQvBEqhgCgKKARrviPG1TA1NHKcnsg/oPHASA5G1o64PB/wuAASC0jjXLBByDmJ6DmIxAL0CIRugIxJxHqmEEEC5UsVQTiBCBOBmJpIvWcpTQX8ANxGpHxTdVE6AHES4H4Gw7D3wLxZCDuJScbgrLPRiB+AsUboWLqQNwOxM/x+AikNhCI2bCY9xyKYeYxYHNABRlBeQmIi4BYlNyoJLbgQAavoMGrS40yg5SC4wMQ+wExMzULLVhBRHTBMZC1ISctq+PLRKhlA+Ib0AKHmWouICMRgsA9aCHERq1ESCgbroMmQnQAKitygJiTGg4gVHCAit5qHA55hcMhuAo2BkoaJDCHvMXhEFDBxEOPFhEP1LJXOOoDurWIOKHB/4TEYvwAtZtkbNCccY9IB3ygVZMMVEa8JaJk/QLEvLRokv0lsmA7S8t+wYA3ywe8Y0J0i4hW/YKh0zsGCDAAVxkSh4Kf2goAAAAASUVORK5CYII=',
                'ic10': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAARJJREFUeNpi/P//P8NAAiaGAQakOIANiIuAeDIQ62KR14XKFUHVEgdAUUAk7vqPAB+AWAhJTggqBgPtxJpLrOUqQPzzPyowQ5I3Q5P7CdVDNQdsQbPgNhAzI8kzQ8WQwRZqOcD7PybwpkAdSQ5gI9Fn2EKKjRIHFJEYtyC5P2h6ioh1gDQQb8RiADXBH6gd0tgcsOs//cABmL2MSEXxZyDmoVMB+AuI2dFLwuN0LIGPYysJ5YB4Ox2CfzvULowoGDSV0StQwNAIvyLGAR9p6OGPow4g1wHOUEypOIbZLEQ6YB8OH5EqPpoGRh0w+BxAbC7wwGEgqeIYZmOrjMyA+CSNQsAciE+NpgFCUTCyescAAQYAyd4rc65oVvYAAAAASUVORK5CYII=',
                'ic11': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAdlJREFUeNrsl19EQ1Ecx7eaMXqNGGNExBLR0+g1xp562lOvJcaInmLpdcSIsV6iRJQoS9F7RE9LRCylFIlYRjl9D9/Dr+u62+4fe2g/Pu45596z872/37m/81tYKRXqpQ2Eemx9AX4LqIElEO94ht6EPmLsG1TASLs5XhdMgiPRz4EDCtD2CWaDEBADq6DJhaz3p8Gt8EjeTwEZcKf+mrl3BUpgjCJLIiRZrwKMu+3Muge0ZwocW+bYB4i7EWB1t5OAGVAGLY7XQBTssV/pVoCdu50EGCbBI+/pMIxSlA5FwknAPHhV3ZuZ3wDbYBikxKLjYIfPrjgJaCp3Zt0Dz3zTsvBCju0zJwHKo4A0uORYlX1tdW5ixdAEJiBE1yuGIyq+ANNuyeeDOIx+RDvK66BoB3oYJcAm2xcgxfaDOKDe5ISI5Qe+QMyDgAavL2AN5Nk/B1Ns3zh5YBG8exDwBHbBBBgCCwzJFsgIz3R8HOv8fe8iEaVEItrgF2ByQtJNKi52mIrTXNC3VCzR6fTYxWFUELVB3I/j2C4s5t61OI71m6+L4iTrd0FSbFOQ1IMqSOzCYvpzYN9SkmWDrAmditKqXcytRHzOhKfgBBwyJ7S1cP+/4b8X8CvAALFdoXAXsoG7AAAAAElFTkSuQmCC'
            };
        </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: 600px;
            }
        </style>
    </head>
    
    <body>
    
        <div style="padding:5px;">
            <select id="n">
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12" selected="selected">12</option>
            </select> elements,
            <select id="a">
                <option value="90">90</option>
                <option value="180">180</option>
                <option value="270">270</option>
                <option value="360" selected="selected">360</option>
            </select> aperture, from
            <select id="ra">
                <option value="0" selected="selected">0</option>
                <option value="45">45</option>
                <option value="90">90</option>
                <option value="135">135</option>
                <option value="180">180</option>
                <option value="225">225</option>
                <option value="270">270</option>
                <option value="315">315</option>
            </select> deg,
            <select id="an">
                <option value="-1">no animation</option>
                <option value="0">effect 0</option>
                <option value="1">effect 1</option>
                <option value="2">effect 2</option>
                <option value="3" selected="selected">effect 3</option>
                <option value="4">effect 4</option>
            </select>,
            <select id="s">
                <option value="0">no-sequence</option>
                <option value="1" selected="selected">sequenced</option>
            </select>
            <button id="r">Render</button>
        </div>
    
        <div id="zc"></div>
    
        <script>
            ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
            var aPalette = [
                '#F6842E', '#FBAC33', '#8AC340', '#46B863', '#41BC9F', '#29C2EC',
                '#387EC3', '#5253A3', '#764199', '#962871', '#C87F8A', '#F14F42'
            ];
            var aIcons = [
                'ic00', 'ic01', 'ic02', 'ic03', 'ic04', 'ic05',
                'ic06', 'ic07', 'ic08', 'ic09', 'ic10', 'ic11'
            ];
            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.',
                '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',
                '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: 0
                    },
                    scaleR: {
                        aperture: parseInt(a.value, 10),
                        refAngle: parseInt(ra.value, 10)
                    },
                    plot: {
                        detach: false,
                        borderWidth: 0,
                        borderColor: '#fff',
                        slice: '25%',
                        pieTransform: 'bite=10',
                        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: [{
                                width: 40,
                                height: 40,
                                placement: 'fixed=95%;5',
                                borderRadius: 23,
                                fontSize: 27,
                                shadow: false,
                                color: '#000',
                                decimals: 0,
                                fontFamily: '"Exo 2"',
                                text: '%data-no'
                            },
                            {
                                width: 32,
                                height: 32,
                                placement: 'fixed=10%;50%',
                                backgroundColor: 'none',
                                shadow: false,
                                backgroundImage: ICONS32[aIcons[i]],
                                backgroundRepeat: 'no-repeat',
                                text: ' '
                            },
                            {
                                align: 'left',
                                placement: 'fixed=60%;50%',
                                backgroundColor: 'none',
                                shadow: false,
                                fontSize: 10,
                                text: aText[i]
                            }
                        ],
                        backgroundColor: aPalette[i],
                        gradientColors: [aPalette[i], aPalette[i], '#eee', '#eee', aPalette[i], aPalette[i]].join(' '),
                        gradientStops: [0.001, 0.40, 0.41, 0.45, 0.46, 0.99].join(' ')
                    });
                }
    
                zingchart.render({
                    id: 'zc',
                    width: 600,
                    height: 600,
                    output: 'svg',
                    data: cdata,
                    events: {
                        animation_end: function(p) {
                            if ($('#an').val() !== '-1') {
                                addElements(p);
                            }
                        },
                        load: function(p) {
                            if ($('#an').val() === '-1') {
                                addElements(p);
                            }
                        }
                    }
                });
    
            }
    
            window.addEventListener('load', function() {
    
                WebFont.load({
                    google: {
                        families: ['Exo 2']
                    },
                    active: function() {
    
                        r.addEventListener('click', function() {
                            render();
                        });
    
                        var _cpoint_ = function(iX, iY, iR, iAngle) {
                            return [iX + iR * Math.cos(iAngle * 2 * Math.PI / 360), iY + iR * Math.sin(iAngle * 2 * Math.PI / 360)];
                        }
    
                        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
                                });
                                var iSlice = oInfo.size * oInfo.slice;
                                var aCP = _cpoint_(oInfo.x, oInfo.y, (iSlice + oInfo.size) / 2, oInfo.angleStart);
                                aObjects.push({
                                    id: 'sh' + i,
                                    anchor: 'c',
                                    x: aCP[0],
                                    y: aCP[1],
                                    width: (oInfo.size - iSlice) - 2,
                                    height: 20,
                                    backgroundColor: '#ccc',
                                    angle: oInfo.angleStart,
                                    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)',
                                    gradientStops: '0.01 0.5 0.51 0.6 0.7 0.8 0.9 0.99'
                                });
                            }
                            aObjects.push({
                                x: oInfo.x,
                                y: oInfo.y,
                                width: 1.75 * oInfo.slice * oInfo.size,
                                height: 60,
                                fontFamily: '"Exo 2"',
                                fontSize: 47,
                                paddingLeft: 5,
                                align: 'left',
                                fontWeight: 900,
                                color: '#F14F42',
                                anchor: 'c',
                                text: iPlots
                            }, {
                                x: oInfo.x,
                                y: oInfo.y,
                                width: 1.75 * oInfo.slice * oInfo.size,
                                height: 60,
                                paddingLeft: 55,
                                fontFamily: '"Exo 2"',
                                fontSize: 11,
                                align: 'left',
                                fontWeight: 600,
                                color: '#000',
                                anchor: 'c',
                                text: 'OPTIONS<br>INFOGRAPHIC<br>TEMPLATE'
                            });
                            zingchart.exec(p.id, 'addobject', {
                                type: 'label',
                                data: aObjects
                            });
                        };
    
                        render();
    
                    }
                });
    
            });
        </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.ICONS32 = {
    	'ic00' : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAeZJREFUeNpi/P//P8NAAiaGAQbDzgFRQLwFiF8BMShu7wHxIiA2Q1MnCsSZYBYoDQCxJRDrQtnkYFEgPvwfP+iCqg0E4ldA7AROf1DBaUC8C4iZybCcDYgv/ScOPITSB2D6GaG54DwQGwDxDiAOBeIvJAR7PhBPIDGqsqDRcBPmi3tIrrwBDSZiQ+Dkf/JAI3IUHMOiAGRwCDSI8TngJ7mWIzugHY/it0A8E4j9gJgfiwO+kWj5H2T9sDSgAsRXgZiNiPg7AsT7oPQFID4JxIokxP9TIJaB85Bck/+fPuAwcgggF0QTgbiVDoXfO2QOC5TeApWwoYMDHmFzwGUgrqBT8X8TmQNLhPzQxKROBwcYQhMvigNAQAuIj0EdQyvwApoD/mKrDa8BsTmUphVYiWw5ejaEYU4gnk+D7AcqgNTR7WNBc6ETECfQKDesRE+AuEIgnMzyHR/4DMTS2OoSXBWMMbRWpBZIxlWZ4avlOKG11nMKLZ+ArzYlpr63pMDypYRaWYQsB1XBH2jhc2y5QAVaCBlAS8QQEqtZGHgNxLnQVE8YAF1hD20kUgOsg7aQiW7UInNsgHg1mUG+EZpWSG7SM2LpGzIDsSsUm0HrCCEk+e/Q4voUUuvoBbmlE+No53SgHQAQYABi53bBk19gcAAAAABJRU5ErkJggg==',
    	'ic01' : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAftJREFUeNrEl89LQkEQx/eVCIGgePIqdA2EQDACIejUKQj6D4KgP0AwOkjQv9E1BKOTUBBCV7sEHYIgiAeCYCR2MYxt1mZjWnefu7ovB764zv6Yj09nnGWcc6aoDLoChdyfhXhmWY2nBq/w+K1iAhB0o38AEDE2dQB3ngMxjaS1pC8YU/zYOyjN/Fmg8clgfVBmvIgAcObXogB+55fYgm3hAIkYz+ZxPYEPUA20gR8ggeMazjliTqZIlIn0yRtSjOFcyyVNXQAaEYFVNXwD9EApTaAk6BRrfYjjJK7tzQqgA6oaPmkaA5ZATVx7hnNVQ2W0BhgSX8Hy0ddBXRwXlPo/F0DSEmCNAKRtnkBUGr6R8YplUj2BznH8Rfx9lzog/5BeiS9vCSCCHuN4lfif8TVlAyBpb4lvxwHgU7PnhhSxqYVIvi8RX9eQhialcI+00iw/QqE28dcdAOpkX9vQlFgBFJVsuLYoxU2yfohnzAwgdKCk0wB0ohxcRN9AWXsY0ZZZAwgdOTasI9zDfAEw7GQfLII/0q53GoCuJwwi0mwZtAvax9qwjv570AvoAnSpFCFToxKYmtJMVOWa00QhGpiaUhl0K8Y2bXuiIGkuJuI7zDrkvK2yePafi4npaiaaiz1QzkPgHJ4VTruaLfxyql7POx6DdkzX828BBgC1EO0f4E9h/QAAAABJRU5ErkJggg==',
    	'ic02' : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAcNJREFUeNrsl79KA0EQxnMqASurVAFBEAKBVIKFCKkUu5R5AMHKB0hho28hWMuBIFxhlUaxEAQrq0AgECJCQiQBQQTD+S18gWXd29vdHLnGgR/h5l8muzN7myCO40KesuIZVwcRGJCIOncRK+BIK06Wlms+k7EMQjAgx6AOfgwFCNs+fedxIXM5FVABYyW5SPwYp8s9fWURuaouBdxoEhfBxKKACX1VudV9V1ITHizQ2KugaJvTZQp2wKuF3wuoLTqGbY2uCc7AzJBvRp+mZU6nJvwGNYsxrNFXbcKK7xi+E3mcxDhGki2iLi3uD0HeR/Ga8rwJjthwW6AM9sA62CUlsA02pGYTzTkFXTACz+QLXIEOn9vUJfbAWLOvVcv5150HVU0vGM+BjmaVxCr0PFa3x1hZRmlj2NUkEtvS9yigz1hZ3nwLyGoF+mkF9DLegtxXwLmApCb07QHnLfgAFxltgVrAA3iyfRecK/MrjtNTMLSY/yF9Q0l3yTuC07tAl7jEi0WSCNuJptCCz7tAZwgMtrndFJfZtTz3/wX/BSylgAa4A5/8bFjmdIrzvRGZpmApW3DIXzfliXdNnbPkfif8FWAAK308Gia1hSIAAAAASUVORK5CYII=',
    	'ic03' : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAVdJREFUeNpi/P//P8NAAiaGAQaUOuA/FNPFASCLPiDxE6D0Asq8AEwDRGIYgPEfQvlySGJCULG3xJpLbAisgNIRSGJnobQxkthGKO1P7SjYAcRfgNgGiJmhYqFAvBiIVwNxLFRsLlRdOJI6qkWBLjR49yKJiULFXhFQR3EUgAAnlOZBEvsLpZF9+wtKS9MiEX5DE0uDis9EEnsOFZMgxlxGCktCmGZGcg1gobAgYqS0JGTB4ht6AcZhUReMOmDUAVR1wEc62vsFmwPu09EBd7A5YBMdHQC3C7kuEALi21CaluAdEKtCaZQQeAdt8fyloeUgs6NhluOqjs2A+NJ/6oNLULNR7MNVT7MBcREQHwDizxRY+hlqRhHUTAZiHYCOt2BpARPTfNtOrQYJqD/AT0acg5pn7NQoCY+TmegOUqtNKA3Eq4H4J5Fx/xOqXprWbcKhXxkBBBgAsb4Y2yiT2McAAAAASUVORK5CYII=',
    	'ic04' : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAVpJREFUeNpi/P//PwMZAJcmRlINYoLSdUiG/icC43MYMXr/Q+1kYISGwH8kH5AVJCQAZDsYYSHQxEB/0IQcAgMGWEhMZNQIfqyJcNCFAKnZiuwQG/QhQPMUOuAhQI4DBIDYFohnUcUFoHIAC0YGf4C4F4iNoXxkdeH/SQMYdhFyAMhyezRxdLUrcBmOxTwMOUJR0AHEBwmomU5ERYQ7n+MoimGCSkB8H00cvWzgAeLP5JaEhBzADsS/iMyWjERkZ5KLYmksliBjJSLbAmRnwygK5SnOht+A2BKHGjOoPK4UTpVsCMuKXUBsAJUzgPL//CcdYNhFKBGO3PYA40A6gB6NRMZBHQWM9HQAKSHgjVSybcEivwVJ3pvSgggdswHxbWhe/gnEKljUqEDl/kPVshFjNrEOqEYqTFrwqGtBUldNLQeQ4jNiQopkB2xB8pU3Eeq9kdRvIaQeIMAADRicX6Vy96oAAAAASUVORK5CYII=',
    	'ic05' : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAY1JREFUeNpi/P//P8NAAiYktj0QnwTi/zTGJ6F2gQEjUgg8B2IJOnn8BRBLojuA3nHBiB4FA54GRh2AC2wC4gU0cwEoEUIxLmADxPz/8QMnJHPwYSckPWAxFgJZ5QiU/g7EHUCsCMQ2QCyNppaNSP+yERsCk4GYB4cvOIH453/KAc4QOA7EuVA2DxDnA7EcEL8G4rNALEqCjwkCbA5Yj8QuBeK6gcwFO6A+JwScoSUbIexMjANCgJgZKTpAZbY/NDv+JTpxUZgItwOxOpYEKAHEq/9TB4DNJFQOHADiBLQcwQzEJ+nlABh4ixYiRdRyALF1gRAQGyDxv1MrEWLLhmuA+Bq0xOMH4ptAfAEqDgMetEyENgTK8zRqJkJsIeANdSnI50+hYqBsGQvEUUDsStVmERFNMlsgvgzEHwaqSaaOlgApKRWJSoToYA6JPmMjRW60VYzugINQTC8+RhTAEslepARFKz4jeiJcBsT7oOx90LxPK/5ibCEASqG/oGwnJI204MPtYhzo7jlAgAEAS1s0yEiExxYAAAAASUVORK5CYII=',
    	'ic06' : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAc9JREFUeNrslzFLA0EQhS8GBMEqkCoQCAQCQuAgVSSVNoIiBAJW/gDBKq0gCLZWVlZCbAJ2YmEZSJVKSKVYRQKCEDiIWCnrG5jAOuxebk/JFjrwNbc3M293Z+duM0qpwKctBZ7tTwjogJJtMLOAGhiBLNgEj762oAD6IPRZA3nQA/VvT2kLmK6Kt7b2riQLjkGk5tsUbMx89QBJ7Mwi4FK52TvY1gUEDs6HIvm+SmdjKWCa0PED1Nmn4uCnWzSLoQtoJ9zDCciBZXCfIjn512QNxLEKWuCVAxzw83ND8BdQFv76pChGqI8nETCjCDpcsLuW2e0Z/CJN3JocdxGgC5kYkl9b3icBI1Ayjbsmp9n3DclpafMWHzolBVtMVwEnlqVvzVmx4DcENPgISuvyeNniR8t/y8WcWkCeA0kb8ZGscF0ULQLIBqZtSpKczuyDpSFRT18BQ37WM+y3LvxJipSNaOLQUE7Z78KxEdFxrJoEuCQfcCfMOfrp3bAhBUQJnaei4GopRYzTrAB9RpuWOnERQZPYkgKOLJWuV3wtplhDS7Ga4lR/0opd0Sc1lKdgkf+Ed2AdPPv4Kb0CO+DNx72gCW7Ap6+Lyf/dMNa+BBgANQljAQT+NQgAAAAASUVORK5CYII=',
    	'ic07' : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAYlJREFUeNrsVsFqwkAQNVoCAUvBa8E/EPyJQn6i10JBEDwJvXrth/TuBwR6EixCerF3Cz1G9JJeprMwgWHJZmdiQhD64LFhM/N2MrthXwAAvS7Rr5ETImfIBJkTE5oL1WqmAwreI3fgxo5ixJqaxUNkCn6kFCvS1WzBE3IiiJtQrAjBNR1Cc9hAyLyNDmhbFUiCbpoW1EJTQCsd6Pc6Rudb4OrAilq+srZAwyot719wQg6RZ+TthWegTMtbAJQI1S0AqrbRtQVH6/Yz+FUsfqZxWDInKuCHPY9p/FAU8GnlGnxrCvhizzGNb4oCitgHh6bXDzxa1+ugxnU8sOKfNX7gDpmx5BkzJKln8cKQzNl8RpoqQ7JkAjkyZsbEiCfs/TvNFUYkppwCyzqOyIhtrS98RUYVORHFcGyrciQe8GAJ7pEL5JTFTWlub8UefB5R4tvGyA3osaHcRkypaeGLdTBdyCg2atoVG47oj1iXLLymdyON5iWmFJq4rjs3JFfliKCNLfn3hH8CDABg4XbpmFgBpAAAAABJRU5ErkJggg==',
    	'ic08' : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAXBJREFUeNpi/P//PwOVgToQpwGxPRAbQMUuAPFBIJ4FxDdRVIMcQEVcBMTf/uMG36Bq4HqoZTEbEG//TzzYDtVDNQdM+E866KWWA3SB+A+a4RuB2AmIRaHYCSqGDEB6tGjh+0V41M5HDwVGKuSCG9CUDwOSQPwCh1oJIH6OxL9GDQf8BGI2JD4jAfXIFn6khgPQDSDFAQxMDAMMRh0w6gBaOECUFDkmaB5uAeIn0CxCKkYHr6BmtaCVDyDwGppNERhYDrT/px1oJ1SUgwqiVwSCjRIA8rEYoTRAjOVPgTgCiGWgOAIqRkl6gLeICIEbQCyEJfhAYleJ0I83CohxQAgeAwIpdQDjf8K1kQCo1sIhxwPEnwnoZxzyBZETHjlXil1ARBxepWUiJCYNwLKhDJoYqLSTJkIv3jRArAOwGUSuPrIToTQONt1qwznQVq0ElE0VMCjqgrk0zOYLiMmGbNB+2nMqVsPPoWayEcqGAAEGAHnNnEOZpvtRAAAAAElFTkSuQmCC',
    	'ic09' : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAXVJREFUeNpi/P//P8NAAiaGAQa0doA9EG8E4idQvBEqhgCgKKARrviPG1TA1NHKcnsg/oPHASA5G1o64PB/wuAASC0jjXLBByDmJ6DmIxAL0CIRugIxJxHqmEEEC5UsVQTiBCBOBmJpIvWcpTQX8ANxGpHxTdVE6AHES4H4Gw7D3wLxZCDuJScbgrLPRiB+AsUboWLqQNwOxM/x+AikNhCI2bCY9xyKYeYxYHNABRlBeQmIi4BYlNyoJLbgQAavoMGrS40yg5SC4wMQ+wExMzULLVhBRHTBMZC1ISctq+PLRKhlA+Ib0AKHmWouICMRgsA9aCHERq1ESCgbroMmQnQAKitygJiTGg4gVHCAit5qHA55hcMhuAo2BkoaJDCHvMXhEFDBxEOPFhEP1LJXOOoDurWIOKHB/4TEYvwAtZtkbNCccY9IB3ygVZMMVEa8JaJk/QLEvLRokv0lsmA7S8t+wYA3ywe8Y0J0i4hW/YKh0zsGCDAAVxkSh4Kf2goAAAAASUVORK5CYII=',
    	'ic10' : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAARJJREFUeNpi/P//P8NAAiaGAQakOIANiIuAeDIQ62KR14XKFUHVEgdAUUAk7vqPAB+AWAhJTggqBgPtxJpLrOUqQPzzPyowQ5I3Q5P7CdVDNQdsQbPgNhAzI8kzQ8WQwRZqOcD7PybwpkAdSQ5gI9Fn2EKKjRIHFJEYtyC5P2h6ioh1gDQQb8RiADXBH6gd0tgcsOs//cABmL2MSEXxZyDmoVMB+AuI2dFLwuN0LIGPYysJ5YB4Ox2CfzvULowoGDSV0StQwNAIvyLGAR9p6OGPow4g1wHOUEypOIbZLEQ6YB8OH5EqPpoGRh0w+BxAbC7wwGEgqeIYZmOrjMyA+CSNQsAciE+NpgFCUTCyescAAQYAyd4rc65oVvYAAAAASUVORK5CYII=',
    	'ic11' : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAdlJREFUeNrsl19EQ1Ecx7eaMXqNGGNExBLR0+g1xp562lOvJcaInmLpdcSIsV6iRJQoS9F7RE9LRCylFIlYRjl9D9/Dr+u62+4fe2g/Pu45596z872/37m/81tYKRXqpQ2Eemx9AX4LqIElEO94ht6EPmLsG1TASLs5XhdMgiPRz4EDCtD2CWaDEBADq6DJhaz3p8Gt8EjeTwEZcKf+mrl3BUpgjCJLIiRZrwKMu+3Muge0ZwocW+bYB4i7EWB1t5OAGVAGLY7XQBTssV/pVoCdu50EGCbBI+/pMIxSlA5FwknAPHhV3ZuZ3wDbYBikxKLjYIfPrjgJaCp3Zt0Dz3zTsvBCju0zJwHKo4A0uORYlX1tdW5ixdAEJiBE1yuGIyq+ANNuyeeDOIx+RDvK66BoB3oYJcAm2xcgxfaDOKDe5ISI5Qe+QMyDgAavL2AN5Nk/B1Ns3zh5YBG8exDwBHbBBBgCCwzJFsgIz3R8HOv8fe8iEaVEItrgF2ByQtJNKi52mIrTXNC3VCzR6fTYxWFUELVB3I/j2C4s5t61OI71m6+L4iTrd0FSbFOQ1IMqSOzCYvpzYN9SkmWDrAmditKqXcytRHzOhKfgBBwyJ7S1cP+/4b8X8CvAALFdoXAXsoG7AAAAAElFTkSuQmCC'
    };
    	</script>
    	
    		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    	<body>
    	
    	<div style="padding:5px;">
    	<select id="n">
    		<option value="2">2</option>
    		<option value="3">3</option>
    		<option value="4">4</option>
    		<option value="5">5</option>
    		<option value="6">6</option>
    		<option value="7">7</option>
    		<option value="8">8</option>
    		<option value="9">9</option>
    		<option value="10">10</option>
    		<option value="11">11</option>
    		<option value="12" selected="selected">12</option>
    	</select> elements, 
    	<select id="a">
    		<option value="90">90</option>
    		<option value="180">180</option>
    		<option value="270">270</option>
    		<option value="360" selected="selected">360</option>
    	</select> aperture, from 
    	<select id="ra">
    		<option value="0" selected="selected">0</option>
    		<option value="45">45</option>
    		<option value="90">90</option>
    		<option value="135">135</option>
    		<option value="180">180</option>
    		<option value="225">225</option>
    		<option value="270">270</option>
    		<option value="315">315</option>
    	</select> deg,
    	<select id="an">
    		<option value="-1">no animation</option>
    		<option value="0">effect 0</option>
    		<option value="1">effect 1</option>
    		<option value="2">effect 2</option>
    		<option value="3" selected="selected">effect 3</option>
    		<option value="4">effect 4</option>
    	</select>, 
    	<select id="s">
    		<option value="0">no-sequence</option>
    		<option value="1" selected="selected">sequenced</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 = [
    	'#F6842E', '#FBAC33', '#8AC340', '#46B863', '#41BC9F', '#29C2EC', 
    	'#387EC3', '#5253A3', '#764199', '#962871', '#C87F8A', '#F14F42'
    ];
    var aIcons = [
    	'ic00', 'ic01', 'ic02', 'ic03', 'ic04', 'ic05', 
    	'ic06', 'ic07', 'ic08', 'ic09', 'ic10', 'ic11' 
    ];
    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.',
    	'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',
    	'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 : 0
    		},
    		scaleR : {
    			aperture : parseInt(a.value, 10),
    			refAngle : parseInt(ra.value, 10)
    		},
    		plot : {
    			detach : false,
    			borderWidth : 0,
    			borderColor : '#fff',
    			slice : '25%',
    			pieTransform : 'bite=10',
    			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 : [
    				{
    					width : 40,
    					height : 40,
    					placement : 'fixed=95%;5',
    					borderRadius : 23,
    					fontSize : 27,
    					shadow : false,
    					color : '#000',
    					decimals : 0,
    					fontFamily : '"Exo 2"',
    					text : '%data-no'
    				},
    				{
    					width : 32,
    					height : 32,
    					placement : 'fixed=10%;50%',
    					backgroundColor : 'none',
    					shadow : false,
    					backgroundImage : ICONS32[aIcons[i]],
    					backgroundRepeat : 'no-repeat',
    					text : ' '
    				},
    				{
    					align : 'left',
    					placement : 'fixed=60%;50%',
    					backgroundColor : 'none',
    					shadow : false,
    					fontSize : 10,
    					text : aText[i]
    				}
    			],
    			backgroundColor : aPalette[i],
    			gradientColors : [aPalette[i], aPalette[i], '#eee', '#eee', aPalette[i], aPalette[i]].join(' '),
    			gradientStops : [0.001, 0.40, 0.41, 0.45, 0.46, 0.99].join(' ')
    		});
    	}
    
    	zingchart.render({
    		id : 'zc',
    		width : 600,
    		height : 600,
    		output : 'svg',
    		data : cdata,
    		events : {
    			animation_end : function(p) {
    				if ($('#an').val() !== '-1') { 
    					addElements(p);
    				}
    			},
    			load : function(p) {
    				if ($('#an').val() === '-1') { 
    					addElements(p);
    				}
    			}
    		}
    	});
    
    }
    
    window.addEventListener('load', function() {
    	
    WebFont.load({
    	google : {
    		families: ['Exo 2']
    	},
    	active : function() {
    
    		r.addEventListener('click',function() {
    			render();
    		});
    
    		var _cpoint_ = function(iX, iY, iR, iAngle) {
    			return [iX + iR*Math.cos(iAngle*2*Math.PI/360), iY + iR*Math.sin(iAngle*2*Math.PI/360)];
    		}
    
    		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
    				});
    				var iSlice = oInfo.size * oInfo.slice;
    				var aCP = _cpoint_(oInfo.x, oInfo.y, (iSlice + oInfo.size)/2, oInfo.angleStart);
    				aObjects.push({
    					id : 'sh'+i,
    					anchor : 'c',
    					x : aCP[0],
    					y : aCP[1],
    					width : (oInfo.size - iSlice) - 2,
    					height : 20,
    					backgroundColor : '#ccc',
    					angle : oInfo.angleStart,
    					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)',
    					gradientStops : '0.01 0.5 0.51 0.6 0.7 0.8 0.9 0.99'
    				});
    			}
    			aObjects.push(
    				{
    					x : oInfo.x,
    					y : oInfo.y,
    					width : 1.75*oInfo.slice*oInfo.size,
    					height : 60,
    					fontFamily : '"Exo 2"',
    					fontSize : 47,
    					paddingLeft : 5,
    					align : 'left',
    					fontWeight : 900,
    					color : '#F14F42',
    					anchor : 'c',
    					text : iPlots
    				},
    				{
    					x : oInfo.x,
    					y : oInfo.y,
    					width : 1.75*oInfo.slice*oInfo.size,
    					height : 60,
    					paddingLeft : 55,
    					fontFamily : '"Exo 2"',
    					fontSize : 11,
    					align : 'left',
    					fontWeight : 600,
    					color : '#000',
    					anchor : 'c',
    					text : 'OPTIONS<br>INFOGRAPHIC<br>TEMPLATE'
    				}
    			);
    			zingchart.exec(p.id, 'addobject', {
    				type : 'label',
    				data : aObjects
    			});
    		};
    
    		render();
    
    	}
    });
    
    });