<!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>
@import url('https://fonts.googleapis.com/css?family=Dosis&display=swap');
.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"]; // HELPER METHODS
// -----------------------------
let graphConfig = (
margin,
scaleY,
range1,
range2,
range3,
scaleXValues,
values,
goals
) => {
let config = {
type: 'vbullet',
backgroundColor: 'none',
plot: {
tooltip: {
text: 'Actual Value: %v%<br>Goal Value: %g%',
backgroundColor: '#36373c',
borderRadius: '6px',
fontColor: '#ffffff',
padding: '5px 10px',
shadow: false,
},
alpha: 0.8,
animation: {
delay: 0,
effect: 'ANIMATION_EXPAND_BOTTOM',
method: 'ANIMATION_LINEAR',
sequence: 'ANIMATION_NO_SEQUENCE',
speed: '1600',
},
backgroundColor: '#000000',
fillAngle: 0,
goal: {
alpha: 0.8,
backgroundColor: '#ffffff',
borderColor: '#000000',
borderRadius: '5px',
borderWidth: '1px',
},
},
plotarea: {
margin: margin,
},
scaleX: {
values: scaleXValues,
guide: {
visible: false,
},
item: {
bold: true,
fontColor: '#000',
fontFamily: 'Dosis',
fontSize: '14px',
},
lineColor: '#6b6f7a',
tick: {
visible: false,
},
},
scaleY: {
values: scaleY,
format: '%v%',
guide: {
alpha: 0.1,
lineColor: '#000000',
},
item: {
fontColor: '#8d939f',
fontFamily: 'Dosis',
fontSize: '12px',
},
lineColor: 'none',
markers: [{
type: 'area',
alpha: 0.7,
gradientColors: '#008c2f #d4eedc #009933 #35ae5d #007c29',
gradientStops: '0.05 0.1 0.2 0.85 0.95',
fillAngle: 0,
range: range1,
},
{
type: 'area',
alpha: 0.7,
gradientColors: '#bc9626 #fff6dc #ffcc33 #ffd75d #b28e24',
gradientStops: '0.06 0.13 0.2 0.85 0.95',
fillAngle: 0,
range: range2,
},
{
type: 'area',
alpha: 0.7,
gradientColors: '#a20000 #f6d4d4 #cc0000 #e16a6a #9a0000',
gradientStops: '0.06 0.15 0.2 0.86 0.95',
fillAngle: 0,
range: range3,
},
],
tick: {
visible: false,
},
},
series: [{
values: values,
goals: goals,
}, ],
};
// Add title to third graph
if (margin === '75px 25px 75px 40px') {
config['title'] = {
text: 'Client Stats',
marginTop: '15px',
backgroundColor: 'none',
fontColor: '#000000',
fontSize: '30px',
};
}
return config;
};
// CHART CONFIG
// -----------------------------
let chartConfig = {
backgroundColor: '#fff',
layout: 'x5',
graphset: [
graphConfig(
'75px 5px 75px 60px',
'0:50:10',
[0, 25],
[25, 40],
[40, 50],
['Attrition<br>Rate'],
[20],
[17]
),
graphConfig(
'75px 15px 75px 50px',
'0:50:10',
[0, 15],
[15, 30],
[30, 50],
['Wage<br>Increase'],
[45],
[20]
),
graphConfig(
'75px 25px 75px 40px',
'0:100:20',
[0, 35],
[35, 60],
[60, 100],
['Cost Per<br>Sale'],
[75],
[62]
),
graphConfig(
'75px 35px 75px 30px',
'0:50:10',
[0, 25],
[25, 45],
[45, 50],
['Cost Per<br>Prospectus'],
[38],
[30]
),
graphConfig(
'75px 40px 75px 25px',
'0:150:25',
[0, 55],
[55, 110],
[110, 150],
['Cost Per<br>Lead'],
[98],
[90]
),
],
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig,
});
</script>
</body>
</html>
// HELPER METHODS
// -----------------------------
let graphConfig = (
margin,
scaleY,
range1,
range2,
range3,
scaleXValues,
values,
goals
) => {
let config = {
type: 'vbullet',
backgroundColor: 'none',
plot: {
tooltip: {
text: 'Actual Value: %v%<br>Goal Value: %g%',
backgroundColor: '#36373c',
borderRadius: '6px',
fontColor: '#ffffff',
padding: '5px 10px',
shadow: false,
},
alpha: 0.8,
animation: {
delay: 0,
effect: 'ANIMATION_EXPAND_BOTTOM',
method: 'ANIMATION_LINEAR',
sequence: 'ANIMATION_NO_SEQUENCE',
speed: '1600',
},
backgroundColor: '#000000',
fillAngle: 0,
goal: {
alpha: 0.8,
backgroundColor: '#ffffff',
borderColor: '#000000',
borderRadius: '5px',
borderWidth: '1px',
},
},
plotarea: {
margin: margin,
},
scaleX: {
values: scaleXValues,
guide: {
visible: false,
},
item: {
bold: true,
fontColor: '#000',
fontFamily: 'Dosis',
fontSize: '14px',
},
lineColor: '#6b6f7a',
tick: {
visible: false,
},
},
scaleY: {
values: scaleY,
format: '%v%',
guide: {
alpha: 0.1,
lineColor: '#000000',
},
item: {
fontColor: '#8d939f',
fontFamily: 'Dosis',
fontSize: '12px',
},
lineColor: 'none',
markers: [
{
type: 'area',
alpha: 0.7,
gradientColors: '#008c2f #d4eedc #009933 #35ae5d #007c29',
gradientStops: '0.05 0.1 0.2 0.85 0.95',
fillAngle: 0,
range: range1,
},
{
type: 'area',
alpha: 0.7,
gradientColors: '#bc9626 #fff6dc #ffcc33 #ffd75d #b28e24',
gradientStops: '0.06 0.13 0.2 0.85 0.95',
fillAngle: 0,
range: range2,
},
{
type: 'area',
alpha: 0.7,
gradientColors: '#a20000 #f6d4d4 #cc0000 #e16a6a #9a0000',
gradientStops: '0.06 0.15 0.2 0.86 0.95',
fillAngle: 0,
range: range3,
},
],
tick: {
visible: false,
},
},
series: [
{
values: values,
goals: goals,
},
],
};
// Add title to third graph
if (margin === '75px 25px 75px 40px') {
config['title'] = {
text: 'Client Stats',
marginTop: '15px',
backgroundColor: 'none',
fontColor: '#000000',
fontSize: '30px',
};
}
return config;
};
// CHART CONFIG
// -----------------------------
let chartConfig = {
backgroundColor: '#fff',
layout: 'x5',
graphset: [
graphConfig(
'75px 5px 75px 60px',
'0:50:10',
[0, 25],
[25, 40],
[40, 50],
['Attrition<br>Rate'],
[20],
[17]
),
graphConfig(
'75px 15px 75px 50px',
'0:50:10',
[0, 15],
[15, 30],
[30, 50],
['Wage<br>Increase'],
[45],
[20]
),
graphConfig(
'75px 25px 75px 40px',
'0:100:20',
[0, 35],
[35, 60],
[60, 100],
['Cost Per<br>Sale'],
[75],
[62]
),
graphConfig(
'75px 35px 75px 30px',
'0:50:10',
[0, 25],
[25, 45],
[45, 50],
['Cost Per<br>Prospectus'],
[38],
[30]
),
graphConfig(
'75px 40px 75px 25px',
'0:150:25',
[0, 55],
[55, 110],
[110, 150],
['Cost Per<br>Lead'],
[98],
[90]
),
],
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig,
});
