<!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>
.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"]; // DEFINE DATA
// -----------------------------
let chartData = [{
values: [100, null, null],
backgroundColor: '#00c322',
borderColor: '#000000',
entry: {
values: [1, 1, 1],
padding: '5px',
labels: ['OP 1', null, null],
offsetX: '-5px',
},
shadow: false,
},
{
values: [90, 90, null],
backgroundColor: '#03899c',
borderColor: '#000000',
entry: {
values: [1, 1, 1],
padding: '5px',
labels: ['OP 2', 'TX', null],
offsetX: '-5px',
},
shadow: false,
},
{
values: [75, 80, 70],
backgroundColor: '#ff7a00',
borderColor: '#000000',
exit: {
values: [null, 1, null],
padding: '5px',
labels: [null, 'OP 3', null],
offsetX: '5px',
},
shadow: false,
},
{
values: [55, 50, 40],
backgroundColor: '#ff1300',
borderColor: '#000000',
shadow: false,
},
{
values: [20, 30, 10],
borderColor: '#000000',
exit: [{
values: [null, null, 1],
padding: '5px',
labels: [null, null, 'OUT 1'],
offsetX: '5px',
offsetY: '-3px',
},
{
values: [null, null, 1],
padding: '5px',
labels: [null, null, 'OUT 2'],
offsetX: '5px',
offsetY: '3px',
},
],
shadow: false,
},
];
// CHART CONFIG
// -----------------------------
let chartConfig = {
type: 'vfunnel',
theme: 'classic',
backgroundColor: '#fff',
backgroundColor2: '#f1f1f1',
plot: {
tooltip: {
shadow: false,
},
tooltipText: '%v Actions',
offset: '40px',
scales: 'scale-x-2,scale-y-2',
},
plotarea: {
margin: '75 25 50 125',
},
scaleX2: {
values: ['PROCESS 1', 'PROCESS 2', 'PROCESS 3'],
item: {
bold: true,
fontSize: '14px',
offsetY: '-20px',
},
},
scaleY: {
values: ['Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5'],
guide: {
items: [{
backgroundColor: 'none',
},
{
backgroundColor: '#DDE4E7',
},
],
},
item: {
fontSize: '14px',
fontStyle: 'italic',
offsetX: '-40px',
},
},
scaleY2: {
item: {
visible: false,
},
},
series: chartData,
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig,
});
</script>
</body>
</html>
// DEFINE DATA
// -----------------------------
let chartData = [
{
values: [100, null, null],
backgroundColor: '#00c322',
borderColor: '#000000',
entry: {
values: [1, 1, 1],
padding: '5px',
labels: ['OP 1', null, null],
offsetX: '-5px',
},
shadow: false,
},
{
values: [90, 90, null],
backgroundColor: '#03899c',
borderColor: '#000000',
entry: {
values: [1, 1, 1],
padding: '5px',
labels: ['OP 2', 'TX', null],
offsetX: '-5px',
},
shadow: false,
},
{
values: [75, 80, 70],
backgroundColor: '#ff7a00',
borderColor: '#000000',
exit: {
values: [null, 1, null],
padding: '5px',
labels: [null, 'OP 3', null],
offsetX: '5px',
},
shadow: false,
},
{
values: [55, 50, 40],
backgroundColor: '#ff1300',
borderColor: '#000000',
shadow: false,
},
{
values: [20, 30, 10],
borderColor: '#000000',
exit: [
{
values: [null, null, 1],
padding: '5px',
labels: [null, null, 'OUT 1'],
offsetX: '5px',
offsetY: '-3px',
},
{
values: [null, null, 1],
padding: '5px',
labels: [null, null, 'OUT 2'],
offsetX: '5px',
offsetY: '3px',
},
],
shadow: false,
},
];
// CHART CONFIG
// -----------------------------
let chartConfig = {
type: 'vfunnel',
theme: 'classic',
backgroundColor: '#fff',
backgroundColor2: '#f1f1f1',
plot: {
tooltip: {
shadow: false,
},
tooltipText: '%v Actions',
offset: '40px',
scales: 'scale-x-2,scale-y-2',
},
plotarea: {
margin: '75 25 50 125',
},
scaleX2: {
values: ['PROCESS 1', 'PROCESS 2', 'PROCESS 3'],
item: {
bold: true,
fontSize: '14px',
offsetY: '-20px',
},
},
scaleY: {
values: ['Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5'],
guide: {
items: [
{
backgroundColor: 'none',
},
{
backgroundColor: '#DDE4E7',
},
],
},
item: {
fontSize: '14px',
fontStyle: 'italic',
offsetX: '-40px',
},
},
scaleY2: {
item: {
visible: false,
},
},
series: chartData,
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig,
});
