<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" 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
});