<!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"];
var chartConfig = {
type: 'gauge',
plot: {
size: '100%',
},
plotarea: {
marginTop: '80px',
},
scaleR2: {
aperture: 180,
minValue: 0,
maxValue: 100,
step: 10,
center: {
visible: false,
center: { //Pivot Point
}
},
tick: {
visible: false
},
maxLabels: 9999,
labels: ['', 'VERY POOR', '', 'POOR', '', 'FAIR', '', 'GOOD', '', 'EXCELLENT', ''],
item: {
fontColor: '#0F1418',
fontSize: '16px',
placement: 'center',
fontWeight: '600',
fontStyle: 'normal',
offsetR: '0px',
_offsetY: '-15px',
angle: 'auto' //To adjust the angle of your scale labels.
},
ring: {
size: 1,
borderWidth: '5px',
borderColor: '#FFFFFF',
}
},
scaleR: {
aperture: 180,
minValue: 0,
maxValue: 100,
step: 20,
center: {
size: 8,
borderColor: 'black'
},
tick: {
visible: false
},
item: {
'visible': false,
},
ring: {
size: 150,
borderWidth: 5,
borderColor: '#FFFFFF',
rules: [{
rule: '%v >= 0 && %v <= 20',
backgroundColor: '#CF2020'
},
{
rule: '%v >= 20 && %v <= 40',
backgroundColor: '#F76420'
},
{
rule: '%v >= 40 && %v <= 60',
backgroundColor: '#FFBB10'
},
{
rule: '%v >= 60 && %v <= 80',
backgroundColor: '#CFDF28'
},
{
rule: '%v >= 80 && %v <= 100',
backgroundColor: '#42B74A'
},
]
}
},
series: [{
values: [50],
csize: '13%',
size: '90%',
backgroundColor: '#000000', //Needle Color
}, ]
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%'
});
</script>
</body>
</html>
var chartConfig = {
type: 'gauge',
plot: {
size: '100%',
},
plotarea: {
marginTop: '80px',
},
scaleR2: {
aperture: 180,
minValue: 0,
maxValue: 100,
step: 10,
center: {
visible: false,
center: { //Pivot Point
}
},
tick: {
visible: false
},
maxLabels: 9999,
labels: ['', 'VERY POOR', '', 'POOR', '', 'FAIR', '', 'GOOD', '', 'EXCELLENT', ''],
item: {
fontColor: '#0F1418',
fontSize: '16px',
placement: 'center',
fontWeight: '600',
fontStyle: 'normal',
offsetR: '0px',
_offsetY: '-15px',
angle: 'auto' //To adjust the angle of your scale labels.
},
ring: {
size: 1,
borderWidth: '5px',
borderColor: '#FFFFFF',
}
},
scaleR: {
aperture: 180,
minValue: 0,
maxValue: 100,
step: 20,
center: {
size: 8,
borderColor: 'black'
},
tick: {
visible: false
},
item: {
'visible': false,
},
ring: {
size: 150,
borderWidth: 5,
borderColor: '#FFFFFF',
rules: [{
rule: '%v >= 0 && %v <= 20',
backgroundColor: '#CF2020'
},
{
rule: '%v >= 20 && %v <= 40',
backgroundColor: '#F76420'
},
{
rule: '%v >= 40 && %v <= 60',
backgroundColor: '#FFBB10'
},
{
rule: '%v >= 60 && %v <= 80',
backgroundColor: '#CFDF28'
},
{
rule: '%v >= 80 && %v <= 100',
backgroundColor: '#42B74A'
},
]
}
},
series: [{
values: [50],
csize: '13%',
size: '90%',
backgroundColor: '#000000', //Needle Color
}, ]
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%'
});
