<!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>
.chart--container {
min-height: 530px;
width: 100%;
height: 100%;
}
.zc-ref {
display: none;
}
</style>
</head>
<body>
<div id="myChart" class="chart--container">
<a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
let chartConfig = {
type: 'ring',
legend: {
align: 'center',
borderWidth: '0px',
item: {
cursor: 'pointer',
fontSize: '15px',
offsetX: '-5px',
},
layout: 'vertical',
marker: {
type: 'circle',
cursor: 'pointer',
size: '10px',
},
toggleAction: 'remove', // remove plot so it re-calculates percentage
verticalAlign: 'middle',
},
plot: {
tooltip: {
visible: false,
},
detached: false, // turn off click on slices
slice: 150, // set hole size in middle of chart
},
series: [{
values: [34],
backgroundColor: '#FE7A5D',
},
{
values: [40],
backgroundColor: '#69A8F8',
},
{
values: [50],
backgroundColor: '#54DBB9',
},
{
values: [20],
backgroundColor: '#FEDA60',
},
],
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
/*
* Every 35 milliseconds we will update the chart
* angle by 1.5 degress so it simulates rotatition
* animation!
*/
let angle = 0;
setInterval(function() {
angle = angle + 1.5;
zingchart.exec('myChart', 'modify', {
object: 'plot',
data: {
refAngle: angle % 360,
},
});
}, 35);
</script>
</body>
</html>
let chartConfig = {
type: 'ring',
legend: {
align: 'center',
borderWidth: '0px',
item: {
cursor: 'pointer',
fontSize: '15px',
offsetX: '-5px',
},
layout: 'vertical',
marker: {
type: 'circle',
cursor: 'pointer',
size: '10px',
},
toggleAction: 'remove', // remove plot so it re-calculates percentage
verticalAlign: 'middle',
},
plot: {
tooltip: {
visible: false,
},
detached: false, // turn off click on slices
slice: 150, // set hole size in middle of chart
},
series: [
{
values: [34],
backgroundColor: '#FE7A5D',
},
{
values: [40],
backgroundColor: '#69A8F8',
},
{
values: [50],
backgroundColor: '#54DBB9',
},
{
values: [20],
backgroundColor: '#FEDA60',
},
],
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
/*
* Every 35 milliseconds we will update the chart
* angle by 1.5 degress so it simulates rotatition
* animation!
*/
let angle = 0;
setInterval(function () {
angle = angle + 1.5;
zingchart.exec('myChart', 'modify', {
object: 'plot',
data: {
refAngle: angle % 360,
},
});
}, 35);
