<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
.zc-body {
background: #fff;
}
.chart--container {
height: 100%;
width: 100%;
min-height: 530px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body class="zc-body">
<div id="myChart" class="chart--container">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
// DEFINE CHART LOCATIONS (IDS)
// -----------------------------
// Main chart render location
var chartId = 'myChart';
// CHART CONFIG
// -----------------------------
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"
}
}
]
}]
};
// CHART ACTION
// -----------------------------
zingchart.bind(null, 'dataparse', function(e, oGraph) {
var arrowArray = [];
// 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(Arrow(curIndex));
});
oGraph.graphset[0].arrows = arrowArray;
}
}
return oGraph;
});
// RENDER CHART
// -----------------------------
zingchart.render({
id: chartId,
data: myConfig,
height: 560,
width: '100%'
});
// HELPER FNS
// -----------------------------
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]
};
}
</script>
</body>
</html>
// DEFINE CHART LOCATIONS (IDS)
// -----------------------------
// Main chart render location
var chartId = 'myChart';
// CHART CONFIG
// -----------------------------
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"
}
}
]
}
]
};
// CHART ACTION
// -----------------------------
zingchart.bind(null, 'dataparse', function(e, oGraph) {
var arrowArray = [];
// 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(Arrow(curIndex));
});
oGraph.graphset[0].arrows = arrowArray;
}
}
return oGraph;
});
// RENDER CHART
// -----------------------------
zingchart.render({
id: chartId,
data : myConfig,
height: 560,
width: '100%'
});
// HELPER FNS
// -----------------------------
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]
};
}
