<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style></style>
</head>
<body>
<div id='myChart'></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
var myConfig = {
"graphset": [{
"type": "bar",
"plotarea": {
"adjust-layout": true,
"mask-tolerance": [0, 0]
},
"background-color": "#fff",
"plot": {
"alpha": 0.9,
"border-width": 1,
"border-color": "black",
"cursor": "pointer",
"border-radius-top-left": 4,
"border-radius-top-right": 4,
"animation": {
"effect": "ANIMATION_SLIDE_BOTTOM"
},
"hover-state": {
"alpha": 1,
"visible": true
},
valueBox: {},
tooltip: {
"border-color": "#fff",
"border-width": 1,
"border-radius": 3,
"wrap-text": true,
"alpha": 0.85,
"textAlpha": 1,
"text": "%node-value % chances in %data-timespan Days for location %kl"
}
},
"scale-x": {
"zooming": true,
"label": {
"text": "Location",
"font-color": "#000",
"font-size": "16px",
"text-align": "center",
"background-color": "#fff",
paddingTop: 20
},
"values": [" HYDERABAD", " GURGAON", " JAIPUR"],
"line-color": "#CCC",
"tick": {
"visible": false
},
"guide": {
"line-color": "#666",
"line-style": "solid"
},
"item": {
"font-family": "arial",
"font-color": "#000",
"background-color": "rgb(255,255,255)",
"padding-top": "4px"
}
},
"scale-y": {
"zooming": true,
"label": {
"text": "Attrition Rate",
"font-color": "#2B776C",
"font-size": "16px"
},
"line-color": "#CCC",
"tick": {
"visible": false
},
"guide": {
"line-style": "dashed",
"line-color": "#ccc"
},
"item": {
"font-family": "arial",
"font-color": "#8B8B8B"
},
"zoom-to": [32.5, 34.5]
},
"series": [{
"values": [33.59, 33.36, 32.93],
"background-color": "#ff3b3b",
"line-color": "#ff3b3b",
'data-timespan': 30
},
{
"values": [33.5, 33.08, 32.93],
"background-color": "#ff9b67",
"line-color": "#ff9b67",
'data-timespan': 30
},
{
"values": [32.91, 33.55, 34.15],
"background-color": "#6cebb3",
"line-color": "#6cebb3",
'data-timespan': 30
},
{
"values": [32.78, 33.33, 33.78],
"background-color": "#ff3b3b",
"line-color": "#ff3b3b",
'data-timespan': 60
},
{
"values": [34.04, 33.63, 32.93],
"background-color": "#ff9b67",
"line-color": "#ff9b67",
'data-timespan': 60
},
{
"values": [33.19, 33.04, 33.29],
"background-color": "#6cebb3",
"line-color": "#6cebb3",
'data-timespan': 60
},
{
"values": [33.76, 32.58, 33.51],
"background-color": "#ff3b3b",
"line-color": "#ff3b3b",
'data-timespan': 90
},
{
"values": [32.76, 33.98, 33.78],
"background-color": "#ff9b67",
"line-color": "#ff9b67",
'data-timespan': 90
},
{
"values": [33.49, 33.43, 32.71],
"background-color": "#6cebb3",
"line-color": "#6cebb3",
'data-timespan': 90
}
]
}]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
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>
var myConfig = {
"graphset": [{
"type": "bar",
"plotarea": {
"adjust-layout": true,
"mask-tolerance": [0, 0]
},
"background-color": "#fff",
"plot": {
"alpha": 0.9,
"border-width": 1,
"border-color": "black",
"cursor": "pointer",
"border-radius-top-left": 4,
"border-radius-top-right": 4,
"animation": {
"effect": "ANIMATION_SLIDE_BOTTOM"
},
"hover-state": {
"alpha": 1,
"visible": true
},
valueBox: {},
tooltip: {
"border-color": "#fff",
"border-width": 1,
"border-radius": 3,
"wrap-text": true,
"alpha": 0.85,
"textAlpha": 1,
"text": "%node-value % chances in %data-timespan Days for location %kl"
}
},
"scale-x": {
"zooming": true,
"label": {
"text": "Location",
"font-color": "#000",
"font-size": "16px",
"text-align": "center",
"background-color": "#fff",
paddingTop: 20
},
"values": [" HYDERABAD", " GURGAON", " JAIPUR"],
"line-color": "#CCC",
"tick": {
"visible": false
},
"guide": {
"line-color": "#666",
"line-style": "solid"
},
"item": {
"font-family": "arial",
"font-color": "#000",
"background-color": "rgb(255,255,255)",
"padding-top": "4px"
}
},
"scale-y": {
"zooming": true,
"label": {
"text": "Attrition Rate",
"font-color": "#2B776C",
"font-size": "16px"
},
"line-color": "#CCC",
"tick": {
"visible": false
},
"guide": {
"line-style": "dashed",
"line-color": "#ccc"
},
"item": {
"font-family": "arial",
"font-color": "#8B8B8B"
},
"zoom-to": [32.5, 34.5]
},
"series": [{
"values": [33.59, 33.36, 32.93],
"background-color": "#ff3b3b",
"line-color": "#ff3b3b",
'data-timespan': 30
},
{
"values": [33.5, 33.08, 32.93],
"background-color": "#ff9b67",
"line-color": "#ff9b67",
'data-timespan': 30
},
{
"values": [32.91, 33.55, 34.15],
"background-color": "#6cebb3",
"line-color": "#6cebb3",
'data-timespan': 30
},
{
"values": [32.78, 33.33, 33.78],
"background-color": "#ff3b3b",
"line-color": "#ff3b3b",
'data-timespan': 60
},
{
"values": [34.04, 33.63, 32.93],
"background-color": "#ff9b67",
"line-color": "#ff9b67",
'data-timespan': 60
},
{
"values": [33.19, 33.04, 33.29],
"background-color": "#6cebb3",
"line-color": "#6cebb3",
'data-timespan': 60
},
{
"values": [33.76, 32.58, 33.51],
"background-color": "#ff3b3b",
"line-color": "#ff3b3b",
'data-timespan': 90
},
{
"values": [32.76, 33.98, 33.78],
"background-color": "#ff9b67",
"line-color": "#ff9b67",
'data-timespan': 90
},
{
"values": [33.49, 33.43, 32.71],
"background-color": "#6cebb3",
"line-color": "#6cebb3",
'data-timespan': 90
}
]
}]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: '100%'
});