• Edit
  • Download
  • <!doctype html>
    <html class="zc-html">
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style>
        .zc-html,
        .zc-body {
          margin: 0;
          padding: 0;
          width: 100%;
          height: 100%;
          background-color: #fff;
        }
    
        .chart--container {
          height: 100%;
          width: 100%;
          min-height: 530px;
        }
    
        .zc-ref {
          display: none;
        }
      </style>
    </head>
    ​
    
    <body class="zc-body">
      <div id="zc" class="chart--container">
        <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
      </div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        var graph = function(color, label, data, value) {
          return {
            type: 'ring',
            backgroundColor: '#fff',
            plotarea: {
              // Margin around each ring chart
              margin: '0 50'
            },
            plot: {
              slice: '80%', // Ring width,
              detach: false, // Prevent ring piece from detaching on click
              valueBox: [{
                  // Percentage text
                  type: 'first',
                  text: value || `${parseInt(data[0]/(data[0]+data[1])*100)}%`,
                  connected: false,
                  fontColor: color,
                  fontSize: '35px',
                  placement: 'center',
                  visible: true,
                  offsetY: '-65px',
                },
                {
                  // Label text
                  type: 'first',
                  text: label,
                  connected: false,
                  fontColor: '#718096',
                  fontSize: '20px',
                  placement: 'center',
                  visible: true,
                  offsetY: '-25px',
                }
              ],
              animation: {
                // Animation effect
                effect: 3,
                method: 0,
                speed: 300,
                sequence: 1
              }
            },
            labels: [{
              // Fraction text
              text: `${data[0]}/${data[0]+data[1]}`,
              fontColor: color,
              fontSize: '15px',
              fontWeight: 100,
              x: '70%',
              y: '10%',
            }],
            scaleR: {
              // Set to half ring
              refAngle: 180,
              aperture: 180
            },
            tooltip: {
              // Hide tooltip
              visible: false
            },
            series: [{
                // First part of the ring (colored)
                values: [data[0]],
                backgroundColor: color,
              },
              {
                // Remainder of ring
                values: [data[1]],
                backgroundColor: '#EDF2F7',
              }
            ]
          };
        };
    
        var g1 = graph('#1EBAED', 'Participation', [5, 2]);
        var g2 = graph('#29CB6C', 'Goals met', [3, 4]);
        var g3 = graph('#E7183D', 'Blocked', [0, 7]);
        var g4 = graph('#5352ED', 'Mood', [1, 7], '7.1/10');
    
        var myConfig = {
          layout: 'horizontal', // Layout ring charts horizontally
          graphset: [g1, g2, g3, g4],
        };
    
        zingchart.render({
          id: "zc",
          height: '100%',
          width: '100%',
          data: myConfig,
        });
      </script>
    </body>
    
    </html>
    <!doctype html>
    <html class="zc-html">
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    ​
    
    <body class="zc-body">
      <div id="zc" class="chart--container">
        <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
      </div>
    </body>
    
    </html>
    .zc-html,
    .zc-body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      background-color: #fff;
    }
    
    .chart--container {
      height: 100%;
      width: 100%;
      min-height: 530px;
    }
    
    .zc-ref {
      display: none;
    }
    var graph = function(color, label, data, value) {
      return {
        type: 'ring',
        backgroundColor: '#fff',
        plotarea: {
          // Margin around each ring chart
          margin: '0 50'
        },
        plot: {
          slice: '80%', // Ring width,
          detach: false, // Prevent ring piece from detaching on click
          valueBox: [{
              // Percentage text
              type: 'first',
              text: value || `${parseInt(data[0]/(data[0]+data[1])*100)}%`,
              connected: false,
              fontColor: color,
              fontSize: '35px',
              placement: 'center',
              visible: true,
              offsetY: '-65px',
            },
            {
              // Label text
              type: 'first',
              text: label,
              connected: false,
              fontColor: '#718096',
              fontSize: '20px',
              placement: 'center',
              visible: true,
              offsetY: '-25px',
            }
          ],
          animation: {
            // Animation effect
            effect: 3,
            method: 0,
            speed: 300,
            sequence: 1
          }
        },
        labels: [{
          // Fraction text
          text: `${data[0]}/${data[0]+data[1]}`,
          fontColor: color,
          fontSize: '15px',
          fontWeight: 100,
          x: '70%',
          y: '10%',
        }],
        scaleR: {
          // Set to half ring
          refAngle: 180,
          aperture: 180
        },
        tooltip: {
          // Hide tooltip
          visible: false
        },
        series: [{
            // First part of the ring (colored)
            values: [data[0]],
            backgroundColor: color,
          },
          {
            // Remainder of ring
            values: [data[1]],
            backgroundColor: '#EDF2F7',
          }
        ]
      };
    };
    
    var g1 = graph('#1EBAED', 'Participation', [5, 2]);
    var g2 = graph('#29CB6C', 'Goals met', [3, 4]);
    var g3 = graph('#E7183D', 'Blocked', [0, 7]);
    var g4 = graph('#5352ED', 'Mood', [1, 7], '7.1/10');
    
    var myConfig = {
      layout: 'horizontal', // Layout ring charts horizontally
      graphset: [g1, g2, g3, g4],
    };
    
    zingchart.render({
      id: "zc",
      height: '100%',
      width: '100%',
      data: myConfig,
    });