<!doctype html>
<html class="zc-html">
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
.zc-body {
background: #fff;
}
.chart--container {
height: 100%;
width: 100%;
min-height: 650px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body class="zc-body">
<div id="myChart" class="chart--container">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // full ZingChart schema can be found here:
// https://www.zingchart.com/docs/api/json-configuration/
let palette = [
'#F6842E', '#FBAC33', '#8AC340', '#46B863', '#41BC9F', '#29C2EC',
'#387EC3', '#5253A3', '#764199', '#962871', '#C87F8A', '#F14F42'
];
let transforms = [
[8, '0%', 'none', 'fixed=60%;50%'],
[8, '40%', 'none', 'fixed=60%;50%'],
[8, '0%', 'flat', 'fixed=60%;50%'],
[8, '40%', 'flat', 'fixed=50%;50%'],
[8, '0%', 'fold=20', 'fixed=50%;50%'],
[8, '40%', 'fold=20', 'fixed=35%;50%'],
[5, '40%', 'callout=8', 'fixed=50%;50%'],
[5, '60%', 'flow=10', 'fixed=50%;60%'],
[5, '60%', 'flow=-99', 'fixed=50%;40%'],
[8, '0%', 'bite=15', 'fixed=50%;50%'],
[8, '40%', 'bite=15', 'fixed=40%;50%'],
[4, '0%', 'droplet', 'fixed=70%;50%']
];
let chartConfig = {
graphset: []
};
for (let r = 0; r < 3; r++) {
for (let c = 0; c < 4; c++) {
let idx = r * 4 + c;
if (transforms[idx]) {
let gdata = {
type: 'pie',
width: '200px',
height: '200px',
x: `${c*200}px`,
y: `${r*200}px`,
title: {
text: 'pieTransform:' + transforms[idx][2],
fontSize: '11px'
},
plot: {
borderWidth: '1px',
borderColor: '#fff',
borderAlpha: 0.2,
// PIE TRANSFORM ATTRIBUTES HERE
slice: transforms[idx][1],
pieTransform: transforms[idx][2],
hoverState: {
visible: false
},
tooltip: {
text: 'Pie #%plot-index'
},
valueBox: {
placement: transforms[idx][3],
fontSize: '11px',
text: '#%plot-index'
}
},
plotarea: {
margin: '15px 5px 5px 5px'
},
series: []
};
for (let i = 0; i < transforms[idx][0]; i++) {
gdata.series.push({
values: [1],
backgroundColor: palette[i]
});
}
chartConfig.graphset.push(gdata);
}
}
}
zingchart.render({
id: 'myChart',
width: '100%',
height: '100%',
data: chartConfig
});
</script>
</body>
</html>
// full ZingChart schema can be found here:
// https://www.zingchart.com/docs/api/json-configuration/
let palette = [
'#F6842E', '#FBAC33', '#8AC340', '#46B863', '#41BC9F', '#29C2EC',
'#387EC3', '#5253A3', '#764199', '#962871', '#C87F8A', '#F14F42'
];
let transforms = [
[8, '0%', 'none', 'fixed=60%;50%'],
[8, '40%', 'none', 'fixed=60%;50%'],
[8, '0%', 'flat', 'fixed=60%;50%'],
[8, '40%', 'flat', 'fixed=50%;50%'],
[8, '0%', 'fold=20', 'fixed=50%;50%'],
[8, '40%', 'fold=20', 'fixed=35%;50%'],
[5, '40%', 'callout=8', 'fixed=50%;50%'],
[5, '60%', 'flow=10', 'fixed=50%;60%'],
[5, '60%', 'flow=-99', 'fixed=50%;40%'],
[8, '0%', 'bite=15', 'fixed=50%;50%'],
[8, '40%', 'bite=15', 'fixed=40%;50%'],
[4, '0%', 'droplet', 'fixed=70%;50%']
];
let chartConfig = {
graphset : []
};
for (let r=0;r<3;r++) {
for (let c=0;c<4;c++) {
let idx = r*4 + c;
if (transforms[idx]) {
let gdata = {
type : 'pie',
width : '200px',
height : '200px',
x : `${c*200}px`,
y : `${r*200}px`,
title : {
text : 'pieTransform:'+transforms[idx][2],
fontSize : '11px'
},
plot : {
borderWidth : '1px',
borderColor : '#fff',
borderAlpha : 0.2,
// PIE TRANSFORM ATTRIBUTES HERE
slice : transforms[idx][1],
pieTransform : transforms[idx][2],
hoverState : {
visible : false
},
tooltip : {
text : 'Pie #%plot-index'
},
valueBox : {
placement : transforms[idx][3],
fontSize : '11px',
text : '#%plot-index'
}
},
plotarea : {
margin : '15px 5px 5px 5px'
},
series:[]
};
for (let i=0;i<transforms[idx][0];i++) {
gdata.series.push({
values : [1],
backgroundColor : palette[i]
});
}
chartConfig.graphset.push(gdata);
}
}
}
zingchart.render({
id: 'myChart',
width: '100%',
height: '100%',
data: chartConfig
});
