<!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"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
var myConfig = {
"graphset": [{
"arrows": [],
"type": "line",
"preview": {},
"title": {
"text": "Connecting Nodes With Arrows"
},
"subtitle": {
"text": "We use arrows so we can have the gradient color"
},
"backgroundColor": "#fff",
"plotarea": {
"marginRight": 75,
"marginLeft": 75
},
"plot": {
"line-width": 0
},
"scale-x": {
"labels": [
"1/09",
"1/10",
"1/11",
"1/13",
"1/17",
"1/18",
"1/21",
"1/23",
"1/24",
"1/25",
"1/27",
"1/28",
"1/31",
"2/01",
"2/03",
"2/04",
"2/06",
"2/07",
"2/08",
"2/11",
"2/13",
"2/14",
"2/15",
"2/17",
"2/20",
"2/21",
"2/22",
"2/24",
"2/25",
"2/27",
"2/28",
"3/01",
"3/03",
"3/04",
"3/06",
"3/07",
"3/08",
"3/10",
"3/11",
"3/13",
"3/15",
"3/17",
"3/18",
"3/20",
"3/21",
"3/22",
"3/24",
"3/25",
"3/30",
"3/31",
"4/07",
"4/14",
"4/21",
"4/22",
"4/25",
"4/26",
"4/28",
"4/29",
"5/02",
"5/03",
"5/05",
"5/09",
"5/10",
"5/11",
"5/12",
"5/13",
"5/16"
],
"zooming": true,
"zoom-snap": true,
"lineColor": "#151515",
"fontColor": "#333333",
"offset-end": 25,
"offset-start": 25,
"tick": {
"lineColor": "#cccccc",
"line-width": "1px"
},
"guide": {
"line-width": "1px",
"line-color": "#ccc",
"line-style": "solid"
},
"item": {
"fontColor": "#333333"
}
},
"crosshair-x": {
"plot-label": {
"text": "%t: %data-values",
"decimals": 2,
"border-radius": "5px"
}
},
"scale-y": {
"label": {
"text": "Temperature (ºF)",
"fontColor": "#333333"
},
"decimals": 0,
"format": "%v",
"step": 5,
"markers": [{
"type": "line",
"range": [
"33.98"
],
"lineColor": "#00AEEF",
"lineWidth": 2
}],
"max-value": 90.166,
"min-value": 28.792285714286002
},
"series": [{
"tooltip": {
"visible": false
},
"values": [
63.58,
55.79,
59.43,
58.78,
61.95,
60.28,
55.62,
59.42,
51.14,
61.35,
56.14,
59.67,
68.9,
63.54,
58.52,
56.54,
62.15,
63.89,
66.05,
65.16,
76.33,
71.61,
65.17,
70.89,
67.31,
69.7,
69.54,
58.67,
64.52,
68.87,
61.62,
58.07,
68.41,
61.23,
58.83,
61.74,
69.42,
78.73,
73.37,
71.3,
79.07,
85.17,
79.79,
77.5,
75.36,
71.65,
67.79,
69.93,
null,
null,
null,
null,
60.14,
57.38,
59.94,
59.05,
70,
70.02,
60.3,
66.41,
56.21,
55.25,
58.92,
57.99,
56.69,
50.64,
51.3
],
"hover-marker": {
"visible": false
},
"data-values": "%v",
"marker": {
"type": "circle",
"background-color": "#FCB040",
"size": 6,
"shadow": 0
},
"text": "Avg. PC Entry"
},
{
"tooltip": {
"visible": false
},
"values": [
42.23,
37,
40.61,
38.73,
37.15,
38.9,
35.87,
37.17,
35.45,
37.05,
36.34,
39.36,
37.58,
38.98,
38.15,
37.55,
39.03,
43.3,
37.35,
38.2,
38.59,
39.7,
36.42,
43.9,
41.64,
41.21,
43.1,
40.6,
38.73,
45.35,
43.45,
35.15,
44.16,
41.51,
39.79,
38.56,
42.36,
43.14,
39.26,
39.92,
38.97,
38.41,
40.88,
42.97,
42.65,
39.67,
40.57,
44.29,
null,
null,
null,
null,
37.64,
36.37,
39.5,
41.42,
42.84,
35.82,
39.33,
38.99,
35.34,
34.9,
35.27,
36.39,
34.5,
33.79,
35.26
],
"hover-marker": {
"visible": false
},
"data-values": "%v",
"marker": {
"type": "circle",
"background-color": "#00AEEF",
"size": 6,
"shadow": 0
},
"text": "Avg. PC Exit",
"preview-state": {
"lineColor": "00AEEF"
}
},
]
}]
};
function Arrow(nodeIndex) {
return {
"size": 0,
"shadow": false,
"alpha": 0.55,
"gradient-colors": "#FCB040 #00AEEF",
"border-width": 0,
"from": {
"hook": "node: plot=0,index=" + nodeIndex
},
"to": {
"hook": "node: plot=1,index=" + nodeIndex
},
"gradient-stops": "0.25 0.75",
"offset-y": "6px",
"aspect": [0, 0] // @here
}
}
zingchart.bind(null, 'dataparse', function(e, oGraph) {
var arrowArray = [];
// light sanity checks for malformed JSON
if (oGraph && oGraph.graphset && oGraph.graphset[0]) {
if (oGraph.graphset[0].series && oGraph.graphset[0].series[0]) {
oGraph.graphset[0].series[0].values.forEach(function(curVal, curIndex) {
arrowArray.push(new Arrow(curIndex));
});
oGraph.graphset[0].arrows = arrowArray;
}
}
return oGraph;
});
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});
</script>
</body>
</html>
var myConfig = {
"graphset": [{
"arrows": [],
"type": "line",
"preview": {},
"title": {
"text": "Connecting Nodes With Arrows"
},
"subtitle": {
"text": "We use arrows so we can have the gradient color"
},
"backgroundColor": "#fff",
"plotarea": {
"marginRight": 75,
"marginLeft": 75
},
"plot": {
"line-width": 0
},
"scale-x": {
"labels": [
"1/09",
"1/10",
"1/11",
"1/13",
"1/17",
"1/18",
"1/21",
"1/23",
"1/24",
"1/25",
"1/27",
"1/28",
"1/31",
"2/01",
"2/03",
"2/04",
"2/06",
"2/07",
"2/08",
"2/11",
"2/13",
"2/14",
"2/15",
"2/17",
"2/20",
"2/21",
"2/22",
"2/24",
"2/25",
"2/27",
"2/28",
"3/01",
"3/03",
"3/04",
"3/06",
"3/07",
"3/08",
"3/10",
"3/11",
"3/13",
"3/15",
"3/17",
"3/18",
"3/20",
"3/21",
"3/22",
"3/24",
"3/25",
"3/30",
"3/31",
"4/07",
"4/14",
"4/21",
"4/22",
"4/25",
"4/26",
"4/28",
"4/29",
"5/02",
"5/03",
"5/05",
"5/09",
"5/10",
"5/11",
"5/12",
"5/13",
"5/16"
],
"zooming": true,
"zoom-snap": true,
"lineColor": "#151515",
"fontColor": "#333333",
"offset-end": 25,
"offset-start": 25,
"tick": {
"lineColor": "#cccccc",
"line-width": "1px"
},
"guide": {
"line-width": "1px",
"line-color": "#ccc",
"line-style": "solid"
},
"item": {
"fontColor": "#333333"
}
},
"crosshair-x": {
"plot-label": {
"text": "%t: %data-values",
"decimals": 2,
"border-radius": "5px"
}
},
"scale-y": {
"label": {
"text": "Temperature (ºF)",
"fontColor": "#333333"
},
"decimals": 0,
"format": "%v",
"step": 5,
"markers": [{
"type": "line",
"range": [
"33.98"
],
"lineColor": "#00AEEF",
"lineWidth": 2
}],
"max-value": 90.166,
"min-value": 28.792285714286002
},
"series": [{
"tooltip": {
"visible": false
},
"values": [
63.58,
55.79,
59.43,
58.78,
61.95,
60.28,
55.62,
59.42,
51.14,
61.35,
56.14,
59.67,
68.9,
63.54,
58.52,
56.54,
62.15,
63.89,
66.05,
65.16,
76.33,
71.61,
65.17,
70.89,
67.31,
69.7,
69.54,
58.67,
64.52,
68.87,
61.62,
58.07,
68.41,
61.23,
58.83,
61.74,
69.42,
78.73,
73.37,
71.3,
79.07,
85.17,
79.79,
77.5,
75.36,
71.65,
67.79,
69.93,
null,
null,
null,
null,
60.14,
57.38,
59.94,
59.05,
70,
70.02,
60.3,
66.41,
56.21,
55.25,
58.92,
57.99,
56.69,
50.64,
51.3
],
"hover-marker": {
"visible": false
},
"data-values": "%v",
"marker": {
"type": "circle",
"background-color": "#FCB040",
"size": 6,
"shadow": 0
},
"text": "Avg. PC Entry"
},
{
"tooltip": {
"visible": false
},
"values": [
42.23,
37,
40.61,
38.73,
37.15,
38.9,
35.87,
37.17,
35.45,
37.05,
36.34,
39.36,
37.58,
38.98,
38.15,
37.55,
39.03,
43.3,
37.35,
38.2,
38.59,
39.7,
36.42,
43.9,
41.64,
41.21,
43.1,
40.6,
38.73,
45.35,
43.45,
35.15,
44.16,
41.51,
39.79,
38.56,
42.36,
43.14,
39.26,
39.92,
38.97,
38.41,
40.88,
42.97,
42.65,
39.67,
40.57,
44.29,
null,
null,
null,
null,
37.64,
36.37,
39.5,
41.42,
42.84,
35.82,
39.33,
38.99,
35.34,
34.9,
35.27,
36.39,
34.5,
33.79,
35.26
],
"hover-marker": {
"visible": false
},
"data-values": "%v",
"marker": {
"type": "circle",
"background-color": "#00AEEF",
"size": 6,
"shadow": 0
},
"text": "Avg. PC Exit",
"preview-state": {
"lineColor": "00AEEF"
}
},
]
}]
};
function Arrow(nodeIndex) {
return {
"size": 0,
"shadow": false,
"alpha": 0.55,
"gradient-colors": "#FCB040 #00AEEF",
"border-width": 0,
"from": {
"hook": "node: plot=0,index=" + nodeIndex
},
"to": {
"hook": "node: plot=1,index=" + nodeIndex
},
"gradient-stops": "0.25 0.75",
"offset-y": "6px",
"aspect": [0, 0] // @here
}
}
zingchart.bind(null, 'dataparse', function(e, oGraph) {
var arrowArray = [];
// light sanity checks for malformed JSON
if (oGraph && oGraph.graphset && oGraph.graphset[0]) {
if (oGraph.graphset[0].series && oGraph.graphset[0].series[0]) {
oGraph.graphset[0].series[0].values.forEach(function(curVal, curIndex) {
arrowArray.push(new Arrow(curIndex));
});
oGraph.graphset[0].arrows = arrowArray;
}
}
return oGraph;
});
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});