<!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"];
let chartConfig = {
layout: '1x2',
graphset: [{ //Pie Chart
type: 'pie',
title: {
text: 'Pie Chart'
},
scaleR: {
aperture: 360,
refAngle: 270,
mediaRules: [{
maxWidth: 400,
refAngle: 0
}]
},
scale: {
sizeFactor: 0.8
},
plot: {
valueBox: {
fontSize: 12,
fontWeight: 'normal',
offsetR: '35%'
}
},
series: [{
values: [60]
},
{
values: [59]
},
{
values: [35]
},
{
values: [31]
},
{
values: [29]
}
]
},
{ //Angular Gauge Chart
type: 'gauge',
title: {
text: 'Angular Gauge'
},
scaleR: {
aperture: 270,
center: {
size: 5,
backgroundColor: '#66CCFF #FFCCFF',
borderColor: 'none'
},
minorTicks: 9,
minorTick: {
placement: 'inner',
size: 15
},
mediaRules: [{
maxWidth: 400,
minorTicks: 0,
item: {
offsetR: -40
},
tick: {
size: 10
},
ring: {
size: 10
},
}]
},
scale: {
sizeFactor: 0.8
},
series: [{
values: [79],
csize: '5%',
size: '90%',
backgroundColor: '#000000'
}]
}
]
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: 400,
width: '100%'
});
</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>
let chartConfig = {
layout: '1x2',
graphset: [{ //Pie Chart
type: 'pie',
title: {
text: 'Pie Chart'
},
scaleR: {
aperture: 360,
refAngle: 270,
mediaRules: [{
maxWidth: 400,
refAngle: 0
}]
},
scale: {
sizeFactor: 0.8
},
plot: {
valueBox: {
fontSize: 12,
fontWeight: 'normal',
offsetR: '35%'
}
},
series: [{
values: [60]
},
{
values: [59]
},
{
values: [35]
},
{
values: [31]
},
{
values: [29]
}
]
},
{ //Angular Gauge Chart
type: 'gauge',
title: {
text: 'Angular Gauge'
},
scaleR: {
aperture: 270,
center: {
size: 5,
backgroundColor: '#66CCFF #FFCCFF',
borderColor: 'none'
},
minorTicks: 9,
minorTick: {
placement: 'inner',
size: 15
},
mediaRules: [{
maxWidth: 400,
minorTicks: 0,
item: {
offsetR: -40
},
tick: {
size: 10
},
ring: {
size: 10
},
}]
},
scale: {
sizeFactor: 0.8
},
series: [{
values: [79],
csize: '5%',
size: '90%',
backgroundColor: '#000000'
}]
}
]
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: 400,
width: '100%'
});