<!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 = {
"type": "line",
"background-color": "transparent",
"utc": true,
"title": {
"y": "0px",
"text": "",
"background-color": "transparent",
"font-size": "16px",
"font-color": "#666",
"font-weight": "bold",
"letter-spacing": "0.1225em",
"height": "25px"
},
"plotarea": {
"margin": "10% 8% 14% 12%",
"background-color": "#666"
},
"legend": {
"visible": false
},
"scale-x": {
"min-value": 1436458200000,
"shadow": 0,
"line-color": "#fff",
"tick": {
"line-color": "#f6f7f8"
},
"guide": {
"line-color": "#f6f7f8",
"visible": true
},
"item": {
"font-color": "#666"
},
"transform": {
"type": "date",
"all": "%D,%d %M<br />%h:%i %A",
"item": {
"visible": false
}
},
"label": {
"visible": false,
"font-color": "#666"
},
"minor-ticks": 0
},
"scale-y": {
"values": "25:200:25",
"line-color": "#fff",
"shadow": 0,
"tick": {
"line-color": "#f6f7f8"
},
"guide": {
"visible": false
},
"item": {
"font-color": "#666"
},
"label": {
"text": "Heart Rate (BPM)",
"font-color": "#666"
},
"minor-ticks": 0,
"thousands-separator": ",",
"markers": [{
"type": "area",
"range": [
25,
60
],
"backgroundColor": "#585857",
"alpha": 1
},
{
"type": "area",
"range": [
60,
95
],
"backgroundColor": "#6FCBDC",
"alpha": 1
},
{
"type": "area",
"range": [
95,
130
],
"backgroundColor": "#8BC540",
"alpha": 1
},
{
"type": "area",
"range": [
130,
165
],
"backgroundColor": "#F38220",
"alpha": 1
},
{
"type": "area",
"range": [
165,
200
],
"backgroundColor": "#EB2026",
"alpha": 1
}
]
},
"tooltip": {
"font-color": "#666",
"visible": false
},
"chart": {
"marginRight": 30,
"marginLeft": 70
},
"plot": {
"tooltip-text": "%t bpm: %v",
"shadow": 0,
"line-width": "3px",
"marker": {
"type": "circle",
"size": 2
},
"hover-marker": {
"type": "circle",
"size": 4,
"border-width": "1px"
}
},
"series": [{
"values": [
88,
96,
93,
88,
88,
86,
89,
120,
144,
153,
156,
132,
113,
145,
138,
152,
135,
155,
164,
165,
147,
143,
152,
140,
153,
138,
116,
125,
131,
132,
134,
124,
111,
136,
167,
171,
165,
168,
139,
129,
138,
130,
140,
141
],
"text": "",
"line-color": "#ffffff",
"marker": {
"background-color": "#ffffff",
"border-width": 1,
"shadow": 0,
"border-color": "#ffffff",
"visible": true
},
"palette": 0
}],
"crosshair-x": {
"line-color": "#f6f7f8",
"value-label": {
"border-radius": "5px",
"border-width": "1px",
"border-color": "#f6f7f8",
"padding": "0px 10px 0px 5px",
"font-weight": "bold",
"font-color": "#fff",
"background-color": "#666",
"visible": true
},
"scale-label": {
"font-color": "#fff",
"background-color": "#666",
"border-radius": "5px",
"border-width": "1px",
"border-color": "#f6f7f8",
"padding": "0px 10px 0px 5px",
"visible": true
}
}
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: 600
});
</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 = {
"type": "line",
"background-color": "transparent",
"utc": true,
"title": {
"y": "0px",
"text": "",
"background-color": "transparent",
"font-size": "16px",
"font-color": "#666",
"font-weight": "bold",
"letter-spacing": "0.1225em",
"height": "25px"
},
"plotarea": {
"margin": "10% 8% 14% 12%",
"background-color": "#666"
},
"legend": {
"visible": false
},
"scale-x": {
"min-value": 1436458200000,
"shadow": 0,
"line-color": "#fff",
"tick": {
"line-color": "#f6f7f8"
},
"guide": {
"line-color": "#f6f7f8",
"visible": true
},
"item": {
"font-color": "#666"
},
"transform": {
"type": "date",
"all": "%D,%d %M<br />%h:%i %A",
"item": {
"visible": false
}
},
"label": {
"visible": false,
"font-color": "#666"
},
"minor-ticks": 0
},
"scale-y": {
"values": "25:200:25",
"line-color": "#fff",
"shadow": 0,
"tick": {
"line-color": "#f6f7f8"
},
"guide": {
"visible": false
},
"item": {
"font-color": "#666"
},
"label": {
"text": "Heart Rate (BPM)",
"font-color": "#666"
},
"minor-ticks": 0,
"thousands-separator": ",",
"markers": [{
"type": "area",
"range": [
25,
60
],
"backgroundColor": "#585857",
"alpha": 1
},
{
"type": "area",
"range": [
60,
95
],
"backgroundColor": "#6FCBDC",
"alpha": 1
},
{
"type": "area",
"range": [
95,
130
],
"backgroundColor": "#8BC540",
"alpha": 1
},
{
"type": "area",
"range": [
130,
165
],
"backgroundColor": "#F38220",
"alpha": 1
},
{
"type": "area",
"range": [
165,
200
],
"backgroundColor": "#EB2026",
"alpha": 1
}
]
},
"tooltip": {
"font-color": "#666",
"visible": false
},
"chart": {
"marginRight": 30,
"marginLeft": 70
},
"plot": {
"tooltip-text": "%t bpm: %v",
"shadow": 0,
"line-width": "3px",
"marker": {
"type": "circle",
"size": 2
},
"hover-marker": {
"type": "circle",
"size": 4,
"border-width": "1px"
}
},
"series": [{
"values": [
88,
96,
93,
88,
88,
86,
89,
120,
144,
153,
156,
132,
113,
145,
138,
152,
135,
155,
164,
165,
147,
143,
152,
140,
153,
138,
116,
125,
131,
132,
134,
124,
111,
136,
167,
171,
165,
168,
139,
129,
138,
130,
140,
141
],
"text": "",
"line-color": "#ffffff",
"marker": {
"background-color": "#ffffff",
"border-width": 1,
"shadow": 0,
"border-color": "#ffffff",
"visible": true
},
"palette": 0
}],
"crosshair-x": {
"line-color": "#f6f7f8",
"value-label": {
"border-radius": "5px",
"border-width": "1px",
"border-color": "#f6f7f8",
"padding": "0px 10px 0px 5px",
"font-weight": "bold",
"font-color": "#fff",
"background-color": "#666",
"visible": true
},
"scale-label": {
"font-color": "#fff",
"background-color": "#666",
"border-radius": "5px",
"border-width": "1px",
"border-color": "#f6f7f8",
"padding": "0px 10px 0px 5px",
"visible": true
}
}
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: 600
});