<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<link href='//fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
html,
body,
#myChart {
width: 100%;
height: 100%;
}
.zc-ref {
display: none;
}
</style>
</head>
<body>
<div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Charts by ZingChart</a></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
var myConfig = {
"globals": {
"font-family": "Roboto"
},
"graphset": [{
"type": "area",
"background-color": "#fff",
"utc": true,
"title": {
"y": "15px",
"text": "Website Traffic Metrics",
"background-color": "none",
"font-color": "#05636c",
"font-size": "24px",
"height": "25px",
"adjust-layout": true
},
"plotarea": {
"margin-top": "10%",
"margin-right": "dynamic",
"margin-bottom": "dynamic",
"margin-left": "dynamic",
"adjust-layout": true
},
"labels": [{
"text": "Visitors: %plot-2-value",
"default-value": "",
"color": "#8da0cb",
"x": "20%",
"y": 50,
"width": 120,
"text-align": "left",
"bold": 0,
"font-size": "14px",
"font-weight": "bold"
},
{
"text": "Clicks: %plot-1-value",
"default-value": "",
"color": "#66c2a5",
"x": "45%",
"y": 50,
"width": 120,
"text-align": "left",
"bold": 0,
"font-size": "14px",
"font-weight": "bold"
},
{
"text": "Returns: %plot-0-value",
"default-value": "",
"color": "#fc8d62",
"x": "70%",
"y": 50,
"width": 120,
"text-align": "left",
"bold": 0,
"font-size": "14px",
"font-weight": "bold"
}
],
"scale-x": {
"label": {
"text": "Date Range",
"font-size": "14px",
"font-weight": "normal",
"offset-x": "10%",
"font-angle": 360
},
"item": {
"text-align": "center",
"font-color": "#05636c"
},
"zooming": 1,
"max-labels": 12,
"labels": [
"Sept<br>19",
"Sept<br>20",
"Sept<br>21",
"Sept<br>22",
"Sept<br>23",
"Sept<br>24",
"Sept<br>25",
"Sept<br>26",
"Sept<br>27",
"Sept<br>28",
"Sept<br>29",
"Sept<br>30"
],
"max-items": 12,
"items-overlap": true,
"guide": {
"line-width": "0px"
},
"tick": {
"line-width": "2px"
},
},
"crosshair-x": {
"line-color": "#fff",
"line-width": 1,
"plot-label": {
"visible": false
}
},
"scale-y": {
"values": "0:2500:500",
"item": {
"font-color": "#05636c",
"font-weight": "normal"
},
"label": {
"text": "Metrics",
"font-size": "14px"
},
"guide": {
"line-width": "0px",
"alpha": 0.2,
"line-style": "dashed"
}
},
"plot": {
"line-width": 2,
"marker": {
"size": 1,
"visible": false
},
"tooltip": {
"font-family": "Roboto",
"font-size": "15px",
"text": "There were %v %t on %data-days",
"text-align": "left",
"border-radius": 5,
"padding": 10
}
},
"series": [{
"values": [
1204,
1179,
1146,
1182,
1058,
1086,
1141,
1105,
1202,
992,
373,
466
],
"data-days": [
"Sept 19",
"Sept 20",
"Sept 21",
"Sept 22",
"Sept 23",
"Sept 24",
"Sept 25",
"Sept 26",
"Sept 27",
"Sept 28",
"Sept 29",
"Sept 30"
],
"line-color": "#fc8d62",
"aspect": "spline",
"background-color": "#fc8d62",
"alpha-area": ".5",
"font-family": "Roboto",
"font-size": "14px",
"text": "returns"
},
{
"values": [
1625,
1683,
1659,
1761,
1904,
1819,
1631,
1592,
1498,
1594,
1782,
1644
],
"data-days": [
"Sept 19",
"Sept 20",
"Sept 21",
"Sept 22",
"Sept 23",
"Sept 24",
"Sept 25",
"Sept 26",
"Sept 27",
"Sept 28",
"Sept 29",
"Sept 30"
],
"line-color": "#66c2a5",
"background-color": "#66c2a5",
"alpha-area": ".3",
"text": "clicks",
"aspect": "spline",
"font-family": "Roboto",
"font-size": "14px"
},
{
"values": [
314,
1395,
1292,
1259,
1269,
1132,
1012,
1082,
1116,
1039,
1132,
1227
],
"data-days": [
"Sept 19",
"Sept 20",
"Sept 21",
"Sept 22",
"Sept 23",
"Sept 24",
"Sept 25",
"Sept 26",
"Sept 27",
"Sept 28",
"Sept 29",
"Sept 30"
],
"line-color": "#8da0cb",
"background-color": "#8da0cb",
"aspect": "spline",
"alpha-area": "0.2",
"text": "visitors",
"font-family": "Roboto",
"font-size": "14px"
}
]
}]
};
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>
<link href='//fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Charts by ZingChart</a></div>
</body>
</html>
html,
body,
#myChart {
width: 100%;
height: 100%;
}
.zc-ref {
display: none;
}
var myConfig = {
"globals": {
"font-family": "Roboto"
},
"graphset": [{
"type": "area",
"background-color": "#fff",
"utc": true,
"title": {
"y": "15px",
"text": "Website Traffic Metrics",
"background-color": "none",
"font-color": "#05636c",
"font-size": "24px",
"height": "25px",
"adjust-layout": true
},
"plotarea": {
"margin-top": "10%",
"margin-right": "dynamic",
"margin-bottom": "dynamic",
"margin-left": "dynamic",
"adjust-layout": true
},
"labels": [{
"text": "Visitors: %plot-2-value",
"default-value": "",
"color": "#8da0cb",
"x": "20%",
"y": 50,
"width": 120,
"text-align": "left",
"bold": 0,
"font-size": "14px",
"font-weight": "bold"
},
{
"text": "Clicks: %plot-1-value",
"default-value": "",
"color": "#66c2a5",
"x": "45%",
"y": 50,
"width": 120,
"text-align": "left",
"bold": 0,
"font-size": "14px",
"font-weight": "bold"
},
{
"text": "Returns: %plot-0-value",
"default-value": "",
"color": "#fc8d62",
"x": "70%",
"y": 50,
"width": 120,
"text-align": "left",
"bold": 0,
"font-size": "14px",
"font-weight": "bold"
}
],
"scale-x": {
"label": {
"text": "Date Range",
"font-size": "14px",
"font-weight": "normal",
"offset-x": "10%",
"font-angle": 360
},
"item": {
"text-align": "center",
"font-color": "#05636c"
},
"zooming": 1,
"max-labels": 12,
"labels": [
"Sept<br>19",
"Sept<br>20",
"Sept<br>21",
"Sept<br>22",
"Sept<br>23",
"Sept<br>24",
"Sept<br>25",
"Sept<br>26",
"Sept<br>27",
"Sept<br>28",
"Sept<br>29",
"Sept<br>30"
],
"max-items": 12,
"items-overlap": true,
"guide": {
"line-width": "0px"
},
"tick": {
"line-width": "2px"
},
},
"crosshair-x": {
"line-color": "#fff",
"line-width": 1,
"plot-label": {
"visible": false
}
},
"scale-y": {
"values": "0:2500:500",
"item": {
"font-color": "#05636c",
"font-weight": "normal"
},
"label": {
"text": "Metrics",
"font-size": "14px"
},
"guide": {
"line-width": "0px",
"alpha": 0.2,
"line-style": "dashed"
}
},
"plot": {
"line-width": 2,
"marker": {
"size": 1,
"visible": false
},
"tooltip": {
"font-family": "Roboto",
"font-size": "15px",
"text": "There were %v %t on %data-days",
"text-align": "left",
"border-radius": 5,
"padding": 10
}
},
"series": [{
"values": [
1204,
1179,
1146,
1182,
1058,
1086,
1141,
1105,
1202,
992,
373,
466
],
"data-days": [
"Sept 19",
"Sept 20",
"Sept 21",
"Sept 22",
"Sept 23",
"Sept 24",
"Sept 25",
"Sept 26",
"Sept 27",
"Sept 28",
"Sept 29",
"Sept 30"
],
"line-color": "#fc8d62",
"aspect": "spline",
"background-color": "#fc8d62",
"alpha-area": ".5",
"font-family": "Roboto",
"font-size": "14px",
"text": "returns"
},
{
"values": [
1625,
1683,
1659,
1761,
1904,
1819,
1631,
1592,
1498,
1594,
1782,
1644
],
"data-days": [
"Sept 19",
"Sept 20",
"Sept 21",
"Sept 22",
"Sept 23",
"Sept 24",
"Sept 25",
"Sept 26",
"Sept 27",
"Sept 28",
"Sept 29",
"Sept 30"
],
"line-color": "#66c2a5",
"background-color": "#66c2a5",
"alpha-area": ".3",
"text": "clicks",
"aspect": "spline",
"font-family": "Roboto",
"font-size": "14px"
},
{
"values": [
314,
1395,
1292,
1259,
1269,
1132,
1012,
1082,
1116,
1039,
1132,
1227
],
"data-days": [
"Sept 19",
"Sept 20",
"Sept 21",
"Sept 22",
"Sept 23",
"Sept 24",
"Sept 25",
"Sept 26",
"Sept 27",
"Sept 28",
"Sept 29",
"Sept 30"
],
"line-color": "#8da0cb",
"background-color": "#8da0cb",
"aspect": "spline",
"alpha-area": "0.2",
"text": "visitors",
"font-family": "Roboto",
"font-size": "14px"
}
]
}]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});