<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<script>
zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
</script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous">
</script>
<style>
body {
margin: 10px;
padding: 10px;
}
*,
input,
button,
select,
textarea,
label {
font-family: 'Lucida Sans Unicode', Monaco, Tahoma, Verdana, Arial;
}
</style>
</head>
<body>
<div id="zc"></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
var csize = 500,
margin = 50;
var bsizeS = 3,
bsizeL = 20;
var cdata = {
graphset: [{
type: 'pie',
backgroundColor: '#4A907D',
plotarea: {
margin: margin
},
title: {
text: 'We\'ve spent some serious quality time together.',
width: '100%',
align: 'left',
fontColor: '#181818',
fontWeight: 'bold',
fontSize: 18,
padding: 4
},
scale: {
sizeFactor: 1
},
scaleR: {
refAngle: 0,
aperture: 180
},
plot: {
refAngle: 90,
angleStart: 90,
detach: false,
totals: [100],
hoverState: {
visible: false
}
},
series: [{
size: '100%',
values: [100],
backgroundColor: 'none',
borderWidth: bsizeL,
borderColor: '#181818',
tooltip: {
visible: false
},
valueBox: {
visible: false
}
},
{
size: '95%',
values: [100],
backgroundColor: 'none',
borderWidth: bsizeS,
borderColor: '#CEF46E',
alpha: 0.25,
tooltip: {
visible: false
},
valueBox: {
text: '2019',
fontColor: '#181818',
fontSize: 15,
fontWeight: 'bold',
placement: 'in',
offsetX: 168,
offsetY: 190
}
},
{
size: '95%',
values: [78],
backgroundColor: '#CEF46E',
borderWidth: bsizeS,
borderColor: '#CEF46E',
animation: {
speed: 1000,
effect: 2,
method: 0
},
valueBox: [{
text: '\u25CF',
fontColor: '#CEF46E',
fontSize: 15,
placement: 'in',
offsetX: -4,
offsetY: -190
},
{
text: '172,694 minutes',
fontColor: '#CEF46E',
fontSize: 14,
fontWeight: 'bold',
placement: 'in',
offsetX: 200,
offsetY: -235
}
]
},
{
size: '90%',
values: [100],
backgroundColor: 'none',
borderWidth: bsizeL,
borderColor: '#181818',
tooltip: {
visible: false
},
valueBox: {
visible: false
}
},
{
size: '85%',
values: [100],
backgroundColor: 'none',
borderWidth: bsizeS,
borderColor: '#CEF46E',
alpha: 0.25,
tooltip: {
visible: false
},
valueBox: {
text: '2018',
fontColor: '#181818',
fontSize: 15,
fontWeight: 'bold',
placement: 'in',
offsetX: 155,
offsetY: 170
}
},
{
size: '85%',
values: [90],
backgroundColor: '#CEF46E',
borderWidth: bsizeS,
animation: {
speed: 2000,
effect: 2,
method: 0
},
borderColor: '#CEF46E',
valueBox: [{
text: '\u25CF',
fontColor: '#CEF46E',
fontSize: 15,
placement: 'in',
offsetX: 58,
offsetY: -182
},
{
text: '199,830 minutes',
fontColor: '#CEF46E',
fontSize: 14,
fontWeight: 'bold',
placement: 'in',
offsetX: 193,
offsetY: -188
}
]
},
{
size: '80%',
values: [100],
backgroundColor: 'none',
borderWidth: bsizeL,
borderColor: '#181818',
tooltip: {
visible: false
},
valueBox: {
visible: false
}
},
{
size: '75%',
values: [100],
backgroundColor: 'none',
borderWidth: bsizeS,
borderColor: '#CEF46E',
alpha: 0.25,
tooltip: {
visible: false
},
valueBox: {
text: '2017',
fontColor: '#181818',
fontSize: 15,
fontWeight: 'bold',
placement: 'in',
offsetX: 142,
offsetY: 150
}
},
{
size: '75%',
values: [63],
backgroundColor: '#CEF46E',
borderWidth: bsizeS,
animation: {
speed: 3000,
effect: 2,
method: 0
},
borderColor: '#CEF46E',
valueBox: [{
text: '\u25CF',
fontColor: '#CEF46E',
fontSize: 15,
placement: 'in',
offsetX: -55,
offsetY: -118
},
{
text: '129,374 minutes',
fontColor: '#CEF46E',
fontSize: 14,
fontWeight: 'bold',
placement: 'in',
offsetX: 166,
offsetY: -203
}
]
},
{
size: '70%',
values: [100],
backgroundColor: 'none',
borderWidth: bsizeL,
borderColor: '#181818',
tooltip: {
visible: false
},
valueBox: {
visible: false
}
},
{
size: '65%',
values: [100],
backgroundColor: 'none',
borderWidth: bsizeS,
borderColor: '#CEF46E',
alpha: 0.25,
tooltip: {
visible: false
},
valueBox: {
text: '2016',
fontColor: '#181818',
fontSize: 15,
fontWeight: 'bold',
placement: 'in',
offsetX: 129,
offsetY: 130
}
},
{
size: '65%',
values: [60],
backgroundColor: '#CEF46E',
borderWidth: bsizeS,
animation: {
speed: 3500,
effect: 2,
method: 0
},
borderColor: '#CEF46E',
valueBox: [{
text: '\u25CF',
fontColor: '#CEF46E',
fontSize: 15,
placement: 'in',
offsetX: -55,
offsetY: -92
},
{
text: '126,554 minutes',
fontColor: '#CEF46E',
fontSize: 14,
fontWeight: 'bold',
placement: 'in',
offsetX: 153,
offsetY: -178
}
]
},
{
size: '60%',
values: [100],
backgroundColor: 'none',
borderWidth: bsizeL,
borderColor: '#181818',
tooltip: {
visible: false
},
valueBox: {
visible: false
}
},
{
size: '55%',
values: [100],
backgroundColor: 'none',
borderWidth: bsizeS,
borderColor: '#CEF46E',
alpha: 0.25,
tooltip: {
visible: false
},
valueBox: {
text: '2015',
fontColor: '#181818',
fontSize: 15,
fontWeight: 'bold',
placement: 'in',
offsetX: 116,
offsetY: 110
}
},
{
size: '55%',
values: [49],
backgroundColor: '#CEF46E',
borderWidth: bsizeS,
animation: {
speed: 4000,
effect: 2,
method: 0
},
borderColor: '#CEF46E',
valueBox: [{
text: '\u25CF',
fontColor: '#CEF46E',
fontSize: 15,
placement: 'in',
offsetX: -61,
offsetY: -46
},
{
text: '93,612 minutes',
fontColor: '#CEF46E',
fontSize: 14,
fontWeight: 'bold',
placement: 'in',
offsetX: 130,
offsetY: -160
}
]
},
{
size: '50%',
values: [100],
backgroundColor: 'none',
borderWidth: bsizeL,
borderColor: '#181818',
tooltip: {
visible: false
},
valueBox: {
visible: false
}
},
{
size: '45%',
values: [100],
backgroundColor: 'none',
borderWidth: bsizeL,
borderColor: '#181818',
tooltip: {
visible: false
},
valueBox: {
visible: false
}
},
{
size: '40%',
values: [100],
backgroundColor: 'none',
borderWidth: bsizeL,
borderColor: '#181818',
tooltip: {
visible: false
},
valueBox: {
visible: false
}
},
{
size: '35%',
values: [100],
backgroundColor: 'none',
borderWidth: bsizeL,
borderColor: '#181818',
tooltip: {
visible: false
},
valueBox: {
visible: false
}
},
{
size: '30%',
values: [100],
backgroundColor: 'none',
borderWidth: bsizeL,
borderColor: '#181818',
tooltip: {
visible: false
},
valueBox: {
visible: false
}
},
{
size: '25%',
values: [100],
backgroundColor: 'none',
borderWidth: bsizeL,
borderColor: '#181818',
tooltip: {
visible: false
},
valueBox: {
visible: false
}
},
{
size: '20%',
values: [100],
backgroundColor: 'none',
borderWidth: bsizeL,
borderColor: '#181818',
tooltip: {
visible: false
},
valueBox: {
visible: false
}
},
{
size: '15%',
values: [100],
backgroundColor: 'none',
borderWidth: bsizeL,
borderColor: '#181818',
tooltip: {
visible: false
},
valueBox: {
visible: false
}
},
{
size: '10%',
values: [100],
backgroundColor: 'none',
borderWidth: bsizeL,
borderColor: '#181818',
tooltip: {
visible: false
},
valueBox: {
visible: false
}
},
{
size: '5%',
values: [100],
backgroundColor: 'none',
borderWidth: bsizeL,
borderColor: '#181818',
tooltip: {
visible: false
},
valueBox: {
visible: false
}
}
]
}]
};
zingchart.render({
id: 'zc',
width: 500,
height: 500,
output: 'svg',
data: cdata
});
</script>
</body>
</html>
var csize = 500, margin = 50;
var bsizeS = 3, bsizeL = 20;
var cdata = {
graphset : [
{
type : 'pie',
backgroundColor : '#4A907D',
plotarea : {
margin : margin
},
title : {
text : 'We\'ve spent some serious quality time together.',
width : '100%',
align : 'left',
fontColor : '#181818',
fontWeight : 'bold',
fontSize : 18,
padding : 4
},
scale : {
sizeFactor : 1
},
scaleR : {
refAngle : 0,
aperture : 180
},
plot : {
refAngle : 90,
angleStart : 90,
detach : false,
totals : [100],
hoverState : {
visible : false
}
},
series : [
{
size : '100%',
values : [100],
backgroundColor : 'none',
borderWidth : bsizeL,
borderColor : '#181818',
tooltip : {
visible : false
},
valueBox : {
visible : false
}
},
{
size : '95%',
values : [100],
backgroundColor : 'none',
borderWidth : bsizeS,
borderColor : '#CEF46E',
alpha : 0.25,
tooltip : {
visible : false
},
valueBox : {
text : '2019',
fontColor : '#181818',
fontSize : 15,
fontWeight : 'bold',
placement : 'in',
offsetX : 168,
offsetY : 190
}
},
{
size : '95%',
values : [78],
backgroundColor : '#CEF46E',
borderWidth : bsizeS,
borderColor : '#CEF46E',
animation : {
speed : 1000,
effect : 2,
method : 0
},
valueBox : [
{
text : '\u25CF',
fontColor : '#CEF46E',
fontSize : 15,
placement : 'in',
offsetX : -4,
offsetY : -190
},
{
text : '172,694 minutes',
fontColor : '#CEF46E',
fontSize : 14,
fontWeight : 'bold',
placement : 'in',
offsetX : 200,
offsetY : -235
}
]
},
{
size : '90%',
values : [100],
backgroundColor : 'none',
borderWidth : bsizeL,
borderColor : '#181818',
tooltip : {
visible : false
},
valueBox : {
visible : false
}
},
{
size : '85%',
values : [100],
backgroundColor : 'none',
borderWidth : bsizeS,
borderColor : '#CEF46E',
alpha : 0.25,
tooltip : {
visible : false
},
valueBox : {
text : '2018',
fontColor : '#181818',
fontSize : 15,
fontWeight : 'bold',
placement : 'in',
offsetX : 155,
offsetY : 170
}
},
{
size : '85%',
values : [90],
backgroundColor : '#CEF46E',
borderWidth : bsizeS,
animation : {
speed : 2000,
effect : 2,
method : 0
},
borderColor : '#CEF46E',
valueBox : [
{
text : '\u25CF',
fontColor : '#CEF46E',
fontSize : 15,
placement : 'in',
offsetX : 58,
offsetY : -182
},
{
text : '199,830 minutes',
fontColor : '#CEF46E',
fontSize : 14,
fontWeight : 'bold',
placement : 'in',
offsetX : 193,
offsetY : -188
}
]
},
{
size : '80%',
values : [100],
backgroundColor : 'none',
borderWidth : bsizeL,
borderColor : '#181818',
tooltip : {
visible : false
},
valueBox : {
visible : false
}
},
{
size : '75%',
values : [100],
backgroundColor : 'none',
borderWidth : bsizeS,
borderColor : '#CEF46E',
alpha : 0.25,
tooltip : {
visible : false
},
valueBox : {
text : '2017',
fontColor : '#181818',
fontSize : 15,
fontWeight : 'bold',
placement : 'in',
offsetX : 142,
offsetY : 150
}
},
{
size : '75%',
values : [63],
backgroundColor : '#CEF46E',
borderWidth : bsizeS,
animation : {
speed : 3000,
effect : 2,
method : 0
},
borderColor : '#CEF46E',
valueBox : [
{
text : '\u25CF',
fontColor : '#CEF46E',
fontSize : 15,
placement : 'in',
offsetX : -55,
offsetY : -118
},
{
text : '129,374 minutes',
fontColor : '#CEF46E',
fontSize : 14,
fontWeight : 'bold',
placement : 'in',
offsetX : 166,
offsetY : -203
}
]
},
{
size : '70%',
values : [100],
backgroundColor : 'none',
borderWidth : bsizeL,
borderColor : '#181818',
tooltip : {
visible : false
},
valueBox : {
visible : false
}
},
{
size : '65%',
values : [100],
backgroundColor : 'none',
borderWidth : bsizeS,
borderColor : '#CEF46E',
alpha : 0.25,
tooltip : {
visible : false
},
valueBox : {
text : '2016',
fontColor : '#181818',
fontSize : 15,
fontWeight : 'bold',
placement : 'in',
offsetX : 129,
offsetY : 130
}
},
{
size : '65%',
values : [60],
backgroundColor : '#CEF46E',
borderWidth : bsizeS,
animation : {
speed : 3500,
effect : 2,
method : 0
},
borderColor : '#CEF46E',
valueBox : [
{
text : '\u25CF',
fontColor : '#CEF46E',
fontSize : 15,
placement : 'in',
offsetX : -55,
offsetY : -92
},
{
text : '126,554 minutes',
fontColor : '#CEF46E',
fontSize : 14,
fontWeight : 'bold',
placement : 'in',
offsetX : 153,
offsetY : -178
}
]
},
{
size : '60%',
values : [100],
backgroundColor : 'none',
borderWidth : bsizeL,
borderColor : '#181818',
tooltip : {
visible : false
},
valueBox : {
visible : false
}
},
{
size : '55%',
values : [100],
backgroundColor : 'none',
borderWidth : bsizeS,
borderColor : '#CEF46E',
alpha : 0.25,
tooltip : {
visible : false
},
valueBox : {
text : '2015',
fontColor : '#181818',
fontSize : 15,
fontWeight : 'bold',
placement : 'in',
offsetX : 116,
offsetY : 110
}
},
{
size : '55%',
values : [49],
backgroundColor : '#CEF46E',
borderWidth : bsizeS,
animation : {
speed : 4000,
effect : 2,
method : 0
},
borderColor : '#CEF46E',
valueBox : [
{
text : '\u25CF',
fontColor : '#CEF46E',
fontSize : 15,
placement : 'in',
offsetX : -61,
offsetY : -46
},
{
text : '93,612 minutes',
fontColor : '#CEF46E',
fontSize : 14,
fontWeight : 'bold',
placement : 'in',
offsetX : 130,
offsetY : -160
}
]
},
{
size : '50%',
values : [100],
backgroundColor : 'none',
borderWidth : bsizeL,
borderColor : '#181818',
tooltip : {
visible : false
},
valueBox : {
visible : false
}
},
{
size : '45%',
values : [100],
backgroundColor : 'none',
borderWidth : bsizeL,
borderColor : '#181818',
tooltip : {
visible : false
},
valueBox : {
visible : false
}
},
{
size : '40%',
values : [100],
backgroundColor : 'none',
borderWidth : bsizeL,
borderColor : '#181818',
tooltip : {
visible : false
},
valueBox : {
visible : false
}
},
{
size : '35%',
values : [100],
backgroundColor : 'none',
borderWidth : bsizeL,
borderColor : '#181818',
tooltip : {
visible : false
},
valueBox : {
visible : false
}
},
{
size : '30%',
values : [100],
backgroundColor : 'none',
borderWidth : bsizeL,
borderColor : '#181818',
tooltip : {
visible : false
},
valueBox : {
visible : false
}
},
{
size : '25%',
values : [100],
backgroundColor : 'none',
borderWidth : bsizeL,
borderColor : '#181818',
tooltip : {
visible : false
},
valueBox : {
visible : false
}
},
{
size : '20%',
values : [100],
backgroundColor : 'none',
borderWidth : bsizeL,
borderColor : '#181818',
tooltip : {
visible : false
},
valueBox : {
visible : false
}
},
{
size : '15%',
values : [100],
backgroundColor : 'none',
borderWidth : bsizeL,
borderColor : '#181818',
tooltip : {
visible : false
},
valueBox : {
visible : false
}
},
{
size : '10%',
values : [100],
backgroundColor : 'none',
borderWidth : bsizeL,
borderColor : '#181818',
tooltip : {
visible : false
},
valueBox : {
visible : false
}
},
{
size : '5%',
values : [100],
backgroundColor : 'none',
borderWidth : bsizeL,
borderColor : '#181818',
tooltip : {
visible : false
},
valueBox : {
visible : false
}
}
]
}
]
};
zingchart.render({
id : 'zc',
width : 500,
height : 500,
output : 'svg',
data : cdata
});
