• 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.ICONS32 = {
    18.       'ic00': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAeZJREFUeNpi/P//P8NAAiaGAQbDzgFRQLwFiF8BMShu7wHxIiA2Q1MnCsSZYBYoDQCxJRDrQtnkYFEgPvwfP+iCqg0E4ldA7AROf1DBaUC8C4iZybCcDYgv/ScOPITSB2D6GaG54DwQGwDxDiAOBeIvJAR7PhBPIDGqsqDRcBPmi3tIrrwBDSZiQ+Dkf/JAI3IUHMOiAGRwCDSI8TngJ7mWIzugHY/it0A8E4j9gJgfiwO+kWj5H2T9sDSgAsRXgZiNiPg7AsT7oPQFID4JxIokxP9TIJaB85Bck/+fPuAwcgggF0QTgbiVDoXfO2QOC5TeApWwoYMDHmFzwGUgrqBT8X8TmQNLhPzQxKROBwcYQhMvigNAQAuIj0EdQyvwApoD/mKrDa8BsTmUphVYiWw5ejaEYU4gnk+D7AcqgNTR7WNBc6ETECfQKDesRE+AuEIgnMzyHR/4DMTS2OoSXBWMMbRWpBZIxlWZ4avlOKG11nMKLZ+ArzYlpr63pMDypYRaWYQsB1XBH2jhc2y5QAVaCBlAS8QQEqtZGHgNxLnQVE8YAF1hD20kUgOsg7aQiW7UInNsgHg1mUG+EZpWSG7SM2LpGzIDsSsUm0HrCCEk+e/Q4voUUuvoBbmlE+No53SgHQAQYABi53bBk19gcAAAAABJRU5ErkJggg==',
    19.       'ic01': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAftJREFUeNrEl89LQkEQx/eVCIGgePIqdA2EQDACIejUKQj6D4KgP0AwOkjQv9E1BKOTUBBCV7sEHYIgiAeCYCR2MYxt1mZjWnefu7ovB764zv6Yj09nnGWcc6aoDLoChdyfhXhmWY2nBq/w+K1iAhB0o38AEDE2dQB3ngMxjaS1pC8YU/zYOyjN/Fmg8clgfVBmvIgAcObXogB+55fYgm3hAIkYz+ZxPYEPUA20gR8ggeMazjliTqZIlIn0yRtSjOFcyyVNXQAaEYFVNXwD9EApTaAk6BRrfYjjJK7tzQqgA6oaPmkaA5ZATVx7hnNVQ2W0BhgSX8Hy0ddBXRwXlPo/F0DSEmCNAKRtnkBUGr6R8YplUj2BznH8Rfx9lzog/5BeiS9vCSCCHuN4lfif8TVlAyBpb4lvxwHgU7PnhhSxqYVIvi8RX9eQhialcI+00iw/QqE28dcdAOpkX9vQlFgBFJVsuLYoxU2yfohnzAwgdKCk0wB0ohxcRN9AWXsY0ZZZAwgdOTasI9zDfAEw7GQfLII/0q53GoCuJwwi0mwZtAvax9qwjv570AvoAnSpFCFToxKYmtJMVOWa00QhGpiaUhl0K8Y2bXuiIGkuJuI7zDrkvK2yePafi4npaiaaiz1QzkPgHJ4VTruaLfxyql7POx6DdkzX828BBgC1EO0f4E9h/QAAAABJRU5ErkJggg==',
    20.       'ic02': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAcNJREFUeNrsl79KA0EQxnMqASurVAFBEAKBVIKFCKkUu5R5AMHKB0hho28hWMuBIFxhlUaxEAQrq0AgECJCQiQBQQTD+S18gWXd29vdHLnGgR/h5l8muzN7myCO40KesuIZVwcRGJCIOncRK+BIK06Wlms+k7EMQjAgx6AOfgwFCNs+fedxIXM5FVABYyW5SPwYp8s9fWURuaouBdxoEhfBxKKACX1VudV9V1ITHizQ2KugaJvTZQp2wKuF3wuoLTqGbY2uCc7AzJBvRp+mZU6nJvwGNYsxrNFXbcKK7xi+E3mcxDhGki2iLi3uD0HeR/Ga8rwJjthwW6AM9sA62CUlsA02pGYTzTkFXTACz+QLXIEOn9vUJfbAWLOvVcv5150HVU0vGM+BjmaVxCr0PFa3x1hZRmlj2NUkEtvS9yigz1hZ3nwLyGoF+mkF9DLegtxXwLmApCb07QHnLfgAFxltgVrAA3iyfRecK/MrjtNTMLSY/yF9Q0l3yTuC07tAl7jEi0WSCNuJptCCz7tAZwgMtrndFJfZtTz3/wX/BSylgAa4A5/8bFjmdIrzvRGZpmApW3DIXzfliXdNnbPkfif8FWAAK308Gia1hSIAAAAASUVORK5CYII=',
    21.       'ic03': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAVdJREFUeNpi/P//P8NAAiaGAQaUOuA/FNPFASCLPiDxE6D0Asq8AEwDRGIYgPEfQvlySGJCULG3xJpLbAisgNIRSGJnobQxkthGKO1P7SjYAcRfgNgGiJmhYqFAvBiIVwNxLFRsLlRdOJI6qkWBLjR49yKJiULFXhFQR3EUgAAnlOZBEvsLpZF9+wtKS9MiEX5DE0uDis9EEnsOFZMgxlxGCktCmGZGcg1gobAgYqS0JGTB4ht6AcZhUReMOmDUAVR1wEc62vsFmwPu09EBd7A5YBMdHQC3C7kuEALi21CaluAdEKtCaZQQeAdt8fyloeUgs6NhluOqjs2A+NJ/6oNLULNR7MNVT7MBcREQHwDizxRY+hlqRhHUTAZiHYCOt2BpARPTfNtOrQYJqD/AT0acg5pn7NQoCY+TmegOUqtNKA3Eq4H4J5Fx/xOqXprWbcKhXxkBBBgAsb4Y2yiT2McAAAAASUVORK5CYII=',
    22.       'ic04': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAVpJREFUeNpi/P//PwMZAJcmRlINYoLSdUiG/icC43MYMXr/Q+1kYISGwH8kH5AVJCQAZDsYYSHQxEB/0IQcAgMGWEhMZNQIfqyJcNCFAKnZiuwQG/QhQPMUOuAhQI4DBIDYFohnUcUFoHIAC0YGf4C4F4iNoXxkdeH/SQMYdhFyAMhyezRxdLUrcBmOxTwMOUJR0AHEBwmomU5ERYQ7n+MoimGCSkB8H00cvWzgAeLP5JaEhBzADsS/iMyWjERkZ5KLYmksliBjJSLbAmRnwygK5SnOht+A2BKHGjOoPK4UTpVsCMuKXUBsAJUzgPL//CcdYNhFKBGO3PYA40A6gB6NRMZBHQWM9HQAKSHgjVSybcEivwVJ3pvSgggdswHxbWhe/gnEKljUqEDl/kPVshFjNrEOqEYqTFrwqGtBUldNLQeQ4jNiQopkB2xB8pU3Eeq9kdRvIaQeIMAADRicX6Vy96oAAAAASUVORK5CYII=',
    23.       'ic05': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAY1JREFUeNpi/P//P8NAAiYktj0QnwTi/zTGJ6F2gQEjUgg8B2IJOnn8BRBLojuA3nHBiB4FA54GRh2AC2wC4gU0cwEoEUIxLmADxPz/8QMnJHPwYSckPWAxFgJZ5QiU/g7EHUCsCMQ2QCyNppaNSP+yERsCk4GYB4cvOIH453/KAc4QOA7EuVA2DxDnA7EcEL8G4rNALEqCjwkCbA5Yj8QuBeK6gcwFO6A+JwScoSUbIexMjANCgJgZKTpAZbY/NDv+JTpxUZgItwOxOpYEKAHEq/9TB4DNJFQOHADiBLQcwQzEJ+nlABh4ixYiRdRyALF1gRAQGyDxv1MrEWLLhmuA+Bq0xOMH4ptAfAEqDgMetEyENgTK8zRqJkJsIeANdSnI50+hYqBsGQvEUUDsStVmERFNMlsgvgzEHwaqSaaOlgApKRWJSoToYA6JPmMjRW60VYzugINQTC8+RhTAEslepARFKz4jeiJcBsT7oOx90LxPK/5ibCEASqG/oGwnJI204MPtYhzo7jlAgAEAS1s0yEiExxYAAAAASUVORK5CYII=',
    24.       'ic06': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAc9JREFUeNrslzFLA0EQhS8GBMEqkCoQCAQCQuAgVSSVNoIiBAJW/gDBKq0gCLZWVlZCbAJ2YmEZSJVKSKVYRQKCEDiIWCnrG5jAOuxebk/JFjrwNbc3M293Z+duM0qpwKctBZ7tTwjogJJtMLOAGhiBLNgEj762oAD6IPRZA3nQA/VvT2kLmK6Kt7b2riQLjkGk5tsUbMx89QBJ7Mwi4FK52TvY1gUEDs6HIvm+SmdjKWCa0PED1Nmn4uCnWzSLoQtoJ9zDCciBZXCfIjn512QNxLEKWuCVAxzw83ND8BdQFv76pChGqI8nETCjCDpcsLuW2e0Z/CJN3JocdxGgC5kYkl9b3icBI1Ayjbsmp9n3DclpafMWHzolBVtMVwEnlqVvzVmx4DcENPgISuvyeNniR8t/y8WcWkCeA0kb8ZGscF0ULQLIBqZtSpKczuyDpSFRT18BQ37WM+y3LvxJipSNaOLQUE7Z78KxEdFxrJoEuCQfcCfMOfrp3bAhBUQJnaei4GopRYzTrAB9RpuWOnERQZPYkgKOLJWuV3wtplhDS7Ga4lR/0opd0Sc1lKdgkf+Ed2AdPPv4Kb0CO+DNx72gCW7Ap6+Lyf/dMNa+BBgANQljAQT+NQgAAAAASUVORK5CYII=',
    25.       'ic07': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAYlJREFUeNrsVsFqwkAQNVoCAUvBa8E/EPyJQn6i10JBEDwJvXrth/TuBwR6EixCerF3Cz1G9JJeprMwgWHJZmdiQhD64LFhM/N2MrthXwAAvS7Rr5ETImfIBJkTE5oL1WqmAwreI3fgxo5ixJqaxUNkCn6kFCvS1WzBE3IiiJtQrAjBNR1Cc9hAyLyNDmhbFUiCbpoW1EJTQCsd6Pc6Rudb4OrAilq+srZAwyot719wQg6RZ+TthWegTMtbAJQI1S0AqrbRtQVH6/Yz+FUsfqZxWDInKuCHPY9p/FAU8GnlGnxrCvhizzGNb4oCitgHh6bXDzxa1+ugxnU8sOKfNX7gDpmx5BkzJKln8cKQzNl8RpoqQ7JkAjkyZsbEiCfs/TvNFUYkppwCyzqOyIhtrS98RUYVORHFcGyrciQe8GAJ7pEL5JTFTWlub8UefB5R4tvGyA3osaHcRkypaeGLdTBdyCg2atoVG47oj1iXLLymdyON5iWmFJq4rjs3JFfliKCNLfn3hH8CDABg4XbpmFgBpAAAAABJRU5ErkJggg==',
    26.       'ic08': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAXBJREFUeNpi/P//PwOVgToQpwGxPRAbQMUuAPFBIJ4FxDdRVIMcQEVcBMTf/uMG36Bq4HqoZTEbEG//TzzYDtVDNQdM+E866KWWA3SB+A+a4RuB2AmIRaHYCSqGDEB6tGjh+0V41M5HDwVGKuSCG9CUDwOSQPwCh1oJIH6OxL9GDQf8BGI2JD4jAfXIFn6khgPQDSDFAQxMDAMMRh0w6gBaOECUFDkmaB5uAeIn0CxCKkYHr6BmtaCVDyDwGppNERhYDrT/px1oJ1SUgwqiVwSCjRIA8rEYoTRAjOVPgTgCiGWgOAIqRkl6gLeICIEbQCyEJfhAYleJ0I83CohxQAgeAwIpdQDjf8K1kQCo1sIhxwPEnwnoZxzyBZETHjlXil1ARBxepWUiJCYNwLKhDJoYqLSTJkIv3jRArAOwGUSuPrIToTQONt1qwznQVq0ElE0VMCjqgrk0zOYLiMmGbNB+2nMqVsPPoWayEcqGAAEGAHnNnEOZpvtRAAAAAElFTkSuQmCC',
    27.       'ic09': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAXVJREFUeNpi/P//P8NAAiaGAQa0doA9EG8E4idQvBEqhgCgKKARrviPG1TA1NHKcnsg/oPHASA5G1o64PB/wuAASC0jjXLBByDmJ6DmIxAL0CIRugIxJxHqmEEEC5UsVQTiBCBOBmJpIvWcpTQX8ANxGpHxTdVE6AHES4H4Gw7D3wLxZCDuJScbgrLPRiB+AsUboWLqQNwOxM/x+AikNhCI2bCY9xyKYeYxYHNABRlBeQmIi4BYlNyoJLbgQAavoMGrS40yg5SC4wMQ+wExMzULLVhBRHTBMZC1ISctq+PLRKhlA+Ib0AKHmWouICMRgsA9aCHERq1ESCgbroMmQnQAKitygJiTGg4gVHCAit5qHA55hcMhuAo2BkoaJDCHvMXhEFDBxEOPFhEP1LJXOOoDurWIOKHB/4TEYvwAtZtkbNCccY9IB3ygVZMMVEa8JaJk/QLEvLRokv0lsmA7S8t+wYA3ywe8Y0J0i4hW/YKh0zsGCDAAVxkSh4Kf2goAAAAASUVORK5CYII=',
    28.       'ic10': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAARJJREFUeNpi/P//P8NAAiaGAQakOIANiIuAeDIQ62KR14XKFUHVEgdAUUAk7vqPAB+AWAhJTggqBgPtxJpLrOUqQPzzPyowQ5I3Q5P7CdVDNQdsQbPgNhAzI8kzQ8WQwRZqOcD7PybwpkAdSQ5gI9Fn2EKKjRIHFJEYtyC5P2h6ioh1gDQQb8RiADXBH6gd0tgcsOs//cABmL2MSEXxZyDmoVMB+AuI2dFLwuN0LIGPYysJ5YB4Ox2CfzvULowoGDSV0StQwNAIvyLGAR9p6OGPow4g1wHOUEypOIbZLEQ6YB8OH5EqPpoGRh0w+BxAbC7wwGEgqeIYZmOrjMyA+CSNQsAciE+NpgFCUTCyescAAQYAyd4rc65oVvYAAAAASUVORK5CYII=',
    29.       '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'
    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="2">2</option>
    60.       <option value="3">3</option>
    61.       <option value="4">4</option>
    62.       <option value="5">5</option>
    63.       <option value="6">6</option>
    64.       <option value="7">7</option>
    65.       <option value="8">8</option>
    66.       <option value="9">9</option>
    67.       <option value="10">10</option>
    68.       <option value="11">11</option>
    69.       <option value="12" selected="selected">12</option>
    70.     </select> elements,
    71.     <select id="a">
    72.       <option value="90">90</option>
    73.       <option value="180">180</option>
    74.       <option value="270">270</option>
    75.       <option value="360" selected="selected">360</option>
    76.     </select> aperture, from
    77.     <select id="ra">
    78.       <option value="0" selected="selected">0</option>
    79.       <option value="45">45</option>
    80.       <option value="90">90</option>
    81.       <option value="135">135</option>
    82.       <option value="180">180</option>
    83.       <option value="225">225</option>
    84.       <option value="270">270</option>
    85.       <option value="315">315</option>
    86.     </select> deg,
    87.     <select id="an">
    88.       <option value="-1">no animation</option>
    89.       <option value="0">effect 0</option>
    90.       <option value="1">effect 1</option>
    91.       <option value="2">effect 2</option>
    92.       <option value="3" selected="selected">effect 3</option>
    93.       <option value="4">effect 4</option>
    94.     </select>,
    95.     <select id="s">
    96.       <option value="0">no-sequence</option>
    97.       <option value="1" selected="selected">sequenced</option>
    98.     </select>
    99.     <button id="r">Render</button>
    100.   </div>
    101.  
    102.   <div id="zc"></div>
    103.  
    104.   <script>
    105.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    106.     var aPalette = [
    107.       '#F6842E', '#FBAC33', '#8AC340', '#46B863', '#41BC9F', '#29C2EC',
    108.       '#387EC3', '#5253A3', '#764199', '#962871', '#C87F8A', '#F14F42'
    109.     ];
    110.     var aIcons = [
    111.       'ic00', 'ic01', 'ic02', 'ic03', 'ic04', 'ic05',
    112.       'ic06', 'ic07', 'ic08', 'ic09', 'ic10', 'ic11'
    113.     ];
    114.     var aText = [
    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.       'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.', 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
    118.       'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.', 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
    119.       'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.', 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
    120.       'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.', 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.'
    121.     ];
    122.     var aTooltipText = [
    123.       'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum',
    124.       'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum'
    125.     ];
    126.  
    127.     var render = function() {
    128.  
    129.       var cdata = {
    130.         resources: [{
    131.           type: 'css',
    132.           url: 'https://fonts.googleapis.com/css?family=Exo+2'
    133.         }],
    134.         type: 'pie',
    135.         plotarea: {
    136.           margin: 0
    137.         },
    138.         scaleR: {
    139.           aperture: parseInt(a.value, 10),
    140.           refAngle: parseInt(ra.value, 10)
    141.         },
    142.         plot: {
    143.           detach: false,
    144.           borderWidth: 0,
    145.           borderColor: '#fff',
    146.           slice: '25%',
    147.           pieTransform: 'bite=10',
    148.           hoverState: {
    149.             visible: false
    150.           }
    151.         },
    152.         series: []
    153.       };
    154.  
    155.       if (an.value !== '-1') {
    156.         cdata['plot'].animation = {
    157.           speed: 200,
    158.           method: 0,
    159.           effect: parseInt(an.value, 10),
    160.           sequence: parseInt(s.value, 10)
    161.         };
    162.       }
    163.  
    164.       var items = parseInt(n.value, 10);
    165.  
    166.       for (var i = 0; i < items; i++) {
    167.         var no = i + 1;
    168.         cdata['series'].push({
    169.           values: [1],
    170.           tooltipText: aTooltipText[i],
    171.           dataNo: ((no <= 9) ? '0' + no : no),
    172.           valueBox: [{
    173.               width: 40,
    174.               height: 40,
    175.               placement: 'fixed=95%;5',
    176.               borderRadius: 23,
    177.               fontSize: 27,
    178.               shadow: false,
    179.               color: '#000',
    180.               decimals: 0,
    181.               fontFamily: '"Exo 2"',
    182.               text: '%data-no'
    183.             },
    184.             {
    185.               width: 32,
    186.               height: 32,
    187.               placement: 'fixed=10%;50%',
    188.               backgroundColor: 'none',
    189.               shadow: false,
    190.               backgroundImage: ICONS32[aIcons[i]],
    191.               backgroundRepeat: 'no-repeat',
    192.               text: ' '
    193.             },
    194.             {
    195.               align: 'left',
    196.               placement: 'fixed=60%;50%',
    197.               backgroundColor: 'none',
    198.               shadow: false,
    199.               fontSize: 10,
    200.               text: aText[i]
    201.             }
    202.           ],
    203.           backgroundColor: aPalette[i],
    204.           gradientColors: [aPalette[i], aPalette[i], '#eee', '#eee', aPalette[i], aPalette[i]].join(' '),
    205.           gradientStops: [0.001, 0.40, 0.41, 0.45, 0.46, 0.99].join(' ')
    206.         });
    207.       }
    208.  
    209.       zingchart.render({
    210.         id: 'zc',
    211.         width: 600,
    212.         height: 600,
    213.         output: 'svg',
    214.         data: cdata,
    215.         events: {
    216.           animation_end: function(p) {
    217.             if ($('#an').val() !== '-1') {
    218.               addElements(p);
    219.             }
    220.           },
    221.           load: function(p) {
    222.             if ($('#an').val() === '-1') {
    223.               addElements(p);
    224.             }
    225.           }
    226.         }
    227.       });
    228.  
    229.     }
    230.  
    231.     window.addEventListener('load', function() {
    232.  
    233.       WebFont.load({
    234.         google: {
    235.           families: ['Exo 2']
    236.         },
    237.         active: function() {
    238.  
    239.           r.addEventListener('click', function() {
    240.             render();
    241.           });
    242.  
    243.           var _cpoint_ = function(iX, iY, iR, iAngle) {
    244.             return [iX + iR * Math.cos(iAngle * 2 * Math.PI / 360), iY + iR * Math.sin(iAngle * 2 * Math.PI / 360)];
    245.           }
    246.  
    247.           window.addElements = function(p) {
    248.             var iPlots = zingchart.exec(p.id, 'getplotlength');
    249.             var aObjects = [],
    250.               oInfo;
    251.             for (var i = 0; i < iPlots; i++) {
    252.               oInfo = zingchart.exec(p.id, 'getobjectinfo', {
    253.                 object: 'node',
    254.                 plotindex: i,
    255.                 nodeindex: 0
    256.               });
    257.               var iSlice = oInfo.size * oInfo.slice;
    258.               var aCP = _cpoint_(oInfo.x, oInfo.y, (iSlice + oInfo.size) / 2, oInfo.angleStart);
    259.               aObjects.push({
    260.                 id: 'sh' + i,
    261.                 anchor: 'c',
    262.                 x: aCP[0],
    263.                 y: aCP[1],
    264.                 width: (oInfo.size - iSlice) - 2,
    265.                 height: 20,
    266.                 backgroundColor: '#ccc',
    267.                 angle: oInfo.angleStart,
    268.                 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)',
    269.                 gradientStops: '0.01 0.5 0.51 0.6 0.7 0.8 0.9 0.99'
    270.               });
    271.             }
    272.             aObjects.push({
    273.               x: oInfo.x,
    274.               y: oInfo.y,
    275.               width: 1.75 * oInfo.slice * oInfo.size,
    276.               height: 60,
    277.               fontFamily: '"Exo 2"',
    278.               fontSize: 47,
    279.               paddingLeft: 5,
    280.               align: 'left',
    281.               fontWeight: 900,
    282.               color: '#F14F42',
    283.               anchor: 'c',
    284.               text: iPlots
    285.             }, {
    286.               x: oInfo.x,
    287.               y: oInfo.y,
    288.               width: 1.75 * oInfo.slice * oInfo.size,
    289.               height: 60,
    290.               paddingLeft: 55,
    291.               fontFamily: '"Exo 2"',
    292.               fontSize: 11,
    293.               align: 'left',
    294.               fontWeight: 600,
    295.               color: '#000',
    296.               anchor: 'c',
    297.               text: 'OPTIONS<br>INFOGRAPHIC<br>TEMPLATE'
    298.             });
    299.             zingchart.exec(p.id, 'addobject', {
    300.               type: 'label',
    301.               data: aObjects
    302.             });
    303.           };
    304.  
    305.           render();
    306.  
    307.         }
    308.       });
    309.  
    310.     });
    311.   </script>
    312. </body>
    313.  
    314. </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.ICONS32 = {
    18.       'ic00': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAeZJREFUeNpi/P//P8NAAiaGAQbDzgFRQLwFiF8BMShu7wHxIiA2Q1MnCsSZYBYoDQCxJRDrQtnkYFEgPvwfP+iCqg0E4ldA7AROf1DBaUC8C4iZybCcDYgv/ScOPITSB2D6GaG54DwQGwDxDiAOBeIvJAR7PhBPIDGqsqDRcBPmi3tIrrwBDSZiQ+Dkf/JAI3IUHMOiAGRwCDSI8TngJ7mWIzugHY/it0A8E4j9gJgfiwO+kWj5H2T9sDSgAsRXgZiNiPg7AsT7oPQFID4JxIokxP9TIJaB85Bck/+fPuAwcgggF0QTgbiVDoXfO2QOC5TeApWwoYMDHmFzwGUgrqBT8X8TmQNLhPzQxKROBwcYQhMvigNAQAuIj0EdQyvwApoD/mKrDa8BsTmUphVYiWw5ejaEYU4gnk+D7AcqgNTR7WNBc6ETECfQKDesRE+AuEIgnMzyHR/4DMTS2OoSXBWMMbRWpBZIxlWZ4avlOKG11nMKLZ+ArzYlpr63pMDypYRaWYQsB1XBH2jhc2y5QAVaCBlAS8QQEqtZGHgNxLnQVE8YAF1hD20kUgOsg7aQiW7UInNsgHg1mUG+EZpWSG7SM2LpGzIDsSsUm0HrCCEk+e/Q4voUUuvoBbmlE+No53SgHQAQYABi53bBk19gcAAAAABJRU5ErkJggg==',
    19.       'ic01': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAftJREFUeNrEl89LQkEQx/eVCIGgePIqdA2EQDACIejUKQj6D4KgP0AwOkjQv9E1BKOTUBBCV7sEHYIgiAeCYCR2MYxt1mZjWnefu7ovB764zv6Yj09nnGWcc6aoDLoChdyfhXhmWY2nBq/w+K1iAhB0o38AEDE2dQB3ngMxjaS1pC8YU/zYOyjN/Fmg8clgfVBmvIgAcObXogB+55fYgm3hAIkYz+ZxPYEPUA20gR8ggeMazjliTqZIlIn0yRtSjOFcyyVNXQAaEYFVNXwD9EApTaAk6BRrfYjjJK7tzQqgA6oaPmkaA5ZATVx7hnNVQ2W0BhgSX8Hy0ddBXRwXlPo/F0DSEmCNAKRtnkBUGr6R8YplUj2BznH8Rfx9lzog/5BeiS9vCSCCHuN4lfif8TVlAyBpb4lvxwHgU7PnhhSxqYVIvi8RX9eQhialcI+00iw/QqE28dcdAOpkX9vQlFgBFJVsuLYoxU2yfohnzAwgdKCk0wB0ohxcRN9AWXsY0ZZZAwgdOTasI9zDfAEw7GQfLII/0q53GoCuJwwi0mwZtAvax9qwjv570AvoAnSpFCFToxKYmtJMVOWa00QhGpiaUhl0K8Y2bXuiIGkuJuI7zDrkvK2yePafi4npaiaaiz1QzkPgHJ4VTruaLfxyql7POx6DdkzX828BBgC1EO0f4E9h/QAAAABJRU5ErkJggg==',
    20.       'ic02': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAcNJREFUeNrsl79KA0EQxnMqASurVAFBEAKBVIKFCKkUu5R5AMHKB0hho28hWMuBIFxhlUaxEAQrq0AgECJCQiQBQQTD+S18gWXd29vdHLnGgR/h5l8muzN7myCO40KesuIZVwcRGJCIOncRK+BIK06Wlms+k7EMQjAgx6AOfgwFCNs+fedxIXM5FVABYyW5SPwYp8s9fWURuaouBdxoEhfBxKKACX1VudV9V1ITHizQ2KugaJvTZQp2wKuF3wuoLTqGbY2uCc7AzJBvRp+mZU6nJvwGNYsxrNFXbcKK7xi+E3mcxDhGki2iLi3uD0HeR/Ga8rwJjthwW6AM9sA62CUlsA02pGYTzTkFXTACz+QLXIEOn9vUJfbAWLOvVcv5150HVU0vGM+BjmaVxCr0PFa3x1hZRmlj2NUkEtvS9yigz1hZ3nwLyGoF+mkF9DLegtxXwLmApCb07QHnLfgAFxltgVrAA3iyfRecK/MrjtNTMLSY/yF9Q0l3yTuC07tAl7jEi0WSCNuJptCCz7tAZwgMtrndFJfZtTz3/wX/BSylgAa4A5/8bFjmdIrzvRGZpmApW3DIXzfliXdNnbPkfif8FWAAK308Gia1hSIAAAAASUVORK5CYII=',
    21.       'ic03': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAVdJREFUeNpi/P//P8NAAiaGAQaUOuA/FNPFASCLPiDxE6D0Asq8AEwDRGIYgPEfQvlySGJCULG3xJpLbAisgNIRSGJnobQxkthGKO1P7SjYAcRfgNgGiJmhYqFAvBiIVwNxLFRsLlRdOJI6qkWBLjR49yKJiULFXhFQR3EUgAAnlOZBEvsLpZF9+wtKS9MiEX5DE0uDis9EEnsOFZMgxlxGCktCmGZGcg1gobAgYqS0JGTB4ht6AcZhUReMOmDUAVR1wEc62vsFmwPu09EBd7A5YBMdHQC3C7kuEALi21CaluAdEKtCaZQQeAdt8fyloeUgs6NhluOqjs2A+NJ/6oNLULNR7MNVT7MBcREQHwDizxRY+hlqRhHUTAZiHYCOt2BpARPTfNtOrQYJqD/AT0acg5pn7NQoCY+TmegOUqtNKA3Eq4H4J5Fx/xOqXprWbcKhXxkBBBgAsb4Y2yiT2McAAAAASUVORK5CYII=',
    22.       'ic04': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAVpJREFUeNpi/P//PwMZAJcmRlINYoLSdUiG/icC43MYMXr/Q+1kYISGwH8kH5AVJCQAZDsYYSHQxEB/0IQcAgMGWEhMZNQIfqyJcNCFAKnZiuwQG/QhQPMUOuAhQI4DBIDYFohnUcUFoHIAC0YGf4C4F4iNoXxkdeH/SQMYdhFyAMhyezRxdLUrcBmOxTwMOUJR0AHEBwmomU5ERYQ7n+MoimGCSkB8H00cvWzgAeLP5JaEhBzADsS/iMyWjERkZ5KLYmksliBjJSLbAmRnwygK5SnOht+A2BKHGjOoPK4UTpVsCMuKXUBsAJUzgPL//CcdYNhFKBGO3PYA40A6gB6NRMZBHQWM9HQAKSHgjVSybcEivwVJ3pvSgggdswHxbWhe/gnEKljUqEDl/kPVshFjNrEOqEYqTFrwqGtBUldNLQeQ4jNiQopkB2xB8pU3Eeq9kdRvIaQeIMAADRicX6Vy96oAAAAASUVORK5CYII=',
    23.       'ic05': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAY1JREFUeNpi/P//P8NAAiYktj0QnwTi/zTGJ6F2gQEjUgg8B2IJOnn8BRBLojuA3nHBiB4FA54GRh2AC2wC4gU0cwEoEUIxLmADxPz/8QMnJHPwYSckPWAxFgJZ5QiU/g7EHUCsCMQ2QCyNppaNSP+yERsCk4GYB4cvOIH453/KAc4QOA7EuVA2DxDnA7EcEL8G4rNALEqCjwkCbA5Yj8QuBeK6gcwFO6A+JwScoSUbIexMjANCgJgZKTpAZbY/NDv+JTpxUZgItwOxOpYEKAHEq/9TB4DNJFQOHADiBLQcwQzEJ+nlABh4ixYiRdRyALF1gRAQGyDxv1MrEWLLhmuA+Bq0xOMH4ptAfAEqDgMetEyENgTK8zRqJkJsIeANdSnI50+hYqBsGQvEUUDsStVmERFNMlsgvgzEHwaqSaaOlgApKRWJSoToYA6JPmMjRW60VYzugINQTC8+RhTAEslepARFKz4jeiJcBsT7oOx90LxPK/5ibCEASqG/oGwnJI204MPtYhzo7jlAgAEAS1s0yEiExxYAAAAASUVORK5CYII=',
    24.       'ic06': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAc9JREFUeNrslzFLA0EQhS8GBMEqkCoQCAQCQuAgVSSVNoIiBAJW/gDBKq0gCLZWVlZCbAJ2YmEZSJVKSKVYRQKCEDiIWCnrG5jAOuxebk/JFjrwNbc3M293Z+duM0qpwKctBZ7tTwjogJJtMLOAGhiBLNgEj762oAD6IPRZA3nQA/VvT2kLmK6Kt7b2riQLjkGk5tsUbMx89QBJ7Mwi4FK52TvY1gUEDs6HIvm+SmdjKWCa0PED1Nmn4uCnWzSLoQtoJ9zDCciBZXCfIjn512QNxLEKWuCVAxzw83ND8BdQFv76pChGqI8nETCjCDpcsLuW2e0Z/CJN3JocdxGgC5kYkl9b3icBI1Ayjbsmp9n3DclpafMWHzolBVtMVwEnlqVvzVmx4DcENPgISuvyeNniR8t/y8WcWkCeA0kb8ZGscF0ULQLIBqZtSpKczuyDpSFRT18BQ37WM+y3LvxJipSNaOLQUE7Z78KxEdFxrJoEuCQfcCfMOfrp3bAhBUQJnaei4GopRYzTrAB9RpuWOnERQZPYkgKOLJWuV3wtplhDS7Ga4lR/0opd0Sc1lKdgkf+Ed2AdPPv4Kb0CO+DNx72gCW7Ap6+Lyf/dMNa+BBgANQljAQT+NQgAAAAASUVORK5CYII=',
    25.       'ic07': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAYlJREFUeNrsVsFqwkAQNVoCAUvBa8E/EPyJQn6i10JBEDwJvXrth/TuBwR6EixCerF3Cz1G9JJeprMwgWHJZmdiQhD64LFhM/N2MrthXwAAvS7Rr5ETImfIBJkTE5oL1WqmAwreI3fgxo5ixJqaxUNkCn6kFCvS1WzBE3IiiJtQrAjBNR1Cc9hAyLyNDmhbFUiCbpoW1EJTQCsd6Pc6Rudb4OrAilq+srZAwyot719wQg6RZ+TthWegTMtbAJQI1S0AqrbRtQVH6/Yz+FUsfqZxWDInKuCHPY9p/FAU8GnlGnxrCvhizzGNb4oCitgHh6bXDzxa1+ugxnU8sOKfNX7gDpmx5BkzJKln8cKQzNl8RpoqQ7JkAjkyZsbEiCfs/TvNFUYkppwCyzqOyIhtrS98RUYVORHFcGyrciQe8GAJ7pEL5JTFTWlub8UefB5R4tvGyA3osaHcRkypaeGLdTBdyCg2atoVG47oj1iXLLymdyON5iWmFJq4rjs3JFfliKCNLfn3hH8CDABg4XbpmFgBpAAAAABJRU5ErkJggg==',
    26.       'ic08': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAXBJREFUeNpi/P//PwOVgToQpwGxPRAbQMUuAPFBIJ4FxDdRVIMcQEVcBMTf/uMG36Bq4HqoZTEbEG//TzzYDtVDNQdM+E866KWWA3SB+A+a4RuB2AmIRaHYCSqGDEB6tGjh+0V41M5HDwVGKuSCG9CUDwOSQPwCh1oJIH6OxL9GDQf8BGI2JD4jAfXIFn6khgPQDSDFAQxMDAMMRh0w6gBaOECUFDkmaB5uAeIn0CxCKkYHr6BmtaCVDyDwGppNERhYDrT/px1oJ1SUgwqiVwSCjRIA8rEYoTRAjOVPgTgCiGWgOAIqRkl6gLeICIEbQCyEJfhAYleJ0I83CohxQAgeAwIpdQDjf8K1kQCo1sIhxwPEnwnoZxzyBZETHjlXil1ARBxepWUiJCYNwLKhDJoYqLSTJkIv3jRArAOwGUSuPrIToTQONt1qwznQVq0ElE0VMCjqgrk0zOYLiMmGbNB+2nMqVsPPoWayEcqGAAEGAHnNnEOZpvtRAAAAAElFTkSuQmCC',
    27.       'ic09': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAXVJREFUeNpi/P//P8NAAiaGAQa0doA9EG8E4idQvBEqhgCgKKARrviPG1TA1NHKcnsg/oPHASA5G1o64PB/wuAASC0jjXLBByDmJ6DmIxAL0CIRugIxJxHqmEEEC5UsVQTiBCBOBmJpIvWcpTQX8ANxGpHxTdVE6AHES4H4Gw7D3wLxZCDuJScbgrLPRiB+AsUboWLqQNwOxM/x+AikNhCI2bCY9xyKYeYxYHNABRlBeQmIi4BYlNyoJLbgQAavoMGrS40yg5SC4wMQ+wExMzULLVhBRHTBMZC1ISctq+PLRKhlA+Ib0AKHmWouICMRgsA9aCHERq1ESCgbroMmQnQAKitygJiTGg4gVHCAit5qHA55hcMhuAo2BkoaJDCHvMXhEFDBxEOPFhEP1LJXOOoDurWIOKHB/4TEYvwAtZtkbNCccY9IB3ygVZMMVEa8JaJk/QLEvLRokv0lsmA7S8t+wYA3ywe8Y0J0i4hW/YKh0zsGCDAAVxkSh4Kf2goAAAAASUVORK5CYII=',
    28.       'ic10': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAARJJREFUeNpi/P//P8NAAiaGAQakOIANiIuAeDIQ62KR14XKFUHVEgdAUUAk7vqPAB+AWAhJTggqBgPtxJpLrOUqQPzzPyowQ5I3Q5P7CdVDNQdsQbPgNhAzI8kzQ8WQwRZqOcD7PybwpkAdSQ5gI9Fn2EKKjRIHFJEYtyC5P2h6ioh1gDQQb8RiADXBH6gd0tgcsOs//cABmL2MSEXxZyDmoVMB+AuI2dFLwuN0LIGPYysJ5YB4Ox2CfzvULowoGDSV0StQwNAIvyLGAR9p6OGPow4g1wHOUEypOIbZLEQ6YB8OH5EqPpoGRh0w+BxAbC7wwGEgqeIYZmOrjMyA+CSNQsAciE+NpgFCUTCyescAAQYAyd4rc65oVvYAAAAASUVORK5CYII=',
    29.       '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'
    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="2">2</option>
    41.       <option value="3">3</option>
    42.       <option value="4">4</option>
    43.       <option value="5">5</option>
    44.       <option value="6">6</option>
    45.       <option value="7">7</option>
    46.       <option value="8">8</option>
    47.       <option value="9">9</option>
    48.       <option value="10">10</option>
    49.       <option value="11">11</option>
    50.       <option value="12" selected="selected">12</option>
    51.     </select> elements,
    52.     <select id="a">
    53.       <option value="90">90</option>
    54.       <option value="180">180</option>
    55.       <option value="270">270</option>
    56.       <option value="360" selected="selected">360</option>
    57.     </select> aperture, from
    58.     <select id="ra">
    59.       <option value="0" selected="selected">0</option>
    60.       <option value="45">45</option>
    61.       <option value="90">90</option>
    62.       <option value="135">135</option>
    63.       <option value="180">180</option>
    64.       <option value="225">225</option>
    65.       <option value="270">270</option>
    66.       <option value="315">315</option>
    67.     </select> deg,
    68.     <select id="an">
    69.       <option value="-1">no animation</option>
    70.       <option value="0">effect 0</option>
    71.       <option value="1">effect 1</option>
    72.       <option value="2">effect 2</option>
    73.       <option value="3" selected="selected">effect 3</option>
    74.       <option value="4">effect 4</option>
    75.     </select>,
    76.     <select id="s">
    77.       <option value="0">no-sequence</option>
    78.       <option value="1" selected="selected">sequenced</option>
    79.     </select>
    80.     <button id="r">Render</button>
    81.   </div>
    82.  
    83.   <div id="zc"></div>
    84.  
    85. </body>
    86.  
    87. </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: '25%',
    42.       pieTransform: 'bite=10',
    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: 40,
    69.           height: 40,
    70.           placement: 'fixed=95%;5',
    71.           borderRadius: 23,
    72.           fontSize: 27,
    73.           shadow: false,
    74.           color: '#000',
    75.           decimals: 0,
    76.           fontFamily: '"Exo 2"',
    77.           text: '%data-no'
    78.         },
    79.         {
    80.           width: 32,
    81.           height: 32,
    82.           placement: 'fixed=10%;50%',
    83.           backgroundColor: 'none',
    84.           shadow: false,
    85.           backgroundImage: ICONS32[aIcons[i]],
    86.           backgroundRepeat: 'no-repeat',
    87.           text: ' '
    88.         },
    89.         {
    90.           align: 'left',
    91.           placement: 'fixed=60%;50%',
    92.           backgroundColor: 'none',
    93.           shadow: false,
    94.           fontSize: 10,
    95.           text: aText[i]
    96.         }
    97.       ],
    98.       backgroundColor: aPalette[i],
    99.       gradientColors: [aPalette[i], aPalette[i], '#eee', '#eee', aPalette[i], aPalette[i]].join(' '),
    100.       gradientStops: [0.001, 0.40, 0.41, 0.45, 0.46, 0.99].join(' ')
    101.     });
    102.   }
    103.  
    104.   zingchart.render({
    105.     id: 'zc',
    106.     width: 600,
    107.     height: 600,
    108.     output: 'svg',
    109.     data: cdata,
    110.     events: {
    111.       animation_end: function(p) {
    112.         if ($('#an').val() !== '-1') {
    113.           addElements(p);
    114.         }
    115.       },
    116.       load: function(p) {
    117.         if ($('#an').val() === '-1') {
    118.           addElements(p);
    119.         }
    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.  
    138.       var _cpoint_ = function(iX, iY, iR, iAngle) {
    139.         return [iX + iR * Math.cos(iAngle * 2 * Math.PI / 360), iY + iR * Math.sin(iAngle * 2 * Math.PI / 360)];
    140.       }
    141.  
    142.       window.addElements = function(p) {
    143.         var iPlots = zingchart.exec(p.id, 'getplotlength');
    144.         var aObjects = [],
    145.           oInfo;
    146.         for (var i = 0; i < iPlots; i++) {
    147.           oInfo = zingchart.exec(p.id, 'getobjectinfo', {
    148.             object: 'node',
    149.             plotindex: i,
    150.             nodeindex: 0
    151.           });
    152.           var iSlice = oInfo.size * oInfo.slice;
    153.           var aCP = _cpoint_(oInfo.x, oInfo.y, (iSlice + oInfo.size) / 2, oInfo.angleStart);
    154.           aObjects.push({
    155.             id: 'sh' + i,
    156.             anchor: 'c',
    157.             x: aCP[0],
    158.             y: aCP[1],
    159.             width: (oInfo.size - iSlice) - 2,
    160.             height: 20,
    161.             backgroundColor: '#ccc',
    162.             angle: oInfo.angleStart,
    163.             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)',
    164.             gradientStops: '0.01 0.5 0.51 0.6 0.7 0.8 0.9 0.99'
    165.           });
    166.         }
    167.         aObjects.push({
    168.           x: oInfo.x,
    169.           y: oInfo.y,
    170.           width: 1.75 * oInfo.slice * oInfo.size,
    171.           height: 60,
    172.           fontFamily: '"Exo 2"',
    173.           fontSize: 47,
    174.           paddingLeft: 5,
    175.           align: 'left',
    176.           fontWeight: 900,
    177.           color: '#F14F42',
    178.           anchor: 'c',
    179.           text: iPlots
    180.         }, {
    181.           x: oInfo.x,
    182.           y: oInfo.y,
    183.           width: 1.75 * oInfo.slice * oInfo.size,
    184.           height: 60,
    185.           paddingLeft: 55,
    186.           fontFamily: '"Exo 2"',
    187.           fontSize: 11,
    188.           align: 'left',
    189.           fontWeight: 600,
    190.           color: '#000',
    191.           anchor: 'c',
    192.           text: 'OPTIONS<br>INFOGRAPHIC<br>TEMPLATE'
    193.         });
    194.         zingchart.exec(p.id, 'addobject', {
    195.           type: 'label',
    196.           data: aObjects
    197.         });
    198.       };
    199.  
    200.       render();
    201.  
    202.     }
    203.   });
    204.  
    205. });