<!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-ref {
display: none;
}
</style>
</head>
<body class="zc-body">
<div id="myChart">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
// INIT
// -----------------------------
// Define Module Location
zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
// Load module(s)
zingchart.loadModules("multi-guide");
// DEFINE CHART LOCATIONS (IDS)
// -----------------------------
// Main chart render location
let chartId = 'myChart';
// CHART CONFIG
// -----------------------------
let chartConfig = {
type: 'line',
title: {
text: 'Click on chart to lock a crosshair',
},
subtitle: {
text: 'change label text, move it or delete it',
},
legend: {
layout: 'float',
toggleAction: 'remove',
},
options: {
multiGuide: {
label: {
backgroundColor: '#f90',
fontSize: '20px',
hoverState: {
backgroundColor: '#90f',
}
},
handle: {
borderColor: '#009',
size: '8px',
},
close: {
borderColor: '#090',
borderWidth: '2px',
},
line: {
lineColor: '#c0c',
lineStyle: 'dashed',
lineWidth: '4px',
}
}
},
plot: {
aspect: 'spline',
exact: 1,
lineWidth: 1,
marker: {
size: 2
},
maxNodes: 0,
shadow: 0,
stacked: 1,
},
plotarea: {
margin: '50px dynamic 100px dynamic',
},
crosshairX: {
exact: true,
plotLabel: {
multiple: true,
},
},
crosshairY: {},
scaleX: {
step: 'day',
transform: {
type: 'date',
item: {
visible: false
}
},
zooming: 1,
},
zoom: {
'preserve-zoom': true
},
tooltip: {
alpha: 0.85,
backgroundColor: '#333 #aaa',
borderRadius: '8px',
borderWidth: 0,
color: '#fff',
padding: '8px',
shadow: false,
visible: false,
},
preview: {
backgroundColor: '#f7d7f4',
borderWidth: '5px',
live: true,
handle: {
backgroundColor: '#333',
borderRadius: 0,
lineColor: '#aaa',
height: '50px',
width: '13px',
}
},
series: [{
values: [
[1579486375000, 182],
[1580263975000, 181],
[1580523175000, 171],
[1580695975000, 169],
[1581991975000, 167],
[1582337575000, 169],
[1582683175000, 170],
[1582855975000, 178],
[1582942375000, 180],
[1583115175000, 184],
[1583806375000, 191],
[1584411175000, 190],
[1585620775000, 195],
[1585793575000, 205],
[1586225575000, 203],
[1586657575000, 200],
[1587089575000, 198],
[1587607975000, 191],
[1587953575000, 184],
[1588817575000, 179],
[1588903975000, 174],
[1589940775000, 178],
[1590372775000, 175],
[1590977575000, 176],
[1591063975000, 177],
[1591409575000, 175],
[1591927975000, 183],
[1592878375000, 184],
[1594433575000, 185],
[1595211175000, 187],
[1595470375000, 181],
[1596247975000, 182],
[1596420775000, 187],
[1596679975000, 185],
[1597284775000, 190],
[1598321575000, 182],
[1598407975000, 173],
[1598580775000, 179],
[1598839975000, 173],
[1599271975000, 183],
[1599876775000, 175],
[1600827175000, 165],
[1600999975000, 173],
[1601691175000, 180],
[1602123175000, 176],
[1602295975000, 182],
[1603159975000, 184],
[1604455975000, 180],
[1604628775000, 171],
[1604801575000, 169],
[1605060775000, 177],
[1606356775000, 173],
[1606443175000, 168],
[1607652775000, 168],
[1608343975000, 164],
[1608862375000, 171],
[1608948775000, 172],
[1609380775000, 169],
[1609553575000, 164],
[1610071975000, 174],
[1610417575000, 172],
[1610763175000, 177],
[1610849575000, 183],
[1611108775000, 184],
[1611540775000, 183],
[1612145575000, 193],
[1613873575000, 196],
[1614391975000, 197],
[1614478375000, 202],
[1618366375000, 211],
[1618625575000, 209],
[1618798375000, 204],
[1618971175000, 202],
[1619835175000, 196],
[1620007975000, 196],
[1620094375000, 204],
[1620439975000, 210],
[1620785575000, 214],
[1620871975000, 220],
[1622340775000, 211],
[1623377575000, 210],
[1623723175000, 207],
[1624414375000, 198],
[1626228775000, 189],
[1626660775000, 184],
[1626833575000, 178],
[1627697575000, 177],
[1628820775000, 169],
[1628993575000, 160],
[1629252775000, 164],
[1629511975000, 155],
[1629943975000, 151],
[1630030375000, 149],
[1631067175000, 149],
[1631412775000, 149],
[1631585575000, 157],
[1632017575000, 166],
[1632708775000, 157],
[1633572775000, 151],
[1634695975000, 160],
[1636337575000, 159],
[1636596775000, 164],
[1636769575000, 154],
[1637115175000, 164],
[1637460775000, 165],
[1637547175000, 159],
[1637719975000, 159],
[1638497575000, 156],
[1638583975000, 165],
[1638756775000, 172],
[1639015975000, 180],
[1639879975000, 184],
[1639966375000, 193],
[1640830375000, 202],
[1641694375000, 204],
[1643249575000, 211],
[1643854375000, 205],
[1644113575000, 215],
[1644199975000, 223],
[1645841575000, 222],
[1645927975000, 232],
[1646359975000, 225],
[1646532775000, 216],
[1646705575000, 213],
[1646791975000, 206],
[1647223975000, 198],
[1647310375000, 205],
[1648347175000, 195],
[1649124775000, 191],
[1651457575000, 200],
[1651716775000, 191],
[1652580775000, 193],
[1652667175000, 185],
[1653099175000, 193],
[1653185575000, 199],
[1653531175000, 189],
[1653790375000, 189],
[1653876775000, 189],
[1654827175000, 186],
[1655431975000, 183],
[1655950375000, 177],
[1656987175000, 167],
[1657505575000, 160],
[1658283175000, 153],
[1659233575000, 160],
[1659751975000, 153],
[1659838375000, 150],
[1660097575000, 158],
[1660702375000, 152],
[1661393575000, 155],
[1661479975000, 165],
[1663121575000, 170],
[1663380775000, 176],
[1663899175000, 180],
[1664331175000, 172],
[1664935975000, 182],
[1665281575000, 190],
[1665713575000, 182]
]
},
{
rules: [{
rule: '%node-value < 50',
lineColor: '#900'
},
{
rule: '%node-value >= 50 && %node-value < 70',
lineColor: '#090'
}
],
values: [
[1579486375000, 48],
[1580436775000, 55],
[1580523175000, 61],
[1580782375000, 60],
[1580868775000, 65],
[1581819175000, 56],
[1582251175000, 54],
[1582510375000, 48],
[1582942375000, 53],
[1583115175000, 49],
[1583547175000, 58],
[1583633575000, 65],
[1584670375000, 62],
[1584756775000, 59],
[1585102375000, 50],
[1585447975000, 59],
[1585793575000, 50],
[1586916775000, 44],
[1587003175000, 38],
[1587348775000, 38],
[1588039975000, 47],
[1589767975000, 48],
[1591409575000, 41],
[1591668775000, 34],
[1592187175000, 34],
[1592964775000, 44],
[1594087975000, 43],
[1594174375000, 50],
[1594692775000, 46],
[1594865575000, 49],
[1595038375000, 57],
[1596075175000, 57],
[1596247975000, 56],
[1596507175000, 56],
[1597111975000, 63],
[1597543975000, 57],
[1597630375000, 63],
[1597716775000, 60],
[1598062375000, 62],
[1598494375000, 65],
[1598753575000, 69],
[1599012775000, 59],
[1599963175000, 65],
[1600049575000, 72],
[1600999975000, 80],
[1601604775000, 74],
[1602123175000, 75],
[1602814375000, 79],
[1603332775000, 75],
[1604369575000, 85],
[1606875175000, 78],
[1607307175000, 72],
[1607652775000, 82],
[1607825575000, 81],
[1608343975000, 86],
[1609467175000, 96],
[1609639975000, 91],
[1610244775000, 81],
[1611022375000, 72],
[1611108775000, 75],
[1612577575000, 67],
[1613182375000, 62],
[1613787175000, 59],
[1614305575000, 61],
[1614651175000, 59],
[1615860775000, 59],
[1616724775000, 66],
[1617675175000, 62],
[1618452775000, 53],
[1618539175000, 53],
[1618798375000, 51],
[1619230375000, 60],
[1620007975000, 68],
[1620094375000, 68],
[1620267175000, 63],
[1621303975000, 61],
[1622599975000, 55],
[1622772775000, 57],
[1622859175000, 63],
[1622945575000, 59],
[1623031975000, 64],
[1623550375000, 60],
[1623809575000, 57],
[1624327975000, 49],
[1625105575000, 52],
[1625796775000, 60],
[1625883175000, 59],
[1626401575000, 54],
[1627006375000, 53],
[1627179175000, 48],
[1627351975000, 43],
[1628388775000, 46],
[1628561575000, 47],
[1628734375000, 47],
[1629079975000, 55],
[1629771175000, 51],
[1630116775000, 45],
[1631067175000, 50],
[1631153575000, 58],
[1631412775000, 58],
[1631499175000, 53],
[1631671975000, 51],
[1633140775000, 57],
[1633399975000, 50],
[1633745575000, 53],
[1633918375000, 47],
[1634004775000, 55],
[1635041575000, 50],
[1635300775000, 57],
[1635646375000, 65],
[1636251175000, 67],
[1636423975000, 57],
[1636596775000, 57],
[1639361575000, 65],
[1640052775000, 68],
[1640916775000, 73],
[1642558375000, 72],
[1642903975000, 66],
[1643508775000, 65],
[1644199975000, 65],
[1644459175000, 59],
[1645582375000, 62],
[1645755175000, 62],
[1646187175000, 72],
[1646619175000, 72],
[1646791975000, 73],
[1647223975000, 67],
[1647310375000, 76],
[1648606375000, 80],
[1649038375000, 80],
[1649297575000, 74],
[1650420775000, 75],
[1651198375000, 78],
[1652494375000, 88],
[1652839975000, 79],
[1655086375000, 77],
[1656036775000, 79],
[1657678375000, 70],
[1658455975000, 73],
[1658542375000, 63],
[1658887975000, 54],
[1660183975000, 53],
[1660788775000, 50],
[1661652775000, 60],
[1662084775000, 69],
[1662689575000, 64],
[1664763175000, 74],
[1664935975000, 65],
[1665108775000, 58],
[1665281575000, 51]
]
}
]
};
// RENDER CHART
// -----------------------------
zingchart.render({
id: chartId,
data: chartConfig,
height: 560,
width: '100%',
modules: "multi-guide"
});
</script>
</body>
</html>
// INIT
// -----------------------------
// Define Module Location
zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
// Load module(s)
zingchart.loadModules("multi-guide");
// DEFINE CHART LOCATIONS (IDS)
// -----------------------------
// Main chart render location
let chartId = 'myChart';
// CHART CONFIG
// -----------------------------
let chartConfig = {
type: 'line',
title: {
text: 'Click on chart to lock a crosshair',
},
subtitle: {
text: 'change label text, move it or delete it',
},
legend: {
layout: 'float',
toggleAction: 'remove',
},
options: {
multiGuide: {
label: {
backgroundColor: '#f90',
fontSize: '20px',
hoverState: {
backgroundColor: '#90f',
}
},
handle: {
borderColor: '#009',
size: '8px',
},
close: {
borderColor: '#090',
borderWidth: '2px',
},
line: {
lineColor: '#c0c',
lineStyle: 'dashed',
lineWidth: '4px',
}
}
},
plot: {
aspect: 'spline',
exact: 1,
lineWidth: 1,
marker: {
size: 2
},
maxNodes: 0,
shadow: 0,
stacked: 1,
},
plotarea: {
margin: '50px dynamic 100px dynamic',
},
crosshairX: {
exact: true,
plotLabel: {
multiple: true,
},
},
crosshairY: {},
scaleX: {
step: 'day',
transform: {
type: 'date',
item: {
visible: false
}
},
zooming: 1,
},
zoom: {
'preserve-zoom': true
},
tooltip: {
alpha: 0.85,
backgroundColor: '#333 #aaa',
borderRadius: '8px',
borderWidth: 0,
color: '#fff',
padding: '8px',
shadow: false,
visible: false,
},
preview: {
backgroundColor: '#f7d7f4',
borderWidth: '5px',
live: true,
handle: {
backgroundColor: '#333',
borderRadius: 0,
lineColor: '#aaa',
height: '50px',
width: '13px',
}
},
series: [
{
values: [
[1579486375000, 182],
[1580263975000, 181],
[1580523175000, 171],
[1580695975000, 169],
[1581991975000, 167],
[1582337575000, 169],
[1582683175000, 170],
[1582855975000, 178],
[1582942375000, 180],
[1583115175000, 184],
[1583806375000, 191],
[1584411175000, 190],
[1585620775000, 195],
[1585793575000, 205],
[1586225575000, 203],
[1586657575000, 200],
[1587089575000, 198],
[1587607975000, 191],
[1587953575000, 184],
[1588817575000, 179],
[1588903975000, 174],
[1589940775000, 178],
[1590372775000, 175],
[1590977575000, 176],
[1591063975000, 177],
[1591409575000, 175],
[1591927975000, 183],
[1592878375000, 184],
[1594433575000, 185],
[1595211175000, 187],
[1595470375000, 181],
[1596247975000, 182],
[1596420775000, 187],
[1596679975000, 185],
[1597284775000, 190],
[1598321575000, 182],
[1598407975000, 173],
[1598580775000, 179],
[1598839975000, 173],
[1599271975000, 183],
[1599876775000, 175],
[1600827175000, 165],
[1600999975000, 173],
[1601691175000, 180],
[1602123175000, 176],
[1602295975000, 182],
[1603159975000, 184],
[1604455975000, 180],
[1604628775000, 171],
[1604801575000, 169],
[1605060775000, 177],
[1606356775000, 173],
[1606443175000, 168],
[1607652775000, 168],
[1608343975000, 164],
[1608862375000, 171],
[1608948775000, 172],
[1609380775000, 169],
[1609553575000, 164],
[1610071975000, 174],
[1610417575000, 172],
[1610763175000, 177],
[1610849575000, 183],
[1611108775000, 184],
[1611540775000, 183],
[1612145575000, 193],
[1613873575000, 196],
[1614391975000, 197],
[1614478375000, 202],
[1618366375000, 211],
[1618625575000, 209],
[1618798375000, 204],
[1618971175000, 202],
[1619835175000, 196],
[1620007975000, 196],
[1620094375000, 204],
[1620439975000, 210],
[1620785575000, 214],
[1620871975000, 220],
[1622340775000, 211],
[1623377575000, 210],
[1623723175000, 207],
[1624414375000, 198],
[1626228775000, 189],
[1626660775000, 184],
[1626833575000, 178],
[1627697575000, 177],
[1628820775000, 169],
[1628993575000, 160],
[1629252775000, 164],
[1629511975000, 155],
[1629943975000, 151],
[1630030375000, 149],
[1631067175000, 149],
[1631412775000, 149],
[1631585575000, 157],
[1632017575000, 166],
[1632708775000, 157],
[1633572775000, 151],
[1634695975000, 160],
[1636337575000, 159],
[1636596775000, 164],
[1636769575000, 154],
[1637115175000, 164],
[1637460775000, 165],
[1637547175000, 159],
[1637719975000, 159],
[1638497575000, 156],
[1638583975000, 165],
[1638756775000, 172],
[1639015975000, 180],
[1639879975000, 184],
[1639966375000, 193],
[1640830375000, 202],
[1641694375000, 204],
[1643249575000, 211],
[1643854375000, 205],
[1644113575000, 215],
[1644199975000, 223],
[1645841575000, 222],
[1645927975000, 232],
[1646359975000, 225],
[1646532775000, 216],
[1646705575000, 213],
[1646791975000, 206],
[1647223975000, 198],
[1647310375000, 205],
[1648347175000, 195],
[1649124775000, 191],
[1651457575000, 200],
[1651716775000, 191],
[1652580775000, 193],
[1652667175000, 185],
[1653099175000, 193],
[1653185575000, 199],
[1653531175000, 189],
[1653790375000, 189],
[1653876775000, 189],
[1654827175000, 186],
[1655431975000, 183],
[1655950375000, 177],
[1656987175000, 167],
[1657505575000, 160],
[1658283175000, 153],
[1659233575000, 160],
[1659751975000, 153],
[1659838375000, 150],
[1660097575000, 158],
[1660702375000, 152],
[1661393575000, 155],
[1661479975000, 165],
[1663121575000, 170],
[1663380775000, 176],
[1663899175000, 180],
[1664331175000, 172],
[1664935975000, 182],
[1665281575000, 190],
[1665713575000, 182]
]
},
{
rules: [
{
rule: '%node-value < 50',
lineColor: '#900'
},
{
rule: '%node-value >= 50 && %node-value < 70',
lineColor: '#090'
}
],
values: [
[1579486375000, 48],
[1580436775000, 55],
[1580523175000, 61],
[1580782375000, 60],
[1580868775000, 65],
[1581819175000, 56],
[1582251175000, 54],
[1582510375000, 48],
[1582942375000, 53],
[1583115175000, 49],
[1583547175000, 58],
[1583633575000, 65],
[1584670375000, 62],
[1584756775000, 59],
[1585102375000, 50],
[1585447975000, 59],
[1585793575000, 50],
[1586916775000, 44],
[1587003175000, 38],
[1587348775000, 38],
[1588039975000, 47],
[1589767975000, 48],
[1591409575000, 41],
[1591668775000, 34],
[1592187175000, 34],
[1592964775000, 44],
[1594087975000, 43],
[1594174375000, 50],
[1594692775000, 46],
[1594865575000, 49],
[1595038375000, 57],
[1596075175000, 57],
[1596247975000, 56],
[1596507175000, 56],
[1597111975000, 63],
[1597543975000, 57],
[1597630375000, 63],
[1597716775000, 60],
[1598062375000, 62],
[1598494375000, 65],
[1598753575000, 69],
[1599012775000, 59],
[1599963175000, 65],
[1600049575000, 72],
[1600999975000, 80],
[1601604775000, 74],
[1602123175000, 75],
[1602814375000, 79],
[1603332775000, 75],
[1604369575000, 85],
[1606875175000, 78],
[1607307175000, 72],
[1607652775000, 82],
[1607825575000, 81],
[1608343975000, 86],
[1609467175000, 96],
[1609639975000, 91],
[1610244775000, 81],
[1611022375000, 72],
[1611108775000, 75],
[1612577575000, 67],
[1613182375000, 62],
[1613787175000, 59],
[1614305575000, 61],
[1614651175000, 59],
[1615860775000, 59],
[1616724775000, 66],
[1617675175000, 62],
[1618452775000, 53],
[1618539175000, 53],
[1618798375000, 51],
[1619230375000, 60],
[1620007975000, 68],
[1620094375000, 68],
[1620267175000, 63],
[1621303975000, 61],
[1622599975000, 55],
[1622772775000, 57],
[1622859175000, 63],
[1622945575000, 59],
[1623031975000, 64],
[1623550375000, 60],
[1623809575000, 57],
[1624327975000, 49],
[1625105575000, 52],
[1625796775000, 60],
[1625883175000, 59],
[1626401575000, 54],
[1627006375000, 53],
[1627179175000, 48],
[1627351975000, 43],
[1628388775000, 46],
[1628561575000, 47],
[1628734375000, 47],
[1629079975000, 55],
[1629771175000, 51],
[1630116775000, 45],
[1631067175000, 50],
[1631153575000, 58],
[1631412775000, 58],
[1631499175000, 53],
[1631671975000, 51],
[1633140775000, 57],
[1633399975000, 50],
[1633745575000, 53],
[1633918375000, 47],
[1634004775000, 55],
[1635041575000, 50],
[1635300775000, 57],
[1635646375000, 65],
[1636251175000, 67],
[1636423975000, 57],
[1636596775000, 57],
[1639361575000, 65],
[1640052775000, 68],
[1640916775000, 73],
[1642558375000, 72],
[1642903975000, 66],
[1643508775000, 65],
[1644199975000, 65],
[1644459175000, 59],
[1645582375000, 62],
[1645755175000, 62],
[1646187175000, 72],
[1646619175000, 72],
[1646791975000, 73],
[1647223975000, 67],
[1647310375000, 76],
[1648606375000, 80],
[1649038375000, 80],
[1649297575000, 74],
[1650420775000, 75],
[1651198375000, 78],
[1652494375000, 88],
[1652839975000, 79],
[1655086375000, 77],
[1656036775000, 79],
[1657678375000, 70],
[1658455975000, 73],
[1658542375000, 63],
[1658887975000, 54],
[1660183975000, 53],
[1660788775000, 50],
[1661652775000, 60],
[1662084775000, 69],
[1662689575000, 64],
[1664763175000, 74],
[1664935975000, 65],
[1665108775000, 58],
[1665281575000, 51]
]
}
]
};
// RENDER CHART
// -----------------------------
zingchart.render({
id: chartId,
data: chartConfig,
height: 560,
width: '100%',
modules: "multi-guide"
});
