• 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>
            zing-grid[loading] {
                height: 400px;
            }
        </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 
    });