<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
html,
body,
#myChart {
height: 100%;
width: 100%;
}
zing-grid[loading] {
height: 450px;
}
</style>
</head>
<body>
<div id='myChart'></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
var myConfig = {
"type": "funnel",
"scale-x": {
"visible": true,
"labels": ["Q1", "Q2", "Q3", "Q4"],
"placement": "opposite",
"offset-start": 50
},
"plot": {
"min-exit": "15%"
},
"series": [{
"values": [101],
"entry": {
"values": [1],
"labels": ["Start"],
"padding": 4
}
},
{
"values": [90, 99],
"exit": {
"values": [1],
"labels": ["Next"]
}
},
{
"values": [60, 77, 59],
"entry": {
"values": [null, 1],
"labels": [null, "Surplus"]
}
},
{
"values": [30, 55, 34, 30],
"entry": [{
"values": [null, null, 1],
"labels": [null, null, "Carryover"]
},
{
"values": [null, null, 1],
"labels": [null, null, "New"]
}
],
"exit": {
"values": [null, null, 1],
"labels": [null, null, "Remaining"]
}
},
{
"values": [15, 33, 29, 11],
"exit": {
"values": [null, null, null, 1],
"labels": [null, null, null, "End"]
}
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: "100%",
width: "100%"
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id='myChart'></div>
</body>
</html>
html,body,#myChart{height: 100%;width: 100%;}
var myConfig = {
"type":"funnel",
"scale-x":{
"visible":true,
"labels":["Q1","Q2","Q3","Q4"],
"placement":"opposite",
"offset-start":50
},
"plot":{
"min-exit":"15%"
},
"series":[
{
"values":[101],
"entry":{
"values":[1],
"labels":["Start"],
"padding":4
}
},
{
"values":[90, 99],
"exit":{
"values":[1],
"labels":["Next"]
}
},
{
"values":[60, 77, 59],
"entry":{
"values":[null,1],
"labels":[null,"Surplus"]
}
},
{
"values":[30, 55, 34, 30],
"entry":[
{
"values":[null,null,1],
"labels":[null,null,"Carryover"]
},
{
"values":[null,null,1],
"labels":[null,null,"New"]
}
],
"exit":{
"values":[null,null,1],
"labels":[null,null,"Remaining"]
}
},
{
"values":[15, 33, 29, 11],
"exit":{
"values":[null,null,null,1],
"labels":[null,null,null,"End"]
}
}
]
};
zingchart.render({
id : 'myChart',
data : myConfig,
height : "100%",
width: "100%"
});