<!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: '2x3',
graphset: [{ //Pie Chart 1
type: 'pie',
scale: {
sizeFactor: 0.1,
mediaRules: [{
maxWidth: 400,
sizeFactor: 1,
}]
},
plot: {
valueBox: {
placement: 'out',
fontSize: 10,
fontWeight: 'normal'
}
},
series: [{
values: [60]
},
{
values: [59]
},
{
values: [35]
},
{
values: [31]
},
{
values: [29]
}
]
},
{ //Pie Chart 2
type: 'pie',
scale: {
sizeFactor: 0.5,
mediaRules: [{
maxWidth: 400,
sizeFactor: 1,
}]
},
plot: {
valueBox: {
placement: 'out',
fontSize: 10,
fontWeight: 'normal'
}
},
series: [{
values: [60]
},
{
values: [59]
},
{
values: [35]
},
{
values: [31]
},
{
values: [29]
}
]
},
{ //Pie Chart 3
type: 'pie',
scale: {
sizeFactor: 1.0,
mediaRules: [{
maxWidth: 400,
sizeFactor: 1,
}]
},
plot: {
valueBox: {
fontSize: 12,
fontWeight: 'normal',
offsetR: 15
}
},
series: [{
values: [60]
},
{
values: [59]
},
{
values: [35]
},
{
values: [31]
},
{
values: [29]
}
]
},
{ //Angular Gauge 1
type: 'gauge',
scale: {
sizeFactor: 1.0,
mediaRules: [{
maxWidth: 400,
sizeFactor: 1,
}]
},
scaleR: {
center: {
size: 5,
backgroundColor: '#66CCFF #FFCCFF',
borderColor: 'none'
}
},
series: [{
values: [35],
csize: '5%',
size: '90%',
backgroundColor: '#000000'
}]
},
{ //Angular Gauge 2
type: 'gauge',
scale: {
sizeFactor: 0.5,
mediaRules: [{
maxWidth: 400,
sizeFactor: 1,
}]
},
scaleR: {
center: {
size: 4,
backgroundColor: '#66CCFF #FFCCFF',
borderColor: 'none'
},
item: {
offsetR: -5,
fontSize: 10
}
},
series: [{
values: [35],
csize: '4%',
size: '90%',
backgroundColor: '#000000'
}]
},
{ //Angular Gauge 3
type: 'gauge',
scale: {
sizeFactor: 0.3,
mediaRules: [{
maxWidth: 400,
sizeFactor: 1,
}]
},
scaleR: {
center: {
size: 3,
backgroundColor: '#66CCFF #FFCCFF',
borderColor: 'none'
},
item: {
offsetR: -5,
fontSize: 10
}
},
series: [{
values: [35],
csize: '3%',
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: '2x3',
graphset: [{ //Pie Chart 1
type: 'pie',
scale: {
sizeFactor: 0.1,
mediaRules: [{
maxWidth: 400,
sizeFactor: 1,
}]
},
plot: {
valueBox: {
placement: 'out',
fontSize: 10,
fontWeight: 'normal'
}
},
series: [{
values: [60]
},
{
values: [59]
},
{
values: [35]
},
{
values: [31]
},
{
values: [29]
}
]
},
{ //Pie Chart 2
type: 'pie',
scale: {
sizeFactor: 0.5,
mediaRules: [{
maxWidth: 400,
sizeFactor: 1,
}]
},
plot: {
valueBox: {
placement: 'out',
fontSize: 10,
fontWeight: 'normal'
}
},
series: [{
values: [60]
},
{
values: [59]
},
{
values: [35]
},
{
values: [31]
},
{
values: [29]
}
]
},
{ //Pie Chart 3
type: 'pie',
scale: {
sizeFactor: 1.0,
mediaRules: [{
maxWidth: 400,
sizeFactor: 1,
}]
},
plot: {
valueBox: {
fontSize: 12,
fontWeight: 'normal',
offsetR: 15
}
},
series: [{
values: [60]
},
{
values: [59]
},
{
values: [35]
},
{
values: [31]
},
{
values: [29]
}
]
},
{ //Angular Gauge 1
type: 'gauge',
scale: {
sizeFactor: 1.0,
mediaRules: [{
maxWidth: 400,
sizeFactor: 1,
}]
},
scaleR: {
center: {
size: 5,
backgroundColor: '#66CCFF #FFCCFF',
borderColor: 'none'
}
},
series: [{
values: [35],
csize: '5%',
size: '90%',
backgroundColor: '#000000'
}]
},
{ //Angular Gauge 2
type: 'gauge',
scale: {
sizeFactor: 0.5,
mediaRules: [{
maxWidth: 400,
sizeFactor: 1,
}]
},
scaleR: {
center: {
size: 4,
backgroundColor: '#66CCFF #FFCCFF',
borderColor: 'none'
},
item: {
offsetR: -5,
fontSize: 10
}
},
series: [{
values: [35],
csize: '4%',
size: '90%',
backgroundColor: '#000000'
}]
},
{ //Angular Gauge 3
type: 'gauge',
scale: {
sizeFactor: 0.3,
mediaRules: [{
maxWidth: 400,
sizeFactor: 1,
}]
},
scaleR: {
center: {
size: 3,
backgroundColor: '#66CCFF #FFCCFF',
borderColor: 'none'
},
item: {
offsetR: -5,
fontSize: 10
}
},
series: [{
values: [35],
csize: '3%',
size: '90%',
backgroundColor: '#000000'
}]
}
]
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: 400,
width: '100%'
});