• Edit
  • Download
    1. <!doctype html>
    2. <html class="zc-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <style>
    9.     .zc-html,
    10.     .zc-body {
    11.       margin: 0;
    12.       padding: 0;
    13.       width: 100%;
    14.       height: 100%;
    15.       background-color: #fff;
    16.     }
    17.  
    18.     .chart--container {
    19.       height: 100%;
    20.       width: 100%;
    21.       min-height: 530px;
    22.     }
    23.  
    24.     .zc-ref {
    25.       display: none;
    26.     }
    27.   </style>
    28. </head>
    29. ​
    30.  
    31. <body class="zc-body">
    32.   <div id="zc" class="chart--container">
    33.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    34.   </div>
    35.   <script>
    36.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    37.     var graph = function(color, label, data, value) {
    38.       return {
    39.         type: 'ring',
    40.         backgroundColor: '#fff',
    41.         plotarea: {
    42.           // Margin around each ring chart
    43.           margin: '0 50'
    44.         },
    45.         plot: {
    46.           slice: '80%', // Ring width,
    47.           detach: false, // Prevent ring piece from detaching on click
    48.           valueBox: [{
    49.               // Percentage text
    50.               type: 'first',
    51.               text: value || `${parseInt(data[0]/(data[0]+data[1])*100)}%`,
    52.               connected: false,
    53.               fontColor: color,
    54.               fontSize: '35px',
    55.               placement: 'center',
    56.               visible: true,
    57.               offsetY: '-65px',
    58.             },
    59.             {
    60.               // Label text
    61.               type: 'first',
    62.               text: label,
    63.               connected: false,
    64.               fontColor: '#718096',
    65.               fontSize: '20px',
    66.               placement: 'center',
    67.               visible: true,
    68.               offsetY: '-25px',
    69.             }
    70.           ],
    71.           animation: {
    72.             // Animation effect
    73.             effect: 3,
    74.             method: 0,
    75.             speed: 300,
    76.             sequence: 1
    77.           }
    78.         },
    79.         labels: [{
    80.           // Fraction text
    81.           text: `${data[0]}/${data[0]+data[1]}`,
    82.           fontColor: color,
    83.           fontSize: '15px',
    84.           fontWeight: 100,
    85.           x: '70%',
    86.           y: '10%',
    87.         }],
    88.         scaleR: {
    89.           // Set to half ring
    90.           refAngle: 180,
    91.           aperture: 180
    92.         },
    93.         tooltip: {
    94.           // Hide tooltip
    95.           visible: false
    96.         },
    97.         series: [{
    98.             // First part of the ring (colored)
    99.             values: [data[0]],
    100.             backgroundColor: color,
    101.           },
    102.           {
    103.             // Remainder of ring
    104.             values: [data[1]],
    105.             backgroundColor: '#EDF2F7',
    106.           }
    107.         ]
    108.       };
    109.     };
    110.  
    111.     var g1 = graph('#1EBAED', 'Participation', [5, 2]);
    112.     var g2 = graph('#29CB6C', 'Goals met', [3, 4]);
    113.     var g3 = graph('#E7183D', 'Blocked', [0, 7]);
    114.     var g4 = graph('#5352ED', 'Mood', [1, 7], '7.1/10');
    115.  
    116.     var myConfig = {
    117.       layout: 'horizontal', // Layout ring charts horizontally
    118.       graphset: [g1, g2, g3, g4],
    119.     };
    120.  
    121.     zingchart.render({
    122.       id: "zc",
    123.       height: '100%',
    124.       width: '100%',
    125.       data: myConfig,
    126.     });
    127.   </script>
    128. </body>
    129.  
    130. </html>
    1. <!doctype html>
    2. <html class="zc-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8. </head>
    9. ​
    10.  
    11. <body class="zc-body">
    12.   <div id="zc" class="chart--container">
    13.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    14.   </div>
    15. </body>
    16.  
    17. </html>
    1. .zc-html,
    2. .zc-body {
    3.   margin: 0;
    4.   padding: 0;
    5.   width: 100%;
    6.   height: 100%;
    7.   background-color: #fff;
    8. }
    9.  
    10. .chart--container {
    11.   height: 100%;
    12.   width: 100%;
    13.   min-height: 530px;
    14. }
    15.  
    16. .zc-ref {
    17.   display: none;
    18. }
    1. var graph = function(color, label, data, value) {
    2.   return {
    3.     type: 'ring',
    4.     backgroundColor: '#fff',
    5.     plotarea: {
    6.       // Margin around each ring chart
    7.       margin: '0 50'
    8.     },
    9.     plot: {
    10.       slice: '80%', // Ring width,
    11.       detach: false, // Prevent ring piece from detaching on click
    12.       valueBox: [{
    13.           // Percentage text
    14.           type: 'first',
    15.           text: value || `${parseInt(data[0]/(data[0]+data[1])*100)}%`,
    16.           connected: false,
    17.           fontColor: color,
    18.           fontSize: '35px',
    19.           placement: 'center',
    20.           visible: true,
    21.           offsetY: '-65px',
    22.         },
    23.         {
    24.           // Label text
    25.           type: 'first',
    26.           text: label,
    27.           connected: false,
    28.           fontColor: '#718096',
    29.           fontSize: '20px',
    30.           placement: 'center',
    31.           visible: true,
    32.           offsetY: '-25px',
    33.         }
    34.       ],
    35.       animation: {
    36.         // Animation effect
    37.         effect: 3,
    38.         method: 0,
    39.         speed: 300,
    40.         sequence: 1
    41.       }
    42.     },
    43.     labels: [{
    44.       // Fraction text
    45.       text: `${data[0]}/${data[0]+data[1]}`,
    46.       fontColor: color,
    47.       fontSize: '15px',
    48.       fontWeight: 100,
    49.       x: '70%',
    50.       y: '10%',
    51.     }],
    52.     scaleR: {
    53.       // Set to half ring
    54.       refAngle: 180,
    55.       aperture: 180
    56.     },
    57.     tooltip: {
    58.       // Hide tooltip
    59.       visible: false
    60.     },
    61.     series: [{
    62.         // First part of the ring (colored)
    63.         values: [data[0]],
    64.         backgroundColor: color,
    65.       },
    66.       {
    67.         // Remainder of ring
    68.         values: [data[1]],
    69.         backgroundColor: '#EDF2F7',
    70.       }
    71.     ]
    72.   };
    73. };
    74.  
    75. var g1 = graph('#1EBAED', 'Participation', [5, 2]);
    76. var g2 = graph('#29CB6C', 'Goals met', [3, 4]);
    77. var g3 = graph('#E7183D', 'Blocked', [0, 7]);
    78. var g4 = graph('#5352ED', 'Mood', [1, 7], '7.1/10');
    79.  
    80. var myConfig = {
    81.   layout: 'horizontal', // Layout ring charts horizontally
    82.   graphset: [g1, g2, g3, g4],
    83. };
    84.  
    85. zingchart.render({
    86.   id: "zc",
    87.   height: '100%',
    88.   width: '100%',
    89.   data: myConfig,
    90. });