<!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"]; // CHART CONFIG
// -----------------------------
let chartConfig = {
type: 'hbullet',
title: {
text: 'Call Center Daily Goals',
fontColor: '#212121'
},
plot: {
tooltip: {
text: '%t: %v of %g',
borderRadius: '3px',
borderWidth: '0px',
fontSize: '12px'
},
barSpace: '8px',
goal: {
alpha: 0.9,
borderWidth: '0px'
}
},
plotarea: {
margin: '50 50 90 120'
},
scaleX: {
guide: {
lineStyle: 'solid',
lineWidth: '1px',
visible: true
},
item: {
visible: false
},
label: {
text: 'Agent',
offsetX: '-70px'
}
},
scaleY: {
guide: {
visible: false
},
label: {
text: 'Number of Incidents'
}
},
labels: [{
text: '',
backgroundImage: '//demos.zingchart.com/view/6FW4FFOV/avitar11.png',
hook: 'scale:name=scale-x,index=0',
offsetX: '-50px',
width: '50px',
height: '50px'
},
{
text: '',
backgroundImage: '//demos.zingchart.com/view/6FW4FFOV/avitar22.png',
hook: 'scale:name=scale-x,index=1',
offsetX: '-50px',
width: '50px',
height: '50px'
},
{
text: '',
backgroundImage: '//demos.zingchart.com/view/6FW4FFOV/avitar33.png',
hook: 'scale:name=scale-x,index=2',
offsetX: '-50px',
width: '50px',
height: '50px'
},
{
text: '',
backgroundImage: '//demos.zingchart.com/view/6FW4FFOV/avitar44.png',
hook: 'scale:name=scale-x,index=3',
offsetX: '-50px',
width: '50px',
height: '50px'
}
],
series: [{
text: 'Inbound Calls',
values: [35, 22, 50, 65],
backgroundColor: '#009688',
goal: {
backgroundColor: '#00796b'
},
goals: [25, 30, 30, 45]
},
{
text: 'Outbound Calls',
values: [30, 30, 20, 15],
backgroundColor: '#ffc107',
goal: {
backgroundColor: '#ffa000'
},
goals: [45, 50, 45, 30]
},
{
text: 'Call Escalations',
values: [10, 42, 12, 8],
backgroundColor: '#9c27b0',
goal: {
backgroundColor: '#7b1fa2'
},
goals: [5, 15, 10, 15]
}
]
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
</script>
</body>
</html>
// CHART CONFIG
// -----------------------------
let chartConfig = {
type: 'hbullet',
title: {
text: 'Call Center Daily Goals',
fontColor: '#212121'
},
plot: {
tooltip: {
text: '%t: %v of %g',
borderRadius: '3px',
borderWidth: '0px',
fontSize: '12px'
},
barSpace: '8px',
goal: {
alpha: 0.9,
borderWidth: '0px'
}
},
plotarea: {
margin: '50 50 90 120'
},
scaleX: {
guide: {
lineStyle: 'solid',
lineWidth: '1px',
visible: true
},
item: {
visible: false
},
label: {
text: 'Agent',
offsetX: '-70px'
}
},
scaleY: {
guide: {
visible: false
},
label: {
text: 'Number of Incidents'
}
},
labels: [
{
text: '',
backgroundImage: '//demos.zingchart.com/view/6FW4FFOV/avitar11.png',
hook: 'scale:name=scale-x,index=0',
offsetX: '-50px',
width: '50px',
height: '50px'
},
{
text: '',
backgroundImage: '//demos.zingchart.com/view/6FW4FFOV/avitar22.png',
hook: 'scale:name=scale-x,index=1',
offsetX: '-50px',
width: '50px',
height: '50px'
},
{
text: '',
backgroundImage: '//demos.zingchart.com/view/6FW4FFOV/avitar33.png',
hook: 'scale:name=scale-x,index=2',
offsetX: '-50px',
width: '50px',
height: '50px'
},
{
text: '',
backgroundImage: '//demos.zingchart.com/view/6FW4FFOV/avitar44.png',
hook: 'scale:name=scale-x,index=3',
offsetX: '-50px',
width: '50px',
height: '50px'
}
],
series: [
{
text: 'Inbound Calls',
values: [35, 22, 50, 65],
backgroundColor: '#009688',
goal: {
backgroundColor: '#00796b'
},
goals: [25, 30, 30, 45]
},
{
text: 'Outbound Calls',
values: [30, 30, 20, 15],
backgroundColor: '#ffc107',
goal: {
backgroundColor: '#ffa000'
},
goals: [45, 50, 45, 30]
},
{
text: 'Call Escalations',
values: [10, 42, 12, 8],
backgroundColor: '#9c27b0',
goal: {
backgroundColor: '#7b1fa2'
},
goals: [5, 15, 10, 15]
}
]
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
