<!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: 'bar',
backgroundColor: '#343856 #212339',
fillAngle: 45,
stacked: true,
stackType: '100%',
title: {
text: 'COMMUNITY SERVER MONITORING',
backgroundColor: 'none',
fontColor: '#fff',
fontFamily: 'Arial',
fontSize: '14px',
height: '40px',
padding: '20px 0 0 20px',
textAlign: 'left',
},
legend: {
backgroundColor: '#31344c',
borderColor: 'none',
borderWidth: '0px',
header: {
text: 'MONITORED SYSTEMS',
backgroundColor: '#212339',
borderColor: 'none',
borderWidth: '0px',
fontColor: '#fff',
fontFamily: 'Arial',
fontSize: '10px',
height: '30px',
padding: '5px 10px',
},
item: {
alpha: 0.6,
fontColor: '#fff',
fontFamily: 'Arial',
fontSize: '10px',
fontWeight: 'normal',
},
padding: '10px 5px',
shadow: false,
toggleAction: 'remove',
y: '75px',
},
plot: {
tooltip: {
text: '<b>%k</b><br>%t CPU usage: %v%<br><br><b>Average of all</b><br>%t CPU usage: %pavg%',
alpha: 0.95,
backgroundColor: '#212339',
borderColor: 'none',
borderRadius: '8px',
borderWidth: '0px',
decimals: 0,
fontColor: '#fff',
fontFamily: 'Arial',
fontSize: '10px',
fontWeight: 'normal',
padding: '10px 10px',
shadow: false,
textAlign: 'left',
},
alpha: 0.8,
animation: {
delay: 500,
effect: 'ANIMATION_EXPAND_TOP',
method: 'ANIMATION_LINEAR',
sequence: 'ANIMATION_BY_PLOT',
speed: '1000',
},
barWidth: '25px',
hoverState: {
alpha: 1,
backgroundColor: '#212339',
},
},
plotarea: {
margin: '75px 180px 85px 80px',
},
scaleX: {
values: [
'North 1',
'North 2',
'South 1',
'South 2',
'East 1',
'East 2',
'West 1',
'West 2',
'CoLo 1',
],
guide: {
visible: false,
},
item: {
fontAngle: -48,
fontColor: '#9a9cab',
fontFamily: 'Arial',
fontSize: '10px',
offsetX: '5px',
},
itemsOverlap: true,
label: {
text: 'SERVER BUILDING LOCATION',
fontColor: '#fff',
fontFamily: 'Arial',
fontSize: '10px',
fontWeight: 'normal',
paddingTop: '30px',
},
lineColor: '#53566f',
tick: {
lineColor: '#53566f',
},
},
scaleY: {
guide: {
alpha: 0.4,
lineColor: '#53566f',
lineStyle: 'solid',
lineWidth: '1px',
},
item: {
fontColor: '#9a9cab',
fontFamily: 'Arial',
fontSize: '10px',
padding: '3px',
},
label: {
text: 'SERVER CPU USAGE',
fontColor: '#fff',
fontFamily: 'Arial',
fontSize: '10px',
fontWeight: 'normal',
},
lineColor: '#53566f',
tick: {
lineColor: '#53566f',
},
},
series: [{
text: 'Communications',
values: [19, 17, 24, 13, 17, 22, 20, 16, 17],
backgroundColor: '#3e99cf',
legendItem: {
order: 6,
},
},
{
text: 'Business Systems',
values: [14, 18, 7, 17, 19, 20, 13, 14, 19],
backgroundColor: '#f4b557',
legendItem: {
order: 5,
},
},
{
text: 'Security',
values: [11, 17, 15, 20, 13, 15, 17, 12, 14],
backgroundColor: '#8f53c6',
legendItem: {
order: 4,
},
},
{
text: 'Facilities',
values: [21, 14, 14, 14, 33, 18, 19, 28, 14],
backgroundColor: '#3b9fa5',
legendItem: {
order: 3,
},
},
{
text: 'Core Infrastructure',
values: [14, 23, 21, 20, 9, 14, 11, 19, 18],
backgroundColor: '#a5b1b7',
legendItem: {
order: 2,
},
},
{
text: 'Available Overflow',
values: [21, 11, 19, 16, 9, 11, 20, 11, 18],
backgroundColor: '#c46a53',
legendItem: {
order: 1,
},
},
],
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
</script>
</body>
</html>
let chartConfig = {
type: 'bar',
backgroundColor: '#343856 #212339',
fillAngle: 45,
stacked: true,
stackType: '100%',
title: {
text: 'COMMUNITY SERVER MONITORING',
backgroundColor: 'none',
fontColor: '#fff',
fontFamily: 'Arial',
fontSize: '14px',
height: '40px',
padding: '20px 0 0 20px',
textAlign: 'left',
},
legend: {
backgroundColor: '#31344c',
borderColor: 'none',
borderWidth: '0px',
header: {
text: 'MONITORED SYSTEMS',
backgroundColor: '#212339',
borderColor: 'none',
borderWidth: '0px',
fontColor: '#fff',
fontFamily: 'Arial',
fontSize: '10px',
height: '30px',
padding: '5px 10px',
},
item: {
alpha: 0.6,
fontColor: '#fff',
fontFamily: 'Arial',
fontSize: '10px',
fontWeight: 'normal',
},
padding: '10px 5px',
shadow: false,
toggleAction: 'remove',
y: '75px',
},
plot: {
tooltip: {
text: '<b>%k</b><br>%t CPU usage: %v%<br><br><b>Average of all</b><br>%t CPU usage: %pavg%',
alpha: 0.95,
backgroundColor: '#212339',
borderColor: 'none',
borderRadius: '8px',
borderWidth: '0px',
decimals: 0,
fontColor: '#fff',
fontFamily: 'Arial',
fontSize: '10px',
fontWeight: 'normal',
padding: '10px 10px',
shadow: false,
textAlign: 'left',
},
alpha: 0.8,
animation: {
delay: 500,
effect: 'ANIMATION_EXPAND_TOP',
method: 'ANIMATION_LINEAR',
sequence: 'ANIMATION_BY_PLOT',
speed: '1000',
},
barWidth: '25px',
hoverState: {
alpha: 1,
backgroundColor: '#212339',
},
},
plotarea: {
margin: '75px 180px 85px 80px',
},
scaleX: {
values: [
'North 1',
'North 2',
'South 1',
'South 2',
'East 1',
'East 2',
'West 1',
'West 2',
'CoLo 1',
],
guide: {
visible: false,
},
item: {
fontAngle: -48,
fontColor: '#9a9cab',
fontFamily: 'Arial',
fontSize: '10px',
offsetX: '5px',
},
itemsOverlap: true,
label: {
text: 'SERVER BUILDING LOCATION',
fontColor: '#fff',
fontFamily: 'Arial',
fontSize: '10px',
fontWeight: 'normal',
paddingTop: '30px',
},
lineColor: '#53566f',
tick: {
lineColor: '#53566f',
},
},
scaleY: {
guide: {
alpha: 0.4,
lineColor: '#53566f',
lineStyle: 'solid',
lineWidth: '1px',
},
item: {
fontColor: '#9a9cab',
fontFamily: 'Arial',
fontSize: '10px',
padding: '3px',
},
label: {
text: 'SERVER CPU USAGE',
fontColor: '#fff',
fontFamily: 'Arial',
fontSize: '10px',
fontWeight: 'normal',
},
lineColor: '#53566f',
tick: {
lineColor: '#53566f',
},
},
series: [
{
text: 'Communications',
values: [19, 17, 24, 13, 17, 22, 20, 16, 17],
backgroundColor: '#3e99cf',
legendItem: {
order: 6,
},
},
{
text: 'Business Systems',
values: [14, 18, 7, 17, 19, 20, 13, 14, 19],
backgroundColor: '#f4b557',
legendItem: {
order: 5,
},
},
{
text: 'Security',
values: [11, 17, 15, 20, 13, 15, 17, 12, 14],
backgroundColor: '#8f53c6',
legendItem: {
order: 4,
},
},
{
text: 'Facilities',
values: [21, 14, 14, 14, 33, 18, 19, 28, 14],
backgroundColor: '#3b9fa5',
legendItem: {
order: 3,
},
},
{
text: 'Core Infrastructure',
values: [14, 23, 21, 20, 9, 14, 11, 19, 18],
backgroundColor: '#a5b1b7',
legendItem: {
order: 2,
},
},
{
text: 'Available Overflow',
values: [21, 11, 19, 16, 9, 11, 20, 11, 18],
backgroundColor: '#c46a53',
legendItem: {
order: 1,
},
},
],
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
