<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script 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',
padding: '20px 0 0 20px',
backgroundColor: 'none',
fontColor: '#fff',
fontFamily: 'Arial',
fontSize: '14px',
height: '40px',
textAlign: 'left'
},
legend: {
padding: '10px 5px',
backgroundColor: '#31344c',
borderColor: 'none',
borderWidth: '0px',
header: {
text: 'MONITORED SYSTEMS',
padding: '5px 10px',
backgroundColor: '#212339',
borderColor: 'none',
borderWidth: '0px',
fontColor: '#fff',
fontFamily: 'Arial',
fontSize: '10px',
height: '30px'
},
item: {
alpha: 0.6,
fontColor: '#fff',
fontFamily: 'Arial',
fontSize: '10px',
fontWeight: 'normal'
},
shadow: false,
toggleAction: 'remove',
y: '75px'
},
plot: {
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',
paddingTop: '30px',
fontColor: '#fff',
fontFamily: 'Arial',
fontSize: '10px',
fontWeight: 'normal'
},
lineColor: '#53566f',
tick: {
lineColor: '#53566f'
}
},
scaleY: {
guide: {
alpha: 0.4,
lineColor: '#53566f',
lineStyle: 'solid',
lineWidth: '1px'
},
item: {
padding: '3px',
fontColor: '#9a9cab',
fontFamily: 'Arial',
fontSize: '10px'
},
label: {
text: 'SERVER CPU USAGE',
fontColor: '#fff',
fontFamily: 'Arial',
fontSize: '10px',
fontWeight: 'normal'
},
lineColor: '#53566f',
tick: {
lineColor: '#53566f'
}
},
tooltip: {
text: '<b>%k</b><br>%t CPU usage: %v%<br><br><b>Average of all</b><br>%t CPU usage: %pavg%',
padding: '10px 10px',
alpha: 0.95,
backgroundColor: '#212339',
borderColor: 'none',
borderRadius: '8px',
borderWidth: '0px',
decimals: 0,
fontColor: '#fff',
fontFamily: 'Arial',
fontSize: '10px',
fontWeight: 'normal',
shadow: false,
textAlign: 'left'
},
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',
padding: '20px 0 0 20px',
backgroundColor: 'none',
fontColor: '#fff',
fontFamily: 'Arial',
fontSize: '14px',
height: '40px',
textAlign: 'left'
},
legend: {
padding: '10px 5px',
backgroundColor: '#31344c',
borderColor: 'none',
borderWidth: '0px',
header: {
text: 'MONITORED SYSTEMS',
padding: '5px 10px',
backgroundColor: '#212339',
borderColor: 'none',
borderWidth: '0px',
fontColor: '#fff',
fontFamily: 'Arial',
fontSize: '10px',
height: '30px'
},
item: {
alpha: 0.6,
fontColor: '#fff',
fontFamily: 'Arial',
fontSize: '10px',
fontWeight: 'normal'
},
shadow: false,
toggleAction: 'remove',
y: '75px'
},
plot: {
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',
paddingTop: '30px',
fontColor: '#fff',
fontFamily: 'Arial',
fontSize: '10px',
fontWeight: 'normal'
},
lineColor: '#53566f',
tick: {
lineColor: '#53566f'
}
},
scaleY: {
guide: {
alpha: 0.4,
lineColor: '#53566f',
lineStyle: 'solid',
lineWidth: '1px'
},
item: {
padding: '3px',
fontColor: '#9a9cab',
fontFamily: 'Arial',
fontSize: '10px'
},
label: {
text: 'SERVER CPU USAGE',
fontColor: '#fff',
fontFamily: 'Arial',
fontSize: '10px',
fontWeight: 'normal'
},
lineColor: '#53566f',
tick: {
lineColor: '#53566f'
}
},
tooltip: {
text: '<b>%k</b><br>%t CPU usage: %v%<br><br><b>Average of all</b><br>%t CPU usage: %pavg%',
padding: '10px 10px',
alpha: 0.95,
backgroundColor: '#212339',
borderColor: 'none',
borderRadius: '8px',
borderWidth: '0px',
decimals: 0,
fontColor: '#fff',
fontFamily: 'Arial',
fontSize: '10px',
fontWeight: 'normal',
shadow: false,
textAlign: 'left'
},
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%',
});
