<!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>
.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
let chartId = 'myChart';
// CHART CONFIG
// -----------------------------
let myConfig = {
type: 'line',
backgroundColor: '#fff',
title: {
text: 'Connecting Nodes With Arrows',
},
subtitle: {
text: 'We use arrows so we can have the gradient color',
},
plot: {
lineWidth: 0
},
plotarea: {
marginRight: '75px',
marginLeft: '75px',
},
scaleX: {
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'
],
fontColor: '#333333',
guide: {
lineColor: '#ccc',
lineStyle: 'solid',
lineWidth: '1px',
},
item: {
fontColor: '#333333'
},
lineColor: '#151515',
offsetEnd: '25px',
offsetStart: '25px',
tick: {
lineColor: '#cccccc',
lineWidth: '1px',
},
zooming: true,
zoomSnap: true,
},
crosshairX: {
plotLabel: {
text: '%t: %data-values',
borderRadius: '5px',
decimals: 2,
}
},
scaleY: {
decimals: 0,
format: '%v',
label: {
text: 'Temperature (ºF)',
fontColor: '#333333',
},
markers: [{
type: 'line',
range: ['33.98'],
lineColor: '#00AEEF',
lineWidth: '2px',
}],
maxValue: 90.166,
minValue: 28.792285714286002,
step: 5,
},
arrows: [],
preview: {},
series: [{
text: 'Avg. PC Entry',
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
],
dataValues: '%v',
hoverMarker: {
visible: false,
},
marker: {
type: 'circle',
backgroundColor: '#FCB040',
size: 6,
shadow: 0,
},
tooltip: {
visible: false,
},
},
{
text: 'Avg. PC Exit',
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
],
dataValues: '%v',
hoverMarker: {
visible: false,
},
marker: {
type: 'circle',
backgroundColor: '#00AEEF',
size: 6,
shadow: 0,
},
previewState: {
lineColor: '00AEEF',
},
tooltip: {
visible: false
},
}
]
};
// CHART ACTION
// -----------------------------
zingchart.bind(null, 'dataparse', function(e, oGraph) {
let 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 {
alpha: 0.55,
aspect: [0, 0],
borderWidth: 0,
gradientColors: '#FCB040 #00AEEF',
gradientStops: '0.25 0.75',
offsetY: '6px',
from: {
hook: 'node: plot=0,index=' + nodeIndex,
},
to: {
hook: 'node: plot=1,index=' + nodeIndex,
},
shadow: false,
size: 0,
};
}
</script>
</body>
</html>
// DEFINE CHART LOCATIONS (IDS)
// -----------------------------
// Main chart render location
let chartId = 'myChart';
// CHART CONFIG
// -----------------------------
let myConfig = {
type: 'line',
backgroundColor: '#fff',
title: {
text: 'Connecting Nodes With Arrows',
},
subtitle: {
text: 'We use arrows so we can have the gradient color',
},
plot: {
lineWidth: 0
},
plotarea: {
marginRight: '75px',
marginLeft: '75px',
},
scaleX: {
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'
],
fontColor: '#333333',
guide: {
lineColor: '#ccc',
lineStyle: 'solid',
lineWidth: '1px',
},
item: {
fontColor: '#333333'
},
lineColor: '#151515',
offsetEnd: '25px',
offsetStart: '25px',
tick: {
lineColor: '#cccccc',
lineWidth: '1px',
},
zooming: true,
zoomSnap: true,
},
crosshairX: {
plotLabel: {
text: '%t: %data-values',
borderRadius: '5px',
decimals: 2,
}
},
scaleY: {
decimals: 0,
format: '%v',
label: {
text: 'Temperature (ºF)',
fontColor: '#333333',
},
markers: [
{
type: 'line',
range: ['33.98'],
lineColor: '#00AEEF',
lineWidth: '2px',
}
],
maxValue: 90.166,
minValue: 28.792285714286002,
step: 5,
},
arrows: [],
preview: {},
series: [
{
text: 'Avg. PC Entry',
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
],
dataValues: '%v',
hoverMarker: {
visible: false,
},
marker: {
type: 'circle',
backgroundColor: '#FCB040',
size: 6,
shadow: 0,
},
tooltip: {
visible: false,
},
},
{
text: 'Avg. PC Exit',
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
],
dataValues: '%v',
hoverMarker: {
visible: false,
},
marker: {
type: 'circle',
backgroundColor: '#00AEEF',
size: 6,
shadow: 0,
},
previewState: {
lineColor: '00AEEF',
},
tooltip: {
visible: false
},
}
]
};
// CHART ACTION
// -----------------------------
zingchart.bind(null, 'dataparse', function (e, oGraph) {
let 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 {
alpha: 0.55,
aspect: [0, 0],
borderWidth: 0,
gradientColors: '#FCB040 #00AEEF',
gradientStops: '0.25 0.75',
offsetY: '6px',
from: {
hook: 'node: plot=0,index=' + nodeIndex,
},
to: {
hook: 'node: plot=1,index=' + nodeIndex,
},
shadow: false,
size: 0,
};
}
