• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style></style>
    </head>
    
    <body>
      <div id='myChart'></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        var myConfig = {
          "graphset": [{
            "type": "pie",
            "plotarea": {
              "margin": "40"
            },
            "scale": {
              "sizeFactor": 1
            },
            "plot": {
              "valueBox": {
                "visible": false
              },
              "refAngle": 270,
              "angleStart": 270,
              "detach": false,
              "slice": "100%",
              "totals": [100],
              "animation": {
                "speed": 1000,
                "effect": 2,
                "method": 0
              },
              "hoverState": {
                "visible": false
              }
            },
            "series": [{
                "size": "100%",
                "values": [34],
                "backgroundColor": "#ff9900",
                "borderWidth": 37,
                "borderColor": "#ff9900",
                "angleStart": 270,
                "-angleEnd": 130,
                "text": "Move"
              },
              {
                "size": "75%",
                "values": [76],
                "backgroundColor": "#9933cc",
                "borderWidth": 37,
                "borderColor": "#9933cc",
                "-angleStart": 270,
                "-angleEnd": 110,
                "text": "Exercise"
              },
              {
                "size": "50%",
                "values": [55],
                "backgroundColor": "#66dd33",
                "borderWidth": 37,
                "borderColor": "#66dd33",
                "-angleStart": 270,
                "-angleEnd": 220,
                "text": "Stand"
              }
            ],
            "tooltip": {
              "x": 200,
              "y": 190,
              "width": 120,
              "fontSize": 19,
              "padding": 30,
              "anchor": "c",
              "fontFamily": "Lucida Sans Unicode",
              "text": "%plot-text<br><span style='font-size:31px;font-weight:bold;color:%color;'>%node-percent-value%</span>",
              "color": "#333",
              "align": "left",
              "borderWidth": 0,
              "backgroundColor": "none"
            },
            "shapes": [{
                "type": "pie",
                "flat": true,
                "x": 200,
                "y": 200,
                "backgroundColor": "#ff9900",
                "alpha": 0.25,
                "size": 180,
                "slice": 140,
                "placement": "bottom"
              },
              {
                "type": "pie",
                "flat": true,
                "x": 200,
                "y": 200,
                "backgroundColor": "#9933cc",
                "alpha": 0.25,
                "size": 140,
                "slice": 100,
                "placement": "bottom"
              },
              {
                "type": "pie",
                "flat": true,
                "x": 200,
                "y": 200,
                "backgroundColor": "#66dd33",
                "alpha": 0.25,
                "size": 100,
                "slice": 60,
                "placement": "bottom"
              },
              {
                "type": "line",
                "lineWidth": 3,
                "lineCap": "round",
                "lineColor": "#000",
                "points": [
                  [0, 0],
                  [22, 0],
                  null, [10, -10],
                  [22, 0],
                  [10, 10]
                ],
                "offsetX": 190,
                "offsetY": 42
              },
              {
                "type": "line",
                "lineWidth": 3,
                "lineCap": "round",
                "lineColor": "#000",
                "points": [
                  [0, 0],
                  [22, 0],
                  null, [10, -10],
                  [22, 0],
                  [10, 10],
                  null, [20, -10],
                  [32, 0],
                  [20, 10]
                ],
                "offsetX": 190,
                "offsetY": 80
              },
              {
                "type": "line",
                "lineWidth": 3,
                "lineCap": "round",
                "lineColor": "#000",
                "points": [
                  [0, 0],
                  [0, 22],
                  null, [-10, 12],
                  [0, 0],
                  [10, 12]
                ],
                "offsetX": 200,
                "offsetY": 110
              }
            ]
          }]
        };
    
        zingchart.render({
          id: 'myChart',
          data: myConfig,
          height: 400,
          width: 400
        });
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    
    <body>
      <div id='myChart'></div>
    </body>
    
    </html>
    
          
    var myConfig = {
      "graphset": [{
        "type": "pie",
        "plotarea": {
          "margin": "40"
        },
        "scale": {
          "sizeFactor": 1
        },
        "plot": {
          "valueBox": {
            "visible": false
          },
          "refAngle": 270,
          "angleStart": 270,
          "detach": false,
          "slice": "100%",
          "totals": [100],
          "animation": {
            "speed": 1000,
            "effect": 2,
            "method": 0
          },
          "hoverState": {
            "visible": false
          }
        },
        "series": [{
            "size": "100%",
            "values": [34],
            "backgroundColor": "#ff9900",
            "borderWidth": 37,
            "borderColor": "#ff9900",
            "angleStart": 270,
            "-angleEnd": 130,
            "text": "Move"
          },
          {
            "size": "75%",
            "values": [76],
            "backgroundColor": "#9933cc",
            "borderWidth": 37,
            "borderColor": "#9933cc",
            "-angleStart": 270,
            "-angleEnd": 110,
            "text": "Exercise"
          },
          {
            "size": "50%",
            "values": [55],
            "backgroundColor": "#66dd33",
            "borderWidth": 37,
            "borderColor": "#66dd33",
            "-angleStart": 270,
            "-angleEnd": 220,
            "text": "Stand"
          }
        ],
        "tooltip": {
          "x": 200,
          "y": 190,
          "width": 120,
          "fontSize": 19,
          "padding": 30,
          "anchor": "c",
          "fontFamily": "Lucida Sans Unicode",
          "text": "%plot-text<br><span style='font-size:31px;font-weight:bold;color:%color;'>%node-percent-value%</span>",
          "color": "#333",
          "align": "left",
          "borderWidth": 0,
          "backgroundColor": "none"
        },
        "shapes": [{
            "type": "pie",
            "flat": true,
            "x": 200,
            "y": 200,
            "backgroundColor": "#ff9900",
            "alpha": 0.25,
            "size": 180,
            "slice": 140,
            "placement": "bottom"
          },
          {
            "type": "pie",
            "flat": true,
            "x": 200,
            "y": 200,
            "backgroundColor": "#9933cc",
            "alpha": 0.25,
            "size": 140,
            "slice": 100,
            "placement": "bottom"
          },
          {
            "type": "pie",
            "flat": true,
            "x": 200,
            "y": 200,
            "backgroundColor": "#66dd33",
            "alpha": 0.25,
            "size": 100,
            "slice": 60,
            "placement": "bottom"
          },
          {
            "type": "line",
            "lineWidth": 3,
            "lineCap": "round",
            "lineColor": "#000",
            "points": [
              [0, 0],
              [22, 0],
              null, [10, -10],
              [22, 0],
              [10, 10]
            ],
            "offsetX": 190,
            "offsetY": 42
          },
          {
            "type": "line",
            "lineWidth": 3,
            "lineCap": "round",
            "lineColor": "#000",
            "points": [
              [0, 0],
              [22, 0],
              null, [10, -10],
              [22, 0],
              [10, 10],
              null, [20, -10],
              [32, 0],
              [20, 10]
            ],
            "offsetX": 190,
            "offsetY": 80
          },
          {
            "type": "line",
            "lineWidth": 3,
            "lineCap": "round",
            "lineColor": "#000",
            "points": [
              [0, 0],
              [0, 22],
              null, [-10, 12],
              [0, 0],
              [10, 12]
            ],
            "offsetX": 200,
            "offsetY": 110
          }
        ]
      }]
    };
    
    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: 400,
      width: 400
    });