<!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>
.zc-ref {
display: none;
}
</style>
</head>
<body>
<div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
var myConfig = {
"graphset": [{
"type": "mixed",
"title": {
"text": "Chart Title",
"align": "left",
"font-size": 14,
"background-color": "#BDBDBD",
"height": "5%"
},
"subtitle": {
"text": "Subtitle",
"align": "left",
"background-color": "#E0E0E0",
"height": "4%",
"offset-y": -5
},
"source": {
"text": "Source: www.zingchart.com",
"font-color": "#B71C1C"
},
"legend": {
"layout": "x2",
"width": "180px",
"x": "74%",
"y": "9.5%",
"alpha": 1,
"shadow": 0,
"max-items": 2,
"overflow": "page",
"draggable": true,
"minimize": true,
"header": {
"text": "Legend Info"
},
"footer": {
"text": "- Click Box Icon in Header to Minimize<br>- Click and Drag Cross Icon to Drag",
"font-size": "8px"
},
},
"plotarea": {
"margin": "34% 30% 10% 10%"
},
"scale-x": {
"values": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
"zooming": true,
"guide": {
"line-style": "solid",
"line-color": "#BDBDBD"
},
"label": {
"text": "X label"
},
"markers": [{
"type": "area",
"range": [6.5, 7.5],
"background-color": "#66BB6A",
"alpha": 0.5,
"label": {
"text": "Active<br>Month",
"offset-y": -245,
"angle": 0,
"font-size": 10,
"bold": true
}
},
{
"type": "area",
"range": [7.5, 11.5],
"background-color": "#cccccc",
"alpha": 0.5
}
]
},
"scale-x-2": {
"values": ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
"guide": {
"visible": false
},
"label": {
"text": "X-2 label"
},
"zooming": true
},
"scale-y": {
"zooming": true,
"guide": {
"line-style": "solid"
},
"label": {
"text": "Y label"
},
"minor-ticks": 3,
"minor-tick": {
"placement": "cross",
"size": 6
},
"minor-guide": {
"line-width": "1px",
"line-style": "dashed",
"line-segement-size": "1px",
"line-gap-size": "6px",
"alpha": 0.7
},
"markers": [{
"type": "line",
"range": [74],
"line-color": "#212121",
"alpha": 1,
"line-width": 2,
"label": {
"text": "Threshold",
"offset-x": -60,
"offset-y": 8,
"background-color": "#212121",
"font-color": "white",
"font-size": 10,
"callout": true,
"callout-position": "right"
}
}]
},
"scale-y-2": {
"values": "0:100:10",
"format": "%v%",
"zooming": true,
"guide": {
"visible": false
},
"label": {
"text": "Y-2 label"
}
},
"scale-y-3": {
"values": "0:50:10",
"decimals": 2,
"zooming": true,
"guide": {
"visible": false
},
"label": {
"text": "Y-3 label"
}
},
"scale-y-4": {
"values": "0:1000000:100000",
"format": "$%v",
"multiplier": true,
"zooming": true,
"guide": {
"visible": false
},
"label": {
"text": "Y-4 label"
}
},
"scroll-x": {
"bar": {
"height": "8px",
"background-color": "#757575"
},
"handle": {
"height": "4px",
"offset-y": -1,
"background-color": "#E0E0E0"
}
},
"scroll-y": {
"bar": {
"width": "8px",
"background-color": "#757575"
},
"handle": {
"width": "4px",
"offset-x": -1,
"background-color": "#E0E0E0"
}
},
"crosshair-x": {
"plot-label": {
"visible": false
}
},
"crosshair-y": {
},
"zoom": {
"background-color": "#B71C1C",
"alpha": 0.2,
"label": {
"visible": true,
"border-color": "#B71C1C"
}
},
"preview": {
"height": 50,
"width": "69%",
"position": "14% 14%"
},
"labels": [{
"text": "View External<br>Report",
"url": "https://www.zingchart.com/buy",
"target": "_blank",
"offset-y": "-35px",
"hook": "node:plot=2,index=4",
"font-color": "#000",
"background-color": "#ccc",
"padding": 5,
"border-radius": "3px",
"callout": true,
"callout-height": "10px",
"callout-width": "15px",
"underline": true
}],
"series": [{
"type": "line",
"values": [69, 68, 54, 80, 70, 74, 90, 70, 72, 68, 49, 69],
"scales": "scale-x,scale-y",
"line-color": "#0D47A1",
"legend-marker": {
"type": "circle"
},
"marker": {
"background-color": "#0D47A1"
}
},
{
"type": "line",
"values": [51, 53, 47, 50, 57, 63, 75, 52, 59, 47, 60, 48],
"scales": "scale-x,scale-y-2",
"line-color": "#B71C1C",
"tooltip-text": "%v%",
"legend-marker": {
"type": "circle"
},
"marker": {
"background-color": "#B71C1C"
}
},
{
"type": "bar",
"values": [22, 25, 14, 22, 26, 29, 34, 22, 26, 18, 22, 21],
"scales": "scale-x,scale-y-3",
"background-color": "#1B5E20",
"tooltip": {
"text": "The number being shown is the percentage of the node when compared to its plot",
"width": "200px",
"wrap-text": 1
},
"value-box": {
"placement": "top-in",
"offset-y": 5,
"font-color": "#fff",
"text": "%pper%",
"decimals": 1,
"font-angle": 90
}
},
{
"type": "bar",
"values": [250000, 150000, 260000, 210000, 240000, 260000, 330000, 150000, 410000, 250000, 220000, 240000],
"scales": "scale-x,scale-y-4",
"background-color": "#E65100",
"text": "Dell",
"tooltip": {
"text": "The number being shown above the bar is the value of the node",
"width": "200px",
"wrap-text": 1
},
"value-box": {
"short": true,
"placement": "top-in",
"offset-y": 5,
"font-angle": 90,
"font-color": "#fff",
"bold": true
}
}
]
}],
"background-color": "white"
};
zingchart.render({
id: 'myChart',
data: myConfig
});
</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'><a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a></div>
</body>
</html>
var myConfig = {
"graphset": [{
"type": "mixed",
"title": {
"text": "Chart Title",
"align": "left",
"font-size": 14,
"background-color": "#BDBDBD",
"height": "5%"
},
"subtitle": {
"text": "Subtitle",
"align": "left",
"background-color": "#E0E0E0",
"height": "4%",
"offset-y": -5
},
"source": {
"text": "Source: www.zingchart.com",
"font-color": "#B71C1C"
},
"legend": {
"layout": "x2",
"width": "180px",
"x": "74%",
"y": "9.5%",
"alpha": 1,
"shadow": 0,
"max-items": 2,
"overflow": "page",
"draggable": true,
"minimize": true,
"header": {
"text": "Legend Info"
},
"footer": {
"text": "- Click Box Icon in Header to Minimize<br>- Click and Drag Cross Icon to Drag",
"font-size": "8px"
},
},
"plotarea": {
"margin": "34% 30% 10% 10%"
},
"scale-x": {
"values": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
"zooming": true,
"guide": {
"line-style": "solid",
"line-color": "#BDBDBD"
},
"label": {
"text": "X label"
},
"markers": [{
"type": "area",
"range": [6.5, 7.5],
"background-color": "#66BB6A",
"alpha": 0.5,
"label": {
"text": "Active<br>Month",
"offset-y": -245,
"angle": 0,
"font-size": 10,
"bold": true
}
},
{
"type": "area",
"range": [7.5, 11.5],
"background-color": "#cccccc",
"alpha": 0.5
}
]
},
"scale-x-2": {
"values": ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
"guide": {
"visible": false
},
"label": {
"text": "X-2 label"
},
"zooming": true
},
"scale-y": {
"zooming": true,
"guide": {
"line-style": "solid"
},
"label": {
"text": "Y label"
},
"minor-ticks": 3,
"minor-tick": {
"placement": "cross",
"size": 6
},
"minor-guide": {
"line-width": "1px",
"line-style": "dashed",
"line-segement-size": "1px",
"line-gap-size": "6px",
"alpha": 0.7
},
"markers": [{
"type": "line",
"range": [74],
"line-color": "#212121",
"alpha": 1,
"line-width": 2,
"label": {
"text": "Threshold",
"offset-x": -60,
"offset-y": 8,
"background-color": "#212121",
"font-color": "white",
"font-size": 10,
"callout": true,
"callout-position": "right"
}
}]
},
"scale-y-2": {
"values": "0:100:10",
"format": "%v%",
"zooming": true,
"guide": {
"visible": false
},
"label": {
"text": "Y-2 label"
}
},
"scale-y-3": {
"values": "0:50:10",
"decimals": 2,
"zooming": true,
"guide": {
"visible": false
},
"label": {
"text": "Y-3 label"
}
},
"scale-y-4": {
"values": "0:1000000:100000",
"format": "$%v",
"multiplier": true,
"zooming": true,
"guide": {
"visible": false
},
"label": {
"text": "Y-4 label"
}
},
"scroll-x": {
"bar": {
"height": "8px",
"background-color": "#757575"
},
"handle": {
"height": "4px",
"offset-y": -1,
"background-color": "#E0E0E0"
}
},
"scroll-y": {
"bar": {
"width": "8px",
"background-color": "#757575"
},
"handle": {
"width": "4px",
"offset-x": -1,
"background-color": "#E0E0E0"
}
},
"crosshair-x": {
"plot-label": {
"visible": false
}
},
"crosshair-y": {
},
"zoom": {
"background-color": "#B71C1C",
"alpha": 0.2,
"label": {
"visible": true,
"border-color": "#B71C1C"
}
},
"preview": {
"height": 50,
"width": "69%",
"position": "14% 14%"
},
"labels": [{
"text": "View External<br>Report",
"url": "https://www.zingchart.com/buy",
"target": "_blank",
"offset-y": "-35px",
"hook": "node:plot=2,index=4",
"font-color": "#000",
"background-color": "#ccc",
"padding": 5,
"border-radius": "3px",
"callout": true,
"callout-height": "10px",
"callout-width": "15px",
"underline": true
}],
"series": [{
"type": "line",
"values": [69, 68, 54, 80, 70, 74, 90, 70, 72, 68, 49, 69],
"scales": "scale-x,scale-y",
"line-color": "#0D47A1",
"legend-marker": {
"type": "circle"
},
"marker": {
"background-color": "#0D47A1"
}
},
{
"type": "line",
"values": [51, 53, 47, 50, 57, 63, 75, 52, 59, 47, 60, 48],
"scales": "scale-x,scale-y-2",
"line-color": "#B71C1C",
"tooltip-text": "%v%",
"legend-marker": {
"type": "circle"
},
"marker": {
"background-color": "#B71C1C"
}
},
{
"type": "bar",
"values": [22, 25, 14, 22, 26, 29, 34, 22, 26, 18, 22, 21],
"scales": "scale-x,scale-y-3",
"background-color": "#1B5E20",
"tooltip": {
"text": "The number being shown is the percentage of the node when compared to its plot",
"width": "200px",
"wrap-text": 1
},
"value-box": {
"placement": "top-in",
"offset-y": 5,
"font-color": "#fff",
"text": "%pper%",
"decimals": 1,
"font-angle": 90
}
},
{
"type": "bar",
"values": [250000, 150000, 260000, 210000, 240000, 260000, 330000, 150000, 410000, 250000, 220000, 240000],
"scales": "scale-x,scale-y-4",
"background-color": "#E65100",
"text": "Dell",
"tooltip": {
"text": "The number being shown above the bar is the value of the node",
"width": "200px",
"wrap-text": 1
},
"value-box": {
"short": true,
"placement": "top-in",
"offset-y": 5,
"font-angle": 90,
"font-color": "#fff",
"bold": true
}
}
]
}],
"background-color": "white"
};
zingchart.render({
id: 'myChart',
data: myConfig
});