<!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: #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"]; // full ZingChart schema can be found here:
// https://www.zingchart.com/docs/api/json-configuration/
let chartConfig = {
graphset: [{
type: 'bar',
title: {
text: 'Stacked Bar Chart',
align: 'left',
color: '#5D7D9A',
padding: '30 0 0 35',
},
subtitle: {
text: 'Lets you stack multiple data sets on top of each other.',
align: 'left',
color: '#5D7D9A',
fontWeight: 300,
padding: '35 0 0 35',
},
legend: {
layout: '3x2',
align: 'right',
verticalAlign: 'top',
margin: '5 20 0 0',
padding: '5px',
borderRadius: '5px',
header: {
text: 'Legend',
color: '#5D7D9A',
padding: '10px',
},
item: {
color: '#5D7D9A',
},
},
plot: {
tooltip: {
visible: false,
},
stacked: true,
barWidth: '25%',
},
plotarea: {
margin: '130 10 90 60',
},
scaleX: {
labels: [
'North 1',
'North 2',
'South 1',
'South 2',
'East 1',
'East 2',
'West 1',
'West 2',
'CoLo 1',
],
label: {
color: '#6C6C6C',
text: '<br>Server Building Location',
},
item: {
color: '#6C6C6C',
angle: '-35',
},
lineColor: '#D8D8D8',
tick: {
visible: false,
_lineColor: '#D8D8D8',
},
},
scaleY: {
values: '0:100:20',
label: {
padding: '20 0 0 0',
text: 'Server CPU Usage %',
color: '#6C6C6C',
},
guide: {
lineStyle: 'solid',
},
item: {
color: '#6C6C6C',
},
lineColor: '#D8D8D8',
tick: {
lineColor: '#D8D8D8',
},
},
crosshairX: {
plotLabel: {
backgroundColor: '#fff',
borderColor: '#EEE',
borderRadius: '5px',
fontColor: '#333',
padding: '10px',
},
scaleLabel: {
text: '%v',
alpha: 0,
transform: {
type: 'date',
all: '%M %d, %Y<br>%g:%i %a',
},
fontFamily: 'Georgia',
},
},
series: [{
values: [19, 29, 22, 15, 20, 21, 19, 16, 18],
backgroundColor: '#01a3f4',
lineColor: '#45D6C4',
marker: {
backgroundColor: '#01a3f4',
borderColor: '#01a3f4',
},
},
{
values: [16, 14, 8, 20, 17, 22, 24, 20, 17],
backgroundColor: '#99d1ee',
lineColor: '#99d1ee',
marker: {
backgroundColor: '#99d1ee',
borderColor: '#99d1ee',
},
},
{
values: [19, 12, 15, 14, 20, 12, 16, 22, 19],
backgroundColor: '#295A73',
lineColor: '#295A73',
marker: {
backgroundColor: '#295A73',
borderColor: '#295A73',
},
},
{
values: [12, 17, 17, 15, 24, 19, 8, 21, 16],
backgroundColor: '#5cd6fa',
lineColor: '#5cd6fa',
marker: {
backgroundColor: '#5cd6fa',
borderColor: '#5cd6fa',
},
},
{
values: [13, 12, 20, 20, 14, 16, 15, 13, 17],
backgroundColor: '#156eb0',
lineColor: '#156eb0',
marker: {
backgroundColor: '#156eb0',
borderColor: '#156eb0',
},
},
{
values: [21, 16, 18, 16, 5, 10, 18, 8, 13],
backgroundColor: '#45d7c5',
lineColor: '#45d7c5',
marker: {
backgroundColor: '#45d7c5',
borderColor: '#45d7c5',
},
},
],
}, ],
};
// render chart
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
</script>
</body>
</html>
// full ZingChart schema can be found here:
// https://www.zingchart.com/docs/api/json-configuration/
let chartConfig = {
graphset: [
{
type: 'bar',
title: {
text: 'Stacked Bar Chart',
align: 'left',
color: '#5D7D9A',
padding: '30 0 0 35',
},
subtitle: {
text: 'Lets you stack multiple data sets on top of each other.',
align: 'left',
color: '#5D7D9A',
fontWeight: 300,
padding: '35 0 0 35',
},
legend: {
layout: '3x2',
align: 'right',
verticalAlign: 'top',
margin: '5 20 0 0',
padding: '5px',
borderRadius: '5px',
header: {
text: 'Legend',
color: '#5D7D9A',
padding: '10px',
},
item: {
color: '#5D7D9A',
},
},
plot: {
tooltip: {
visible: false,
},
stacked: true,
barWidth: '25%',
},
plotarea: {
margin: '130 10 90 60',
},
scaleX: {
labels: [
'North 1',
'North 2',
'South 1',
'South 2',
'East 1',
'East 2',
'West 1',
'West 2',
'CoLo 1',
],
label: {
color: '#6C6C6C',
text: '<br>Server Building Location',
},
item: {
color: '#6C6C6C',
angle: '-35',
},
lineColor: '#D8D8D8',
tick: {
visible: false,
_lineColor: '#D8D8D8',
},
},
scaleY: {
values: '0:100:20',
label: {
padding: '20 0 0 0',
text: 'Server CPU Usage %',
color: '#6C6C6C',
},
guide: {
lineStyle: 'solid',
},
item: {
color: '#6C6C6C',
},
lineColor: '#D8D8D8',
tick: {
lineColor: '#D8D8D8',
},
},
crosshairX: {
plotLabel: {
backgroundColor: '#fff',
borderColor: '#EEE',
borderRadius: '5px',
fontColor: '#333',
padding: '10px',
},
scaleLabel: {
text: '%v',
alpha: 0,
transform: {
type: 'date',
all: '%M %d, %Y<br>%g:%i %a',
},
fontFamily: 'Georgia',
},
},
series: [
{
values: [19, 29, 22, 15, 20, 21, 19, 16, 18],
backgroundColor: '#01a3f4',
lineColor: '#45D6C4',
marker: {
backgroundColor: '#01a3f4',
borderColor: '#01a3f4',
},
},
{
values: [16, 14, 8, 20, 17, 22, 24, 20, 17],
backgroundColor: '#99d1ee',
lineColor: '#99d1ee',
marker: {
backgroundColor: '#99d1ee',
borderColor: '#99d1ee',
},
},
{
values: [19, 12, 15, 14, 20, 12, 16, 22, 19],
backgroundColor: '#295A73',
lineColor: '#295A73',
marker: {
backgroundColor: '#295A73',
borderColor: '#295A73',
},
},
{
values: [12, 17, 17, 15, 24, 19, 8, 21, 16],
backgroundColor: '#5cd6fa',
lineColor: '#5cd6fa',
marker: {
backgroundColor: '#5cd6fa',
borderColor: '#5cd6fa',
},
},
{
values: [13, 12, 20, 20, 14, 16, 15, 13, 17],
backgroundColor: '#156eb0',
lineColor: '#156eb0',
marker: {
backgroundColor: '#156eb0',
borderColor: '#156eb0',
},
},
{
values: [21, 16, 18, 16, 5, 10, 18, 8, 13],
backgroundColor: '#45d7c5',
lineColor: '#45d7c5',
marker: {
backgroundColor: '#45d7c5',
borderColor: '#45d7c5',
},
},
],
},
],
};
// render chart
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
