<!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-color: #fff;
}
.chart--container {
height: 100%;
width: 100%;
min-height: 530px;
}
.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"]; // CHART CONFIG
// -----------------------------
let chartConfig = {
graphset: [{
type: 'gauge',
width: '70%',
height: '100%',
x: '0px',
y: '0px',
title: {
text: 'Engine RX 2564',
bold: false,
fontColor: '#515151',
y: '80%',
},
subtitle: {
text: 'rpm',
bold: false,
fontSize: '15px',
y: '59%',
},
plot: {
tooltip: {
visible: false,
},
csize: '14%',
size: '56%',
},
plotarea: {
marginBottom: '20%',
},
scale: {
sizeFactor: 0.9,
},
scale2: {
sizeFactor: 0.55,
},
scaleR: {
values: '0:10:1',
aperture: 320,
center: {
visible: false,
},
item: {
visible: false,
},
ring: {
backgroundColor: '#C1C1C1',
size: '20px',
},
tick: {
visible: false,
},
},
scaleR2: {
values: '0:100:10',
aperture: 290,
center: {
backgroundColor: '#BEBEBE',
borderColor: '#5F5F5F',
borderWidth: '1px',
size: '14px',
},
item: {
fontSize: '16px',
offsetR: -1,
},
label: {
text: 'text',
},
minorTick: {
lineColor: '#C1C1C1',
placement: 'inner',
size: '7px',
},
minorTicks: 4,
ring: {
visible: false,
},
tick: {
lineColor: '#5F5F5F',
lineWidth: '4px',
placement: 'outter',
size: '15px',
},
},
series: [{
values: [50],
valueBox: {
text: '%v',
fontColor: '#515151',
fontSize: '28px',
offsetY: '40px',
placement: 'center',
},
backgroundColor: '#F8B237',
}, ],
},
{
type: 'bar',
width: '30%',
height: '100%',
x: '70%',
y: '0px',
title: {
text: 'Oil RX 2564',
bold: false,
fontColor: '#515151',
y: '80%',
},
subtitle: {
text: 'C',
bold: false,
fontSize: '15px',
y: '76%',
},
plot: {
tooltip: {
visible: false,
},
barsOverlap: '100%',
borderRadius: '2px',
hoverState: {
visible: false,
},
},
plotarea: {
marginTop: '10%',
marginBottom: '30%',
},
scaleX: {
visible: false,
},
scaleY: {
values: '0:100:10',
guide: {
visible: false,
},
item: {
fontSize: '16px',
rules: [{
rule: '%i % 2 == 1',
visible: false,
}, ],
},
lineColor: 'none',
minorTick: {
lineColor: '#C1C1C1',
placement: 'inner',
size: '7px',
},
minorTicks: 4,
tick: {
margin: '3px',
lineColor: '#5F5F5F',
lineWidth: '4px',
placement: 'outter',
rules: [{
lineWidth: '2px',
rule: '%i % 2 == 1',
}, ],
size: '15px',
},
},
scaleY2: {
values: '0:100:10',
guide: {
visible: false,
},
item: {
visible: false,
},
lineColor: 'none',
tick: {
margin: '0px',
padding: '0px',
lineColor: '#fff',
offsetX: '50px',
placement: 'inner',
rules: [{
rule: '%i == 0 || %i == 10',
visible: false,
}, ],
size: '40px',
},
},
series: [{
values: [100],
tooltip: {
visble: false,
},
backgroundColor: '#fff',
barWidth: '100%',
borderColor: '#C1C1C1',
borderWidth: '4px',
maxTrackers: 0,
},
{
values: [80],
tooltip: {
visble: false,
},
valueBox: {
text: '%v',
fontColor: '#515151',
fontSize: '28px',
offsetY: '0px',
placement: 'bottom-out',
},
backgroundColor: '#F8B237',
barWidth: '93%',
maxTrackers: 0,
},
],
},
],
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
</script>
</body>
</html>
// CHART CONFIG
// -----------------------------
let chartConfig = {
graphset: [
{
type: 'gauge',
width: '70%',
height: '100%',
x: '0px',
y: '0px',
title: {
text: 'Engine RX 2564',
bold: false,
fontColor: '#515151',
y: '80%',
},
subtitle: {
text: 'rpm',
bold: false,
fontSize: '15px',
y: '59%',
},
plot: {
tooltip: {
visible: false,
},
csize: '14%',
size: '56%',
},
plotarea: {
marginBottom: '20%',
},
scale: {
sizeFactor: 0.9,
},
scale2: {
sizeFactor: 0.55,
},
scaleR: {
values: '0:10:1',
aperture: 320,
center: {
visible: false,
},
item: {
visible: false,
},
ring: {
backgroundColor: '#C1C1C1',
size: '20px',
},
tick: {
visible: false,
},
},
scaleR2: {
values: '0:100:10',
aperture: 290,
center: {
backgroundColor: '#BEBEBE',
borderColor: '#5F5F5F',
borderWidth: '1px',
size: '14px',
},
item: {
fontSize: '16px',
offsetR: -1,
},
label: {
text: 'text',
},
minorTick: {
lineColor: '#C1C1C1',
placement: 'inner',
size: '7px',
},
minorTicks: 4,
ring: {
visible: false,
},
tick: {
lineColor: '#5F5F5F',
lineWidth: '4px',
placement: 'outter',
size: '15px',
},
},
series: [
{
values: [50],
valueBox: {
text: '%v',
fontColor: '#515151',
fontSize: '28px',
offsetY: '40px',
placement: 'center',
},
backgroundColor: '#F8B237',
},
],
},
{
type: 'bar',
width: '30%',
height: '100%',
x: '70%',
y: '0px',
title: {
text: 'Oil RX 2564',
bold: false,
fontColor: '#515151',
y: '80%',
},
subtitle: {
text: 'C',
bold: false,
fontSize: '15px',
y: '76%',
},
plot: {
tooltip: {
visible: false,
},
barsOverlap: '100%',
borderRadius: '2px',
hoverState: {
visible: false,
},
},
plotarea: {
marginTop: '10%',
marginBottom: '30%',
},
scaleX: {
visible: false,
},
scaleY: {
values: '0:100:10',
guide: {
visible: false,
},
item: {
fontSize: '16px',
rules: [
{
rule: '%i % 2 == 1',
visible: false,
},
],
},
lineColor: 'none',
minorTick: {
lineColor: '#C1C1C1',
placement: 'inner',
size: '7px',
},
minorTicks: 4,
tick: {
margin: '3px',
lineColor: '#5F5F5F',
lineWidth: '4px',
placement: 'outter',
rules: [
{
lineWidth: '2px',
rule: '%i % 2 == 1',
},
],
size: '15px',
},
},
scaleY2: {
values: '0:100:10',
guide: {
visible: false,
},
item: {
visible: false,
},
lineColor: 'none',
tick: {
margin: '0px',
padding: '0px',
lineColor: '#fff',
offsetX: '50px',
placement: 'inner',
rules: [
{
rule: '%i == 0 || %i == 10',
visible: false,
},
],
size: '40px',
},
},
series: [
{
values: [100],
tooltip: {
visble: false,
},
backgroundColor: '#fff',
barWidth: '100%',
borderColor: '#C1C1C1',
borderWidth: '4px',
maxTrackers: 0,
},
{
values: [80],
tooltip: {
visble: false,
},
valueBox: {
text: '%v',
fontColor: '#515151',
fontSize: '28px',
offsetY: '0px',
placement: 'bottom-out',
},
backgroundColor: '#F8B237',
barWidth: '93%',
maxTrackers: 0,
},
],
},
],
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
