<!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>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#myChart {
height: 100%;
width: 100%;
min-height: 150px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body>
<div id="myChart"></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
var myChart = {
"type": "mixed",
"legend": {
"alpha": 0,
"width": 168,
"margin-right": "0",
"margin-top": "45",
"max-items": 8,
"overflow": "page",
"layout": "x1",
"toggle-action": "remove"
},
"plot": {
"bar-width": "75%",
"joined": true
},
"plotarea": {
"margin-right": "216",
"margin-top": "50"
},
"scale-x": {
"visible": true,
"item": {
"visible": true,
"font-angle": 0
},
"progression": "linear"
},
"scale-y": {
"visible": true,
"decimals": 0,
"decimals-separator": ".",
"thousands-separator": ",",
"format": "$%v",
"label": {
"text": "Cost",
"text-decoration": "none",
"text-align": "center"
},
"progression": "linear"
},
"scale-y-2": {
"visible": true,
"decimals": 2,
"decimals-separator": ".",
"thousands-separator": ",",
"format": "%v%",
"max-value": 85.71295951029543,
"min-value": 85.0838100215073,
"progression": "linear"
},
"series": [{
"values": [
["Jan-2017", 7374886680.469998]
],
"text": "ROP Value (A)",
"joined": true,
"tooltip": {
"text": "%t\n$%v\n%kl",
"text-decoration": "none",
"decimals": "0",
"thousands-separator": ",",
"decimals-separator": ".",
"visible": true
},
"type": "bar",
"legend-item": {
"width": 143,
"text": "ROP Value (A)",
"text-decoration": "none",
"wrap-text": true
}
},
{
"values": [
["Jan-2017", 85.71295951029543]
],
"text": "Customer Fill Rate (A)",
"joined": true,
"tooltip": {
"text": "%v% @ %kl\n%t",
"text-decoration": "none",
"decimals": "2",
"thousands-separator": ",",
"decimals-separator": ".",
"visible": true
},
"type": "line",
"scales": "scale-x,scale-y-2",
"legend-item": {
"width": 143,
"text": "Customer Fill Rate (A)",
"text-decoration": "none",
"wrap-text": true
},
"visible": false
},
{
"values": [
["Jan-2017", 85.0838100215073]
],
"text": "Total Fill Rate (A)",
"joined": true,
"tooltip": {
"text": "%v% @ %kl\n%t",
"text-decoration": "none",
"decimals": "2",
"thousands-separator": ",",
"decimals-separator": ".",
"visible": true
},
"type": "line",
"scales": "scale-x,scale-y-2",
"legend-item": {
"width": 143,
"text": "Total Fill Rate (A)",
"text-decoration": "none",
"wrap-text": true
}
}
],
"title": {
"text": "ROP Vs Fill Rate",
"text-decoration": "none",
"text-align": "center"
},
"stacked": false,
"gui": {
"behaviors": [{
"id": "FullScreen",
"enabled": "all"
}],
"inherit": "all"
}
};
zingchart.render({
id: "myChart",
data: myChart,
});
</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 {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#myChart {
height: 100%;
width: 100%;
min-height: 150px;
}
.zc-ref {
display: none;
}
var myChart = {
"type": "mixed",
"legend": {
"alpha": 0,
"width": 168,
"margin-right": "0",
"margin-top": "45",
"max-items": 8,
"overflow": "page",
"layout": "x1",
"toggle-action": "remove"
},
"plot": {
"bar-width": "75%",
"joined": true
},
"plotarea": {
"margin-right": "216",
"margin-top": "50"
},
"scale-x": {
"visible": true,
"item": {
"visible": true,
"font-angle": 0
},
"progression": "linear"
},
"scale-y": {
"visible": true,
"decimals": 0,
"decimals-separator": ".",
"thousands-separator": ",",
"format": "$%v",
"label": {
"text": "Cost",
"text-decoration": "none",
"text-align": "center"
},
"progression": "linear"
},
"scale-y-2": {
"visible": true,
"decimals": 2,
"decimals-separator": ".",
"thousands-separator": ",",
"format": "%v%",
"max-value": 85.71295951029543,
"min-value": 85.0838100215073,
"progression": "linear"
},
"series": [{
"values": [
["Jan-2017", 7374886680.469998]
],
"text": "ROP Value (A)",
"joined": true,
"tooltip": {
"text": "%t\n$%v\n%kl",
"text-decoration": "none",
"decimals": "0",
"thousands-separator": ",",
"decimals-separator": ".",
"visible": true
},
"type": "bar",
"legend-item": {
"width": 143,
"text": "ROP Value (A)",
"text-decoration": "none",
"wrap-text": true
}
},
{
"values": [
["Jan-2017", 85.71295951029543]
],
"text": "Customer Fill Rate (A)",
"joined": true,
"tooltip": {
"text": "%v% @ %kl\n%t",
"text-decoration": "none",
"decimals": "2",
"thousands-separator": ",",
"decimals-separator": ".",
"visible": true
},
"type": "line",
"scales": "scale-x,scale-y-2",
"legend-item": {
"width": 143,
"text": "Customer Fill Rate (A)",
"text-decoration": "none",
"wrap-text": true
},
"visible": false
},
{
"values": [
["Jan-2017", 85.0838100215073]
],
"text": "Total Fill Rate (A)",
"joined": true,
"tooltip": {
"text": "%v% @ %kl\n%t",
"text-decoration": "none",
"decimals": "2",
"thousands-separator": ",",
"decimals-separator": ".",
"visible": true
},
"type": "line",
"scales": "scale-x,scale-y-2",
"legend-item": {
"width": 143,
"text": "Total Fill Rate (A)",
"text-decoration": "none",
"wrap-text": true
}
}
],
"title": {
"text": "ROP Vs Fill Rate",
"text-decoration": "none",
"text-align": "center"
},
"stacked": false,
"gui": {
"behaviors": [{
"id": "FullScreen",
"enabled": "all"
}],
"inherit": "all"
}
};
zingchart.render({
id: "myChart",
data: myChart,
});