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