<!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 = {
"background-color": "transparent",
"gui": {
"contextMenu": {
"visible": true
}
},
"globals": {
"font-family": "Open Sans",
"thousands-separator": ","
},
"graphset": [{
"type": "mixed",
"crosshair-x": {
"line-style": "dashed",
"line-color": "#787878",
"plot-label": {
"multiple": true,
"text-align": "left",
"font-size": "13px",
"background-color": "#fff",
"font-color": "#585858",
"padding": "8",
"border-color": "#d8d8d8",
"border-width": 1,
"border-radius": 2,
"callout": false,
"alpha": 0.9,
"visible": true
},
"scale-label": {
"background-color": "#787878",
"font-color": "#fff",
"font-size": "11px",
"callout": false,
"offset-y": "10px",
"visible": true
}
},
"title": {
"text": "Mixed Graph",
"font-size": "13px",
"font-weight": "bold",
"font-color": "#676a6c",
},
"plot": {
"bar-width": "60%",
"bars-overlap": "60%",
"stacked": false,
"preview": "false",
"selection-mode": "graph",
"background-mode": "graph",
"selected-state": {
"border-width": "2px",
"border-color": "#000"
},
"background-state": {
"alpha": "0.3"
},
"background-marker": {
"alpha": "0.3"
},
"animation": {
"delay": 0,
"effect": 4
},
"hover-state": {
"border-color": "#000",
"border-width": 1,
"visible": true
}
},
"zoom": {
"shared": true,
"label": {
"visible": true,
"font-color": "#3399ff",
"font-family": "Georgia",
"font-size": 10,
"font-style": "normal",
"font-weight": "normal",
"background-color": "white",
"border-width": 1,
"border-color": "#3399ff",
"alpha": 0.7,
"padding": "5%"
}
},
"preview": {
"x": "10%",
"y": "84%",
"width": "96%",
"height": "4%",
"background-color": "#f4f4f4",
"border-width": 0,
"mask": {
"background-color": "#ccc",
"alpha": 1
},
"handle": {
"width": "16px",
"height": "16px",
"border-width": "1",
"border-radius": 50,
"border-color": "#ccc",
"background-color": "#fff"
}
},
"legend": {
"background-color": "none",
"border-width": 0,
"shadow": false,
"layout": "float",
"margin": "0px 2% auto auto",
"item": {
"font-color": "#585858",
"font-size": "11px"
},
"marker": {
"width": "10px",
"height": "10px",
"border-radius": 1,
"border-width": 0
},
"border-color": "none",
"toggle-action": "none",
"visible": true
},
"scale-x": {
"zooming": true,
"item": {
"font-color": "#585858",
"font-size": "11px",
"padding-top": "12px",
"visible": true
},
"labels": ["Apr-2014", "May-2014", "Jun-2014", "Jul-2014", "Aug-2014", "Sep-2014", "Oct-2014", "Nov-2014", "Dec-2014", "Jan-2015", "Feb-2015", "Mar-2015", "Apr-2015", "May-2015", "Jun-2015", "Jul-2015", "Aug-2015", "Sep-2015"],
"line-color": "none",
"tick": {
"line-color": "#e8e8e8",
"visible": false
},
"guide": {
"line-style": "dotted",
"line-color": "#e8e8e8",
"visible": true
}
},
"scale-y": {
"line-color": "none",
"item": {
"font-color": "#585858",
"font-size": "11px",
"visible": true
},
"offset-start": "55%",
"auto-fit": true,
"decimals": "1",
"values": "11798:13408:536.6666666666666",
"short": true,
"guide": {
"line-style": "dotted",
"line-color": "#e8e8e8",
"visible": true
},
"tick": {
"line-color": "#e8e8e8",
"visible": false
}
},
"scale-y-2": {
"placement": "default",
"blended": true,
"line-color": "none",
"item": {
"font-color": "#585858",
"font-size": "11px",
"visible": true
},
"offset-end": "65%",
"short": true,
"guide": {
"line-style": "dotted",
"line-color": "#e8e8e8",
"visible": true
},
"ref-line": {
"line-style": "dotted",
"line-color": "#e8e8e8"
},
"tick": {
"line-color": "#e8e8e8",
"visible": false
},
"label": {
"text": "Users",
"font-size": "11px",
"font-weight": "normal",
"visible": false
}
},
"tooltip": {
"text-align": "left",
"font-size": "13px",
"background-color": "#fff",
"font-color": "#585858",
"padding": "8",
"border-color": "#d8d8d8",
"border-width": 1,
"border-radius": 2,
"alpha": 0.9,
"text": "<b>%t</b>\nPeriod: <b>%k</b>\nUsers: <b>%v</b>",
"visible": false
},
"series": [{
"type": "line",
"aspect": "spline",
"scales": "scale-x,scale-y",
"values": [13408, 13091, 12948, 12835, 12846, 12848, 12782, 12785, 12884, 12703, 12689, 11917, 11854, 11945, 11937, 11992, 12008, 11798],
"text": "Active Users",
"line-color": "rgb(98, 207, 115)",
"marker": {
"type": "circle",
"background-color": "rgb(98, 207, 115)",
"size": 4,
"shadow": 0
},
"hover-marker": {
"background-color": "#fff",
"border-width": 2,
"border-color": "rgb(98, 207, 115)",
"size": 4
},
"value-box": {
"visible": true,
"short": true,
"placement": "top",
"type": "min,max",
"background-color": "rgb(98, 207, 115)",
"padding": "4px",
"offset-y": "-12px",
"callout": true,
"shadow": 0,
"font-size": "10px",
"font-weight": "normal",
"font-color": "#fff",
"angle": 0,
"decimals": "1",
"text": "%v"
}
},
{
"type": "bar",
"scales": "scale-x, scale-y-2",
"values": [1666, 1613, 1605, 1592, 1612, 1593, 1594, 1595, 1609, 1578, 1581, 1507, 1508, 1526, 1514, 1520, 1532, 1503],
"text": "Connects",
"background-color": "rgb(103, 183, 220)",
"alpha": "1"
},
{
"type": "bar",
"scales": "scale-x, scale-y-2",
"values": [1633, 1589, 1580, 1574, 1583, 1561, 1550, 1537, 1543, 1527, 1534, 1432, 1411, 1430, 1435, 1440, 1443, 1409],
"text": "Disconnects",
"background-color": "rgb(253, 212, 0)",
"alpha": "1"
}
]
}]
};
zingchart.render({
id: 'myChart',
output: 'canvas',
data: myConfig,
height: 400,
width: '100%'
});
</script>
</body>
</html>
var myConfig = {
"background-color": "transparent",
"gui": {
"contextMenu": {
"visible": true
}
},
"globals": {
"font-family": "Open Sans",
"thousands-separator": ","
},
"graphset": [{
"type": "mixed",
"crosshair-x": {
"line-style": "dashed",
"line-color": "#787878",
"plot-label": {
"multiple": true,
"text-align": "left",
"font-size": "13px",
"background-color": "#fff",
"font-color": "#585858",
"padding": "8",
"border-color": "#d8d8d8",
"border-width": 1,
"border-radius": 2,
"callout": false,
"alpha": 0.9,
"visible": true
},
"scale-label": {
"background-color": "#787878",
"font-color": "#fff",
"font-size": "11px",
"callout": false,
"offset-y": "10px",
"visible": true
}
},
"title": {
"text": "Mixed Graph",
"font-size": "13px",
"font-weight": "bold",
"font-color": "#676a6c",
},
"plot": {
"bar-width": "60%",
"bars-overlap": "60%",
"stacked": false,
"preview": "false",
"selection-mode": "graph",
"background-mode": "graph",
"selected-state": {
"border-width": "2px",
"border-color": "#000"
},
"background-state": {
"alpha": "0.3"
},
"background-marker": {
"alpha": "0.3"
},
"animation": {
"delay": 0,
"effect": 4
},
"hover-state": {
"border-color": "#000",
"border-width": 1,
"visible": true
}
},
"zoom": {
"shared": true,
"label": {
"visible": true,
"font-color": "#3399ff",
"font-family": "Georgia",
"font-size": 10,
"font-style": "normal",
"font-weight": "normal",
"background-color": "white",
"border-width": 1,
"border-color": "#3399ff",
"alpha": 0.7,
"padding": "5%"
}
},
"preview": {
"x": "10%",
"y": "84%",
"width": "96%",
"height": "4%",
"background-color": "#f4f4f4",
"border-width": 0,
"mask": {
"background-color": "#ccc",
"alpha": 1
},
"handle": {
"width": "16px",
"height": "16px",
"border-width": "1",
"border-radius": 50,
"border-color": "#ccc",
"background-color": "#fff"
}
},
"legend": {
"background-color": "none",
"border-width": 0,
"shadow": false,
"layout": "float",
"margin": "0px 2% auto auto",
"item": {
"font-color": "#585858",
"font-size": "11px"
},
"marker": {
"width": "10px",
"height": "10px",
"border-radius": 1,
"border-width": 0
},
"border-color": "none",
"toggle-action": "none",
"visible": true
},
"scale-x": {
"zooming": true,
"item": {
"font-color": "#585858",
"font-size": "11px",
"padding-top": "12px",
"visible": true
},
"labels": ["Apr-2014", "May-2014", "Jun-2014", "Jul-2014", "Aug-2014", "Sep-2014", "Oct-2014", "Nov-2014", "Dec-2014", "Jan-2015", "Feb-2015", "Mar-2015", "Apr-2015", "May-2015", "Jun-2015", "Jul-2015", "Aug-2015", "Sep-2015"],
"line-color": "none",
"tick": {
"line-color": "#e8e8e8",
"visible": false
},
"guide": {
"line-style": "dotted",
"line-color": "#e8e8e8",
"visible": true
}
},
"scale-y": {
"line-color": "none",
"item": {
"font-color": "#585858",
"font-size": "11px",
"visible": true
},
"offset-start": "55%",
"auto-fit": true,
"decimals": "1",
"values": "11798:13408:536.6666666666666",
"short": true,
"guide": {
"line-style": "dotted",
"line-color": "#e8e8e8",
"visible": true
},
"tick": {
"line-color": "#e8e8e8",
"visible": false
}
},
"scale-y-2": {
"placement": "default",
"blended": true,
"line-color": "none",
"item": {
"font-color": "#585858",
"font-size": "11px",
"visible": true
},
"offset-end": "65%",
"short": true,
"guide": {
"line-style": "dotted",
"line-color": "#e8e8e8",
"visible": true
},
"ref-line": {
"line-style": "dotted",
"line-color": "#e8e8e8"
},
"tick": {
"line-color": "#e8e8e8",
"visible": false
},
"label": {
"text": "Users",
"font-size": "11px",
"font-weight": "normal",
"visible": false
}
},
"tooltip": {
"text-align": "left",
"font-size": "13px",
"background-color": "#fff",
"font-color": "#585858",
"padding": "8",
"border-color": "#d8d8d8",
"border-width": 1,
"border-radius": 2,
"alpha": 0.9,
"text": "<b>%t</b>\nPeriod: <b>%k</b>\nUsers: <b>%v</b>",
"visible": false
},
"series": [{
"type": "line",
"aspect": "spline",
"scales": "scale-x,scale-y",
"values": [13408, 13091, 12948, 12835, 12846, 12848, 12782, 12785, 12884, 12703, 12689, 11917, 11854, 11945, 11937, 11992, 12008, 11798],
"text": "Active Users",
"line-color": "rgb(98, 207, 115)",
"marker": {
"type": "circle",
"background-color": "rgb(98, 207, 115)",
"size": 4,
"shadow": 0
},
"hover-marker": {
"background-color": "#fff",
"border-width": 2,
"border-color": "rgb(98, 207, 115)",
"size": 4
},
"value-box": {
"visible": true,
"short": true,
"placement": "top",
"type": "min,max",
"background-color": "rgb(98, 207, 115)",
"padding": "4px",
"offset-y": "-12px",
"callout": true,
"shadow": 0,
"font-size": "10px",
"font-weight": "normal",
"font-color": "#fff",
"angle": 0,
"decimals": "1",
"text": "%v"
}
},
{
"type": "bar",
"scales": "scale-x, scale-y-2",
"values": [1666, 1613, 1605, 1592, 1612, 1593, 1594, 1595, 1609, 1578, 1581, 1507, 1508, 1526, 1514, 1520, 1532, 1503],
"text": "Connects",
"background-color": "rgb(103, 183, 220)",
"alpha": "1"
},
{
"type": "bar",
"scales": "scale-x, scale-y-2",
"values": [1633, 1589, 1580, 1574, 1583, 1561, 1550, 1537, 1543, 1527, 1534, 1432, 1411, 1430, 1435, 1440, 1443, 1409],
"text": "Disconnects",
"background-color": "rgb(253, 212, 0)",
"alpha": "1"
}
]
}]
};
zingchart.render({
id: 'myChart',
output: 'canvas',
data: myConfig,
height: 400,
width: '100%'
});