<!doctype html>
<html class="zc-html">
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script 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%',
padding: '5px 10px',
backgroundColor: '#36373c',
borderRadius: '6px',
fontColor: '#ffffff',
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%',
padding: '5px 10px',
backgroundColor: '#36373c',
borderRadius: '6px',
fontColor: '#ffffff',
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
});
