<!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>
.info {
padding: 1rem 0 0;
min-height: 529px;
background: #fff;
box-sizing: border-box;
}
.control-bar {
margin: 0 auto;
padding: 0 0 1rem;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity .3s;
}
.control-bar.loaded {
display: flex !important;
opacity: 1;
}
.control-bar>*+* {
margin-left: 10px;
}
.control-bar button {
min-width: 45px;
height: 40px;
cursor: pointer;
color: #fff;
background: #074361;
border: 1px solid #074361;
border-radius: 4px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body class="zc-body">
<div class="info">
<div data-jsref="control-bar" class="control-bar" hidden>
<button data-jsref="default-btn">Load Default Style</button>
<button data-jsref="custom-btn">Load Custom Style</button>
</div>
<div id="myChart">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // INIT
// ----------------------------
// Load dependent modules
zingchart.MODULESDIR = 'https://cdn.zingchart.com/modules/';
zingchart.loadModules('depth');
// DEFINE CHART LOCATIONS (IDS)
// -----------------------------
// Main chart render location
let chartId = 'myChart';
// DOM ELEMENTS
// -----------------------------
let controlBar = document.querySelector('[data-jsref="control-bar"]');
let defaultBtn = document.querySelector('[data-jsref="default-btn"]');
let customBtn = document.querySelector('[data-jsref="custom-btn"]');
// CHART CONFIG
// -----------------------------
// Chart 1
let chartConfig1 = {
type: 'depth',
backgroundColor: '#f3f3f3 #d9d9d9',
options: {
currency: '$',
},
series: [{
text: 'Sell',
values: [
[1168.49, 0],
[1164.69, 12.0211],
[1163.38, 33.0049],
[1160.98, 45.5622],
[1158.64, 60.4819],
[1154.04, 71.5594],
[1146.54, 83.2051],
[1133.37, 106.8834],
[1129.63, 127.1219],
[1126.89, 145.2484],
[1115.14, 155.8074],
[1113.54, 171.8438],
[1110.49, 184.443],
[1106.92, 202.3068],
[1106.7, 224.5185],
[1104.03, 244.5286],
[1101.99, 256.5801],
[1099.57, 272.8992],
[1099.47, 289.2549],
[1095.76, 300.107],
[1091.75, 320.0837],
[1091.37, 334.7523],
[1086.9, 357.9836],
[1086.6, 375.3844],
[1081.13, 387.3668],
[1079.3, 403.3796],
[1074.56, 420.0898],
[1069.69, 438.8176],
[1068.59, 462.0495],
[1056.35, 484.2044],
[1052.93, 507.0559],
[1052.03, 529.1966],
[1047.46, 541.6345],
[1033.06, 551.942],
[1030.42, 569.7072],
[1025.65, 583.7136],
[1023.38, 608.1764],
[1020.04, 620.0944],
[1018.53, 644.661],
[1014.92, 661.6777],
],
},
{
text: 'Buy',
values: [
[1168.49, 0],
[1172.22, 33.1932],
[1174.28, 50.5177],
[1174.99, 81.8346],
[1189.53, 104.332],
[1191.07, 119.9178],
[1195.62, 146.3812],
[1199.32, 180.9109],
[1201.89, 199.313],
[1204.34, 228.9945],
[1206.47, 251.6454],
[1209.44, 285.6366],
[1221.89, 312.7949],
[1230.48, 328.6889],
[1235.24, 351.3438],
[1248.33, 377.9289],
[1251.24, 409.9444],
[1253.75, 435.5418],
[1257.48, 453.8852],
[1261.01, 483.8769],
[1265.06, 499.7163],
[1268.75, 529.6374],
[1270.2, 552.1779],
[1272.15, 579.5218],
[1274.19, 606.4376],
[1276.17, 638.8508],
[1283.07, 668.7969],
[1285.76, 694.1647],
[1287.89, 709.9417],
[1288.72, 735.6358],
[1295.71, 765.2281],
[1303.26, 784.6807],
[1305.43, 801.1021],
[1307.78, 817.4528],
[1312.76, 836.7914],
[1317.6, 859.4746],
[1322.31, 891.443],
[1324.35, 907.6098],
[1325.7, 931.1996],
[1528.01, 949.3013],
],
},
],
};
// Chart 2
let chartConfig2 = {
type: 'depth',
backgroundColor: '#000',
options: {
buttonZoomin: {
tooltip: {
text: 'Zoomer en avant',
},
backgroundColor: '#000',
borderColor: '#ccc',
borderRadius: '11px',
color: '#fff',
hoverState: {
backgroundColor: '#333',
},
},
buttonZoomout: {
tooltip: {
text: 'Zoomer en arrière',
},
backgroundColor: '#000',
borderColor: '#ccc',
borderRadius: '11px',
color: '#fff',
hoverState: {
backgroundColor: '#333',
},
},
currency: '\u20ac',
labels: {
cost: 'Coût',
},
mmpMarker: {
alpha: 0.75,
lineColor: '#999',
label: {
color: '#fff',
fontSize: '15px',
offsetY: '20px',
},
},
palette: ['#909', '#990'],
subtitle: {
visible: false,
},
title: {
color: '#ff0',
},
},
plot: {
mode: 'normal',
},
scaleX: {
item: {
fontSize: '11px',
color: '#f90',
},
},
scaleY: {
item: {
color: '#fff',
},
},
scaleY2: {
item: {
color: '#fff',
},
},
crosshairX: {
plotLabel: {
backgroundColor: '#000',
color: '#fff',
},
},
series: [{
text: 'Vendre',
values: [
[83168.4942, 0],
[83165.2911, 24.5257],
[83162.4432, 41.831],
[83155.7512, 55.5769],
[83155.2945, 67.9671],
[83151.4232, 78.4742],
[83151.3712, 91.5577],
[83150.8574, 104.5983],
[83150.4721, 123.8432],
[83149.6144, 147.7095],
[83148.2683, 171.1301],
[83147.3312, 190.1485],
[83142.4782, 210.6557],
[83139.2812, 228.9494],
[83139.1911, 244.5898],
[83134.4493, 258.1534],
[83131.9837, 278.0654],
[83131.6223, 302.7251],
[83130.3352, 317.3595],
[83122.9212, 333.889],
[83118.0342, 352.3895],
[83117.3329, 374.7495],
[83105.0412, 388.6047],
[83103.0253, 404.7422],
[83098.6836, 426.4222],
[83095.4497, 437.743],
[83091.9221, 461.9394],
[83087.6823, 474.8041],
[83083.1435, 495.8427],
[83080.8234, 513.83],
[83078.3357, 535.1954],
[83076.0832, 554.3064],
[83073.8655, 572.399],
[83071.9923, 587.107],
[83068.2523, 606.2238],
[83066.6343, 623.5779],
[83059.5455, 642.0529],
[83057.8222, 664.9309],
[83057.7349, 677.6618],
[83054.5993, 702.1566],
],
},
{
text: 'Acheter',
values: [
[83168.4942, 0],
[83173.5953, 29.0944],
[83177.5155, 60.5268],
[83178.2274, 94.9951],
[83178.8583, 129.6222],
[83190.3322, 155.1349],
[83193.0553, 179.3527],
[83196.3542, 205.565],
[83197.8851, 227.5875],
[83202.0866, 247.89],
[83202.6833, 278.4508],
[83204.7512, 311.6391],
[83218.5123, 343.4197],
[83218.5655, 378.3272],
[83222.1664, 395.7356],
[83226.3923, 418.799],
[83230.4766, 446.4546],
[83232.0442, 469.4259],
[83245.1453, 490.0896],
[83249.8511, 523.8051],
[83256.5532, 546.2099],
[83257.7456, 575.9132],
[83259.8746, 593.3904],
[83261.8122, 621.4962],
[83266.4694, 640.2163],
[83270.2922, 669.7849],
[83271.7844, 692.9558],
[83272.8266, 718.0753],
[83277.1333, 751.864],
[83280.1222, 779.7172],
[83282.6788, 809.8779],
[83285.2123, 826.0661],
[83293.2132, 857.981],
[83297.19, 884.2067],
[83311.1421, 899.814],
[83311.5344, 927.7719],
[83314.5662, 954.9667],
[83322.4794, 986.9748],
[83322.8721, 1013.3939],
[83323.0612, 1040.1686],
],
},
],
};
// RENDER CHART
// -----------------------------
let sharedOpts = {
id: chartId,
width: '100%',
height: '600px',
events: {
load: load,
},
};
// Render the chart on load with the 'default' style
let loadOpts = Object.assign({}, sharedOpts);
loadOpts.data = chartConfig1;
zingchart.render(loadOpts);
// CHART EVENTS
// -----------------------------
defaultBtn.addEventListener('click', function() {
let defaultOpts = Object.assign({}, sharedOpts);
defaultOpts.data = chartConfig1;
zingchart.render(defaultOpts);
});
customBtn.addEventListener('click', function() {
let customOpts = Object.assign({}, sharedOpts);
customOpts.data = chartConfig2;
zingchart.render(customOpts);
});
// HELPER FNS
// -----------------------------
function chartupdate(c) {
// generate random data
let fMidMarketPrice;
if (c === 0) {
fMidMarketPrice = 1168.49 + (-50 + 100 * Math.random());
} else {
fMidMarketPrice = 83168.49 + (-500 + 1000 * Math.random());
}
let sells = [],
buys = [],
kref,
vref,
kstep,
vstep,
mul,
vmax = 0;
kref = fMidMarketPrice;
vref = 0;
for (let s = 0; s < 100; s++) {
vmax = Math.max(vmax, vref);
sells.push([parseFloat(kref.toFixed(2)), parseFloat(vref.toFixed(4))]);
mul = Math.random() < 0.25 ? 15 : 5;
kstep = mul * Math.random();
vstep = 10 + 15 * Math.random();
kref -= kstep;
vref += vstep;
}
kref = fMidMarketPrice;
vref = 0;
for (let b = 0; b < 100; b++) {
vmax = Math.max(vmax, vref);
buys.push([parseFloat(kref.toFixed(2)), parseFloat(vref.toFixed(4))]);
mul = Math.random() < 0.25 ? 15 : 5;
kstep = mul * Math.random();
vstep = 15 + 20 * Math.random();
kref += kstep;
vref += vstep;
}
if (c === 0) {
chartConfig1['series'][0]['values'] = sells;
chartConfig1['series'][1]['values'] = buys;
zingchart.exec('zc1', 'setdata', {
data: chartConfig1,
});
} else {
chartConfig2['series'][0]['values'] = sells;
chartConfig2['series'][1]['values'] = buys;
zingchart.exec('zc2', 'setdata', {
data: chartConfig2,
});
}
}
function load(e) {
controlBar.classList.add('loaded');
}
</script>
</body>
</html>
// INIT
// ----------------------------
// Load dependent modules
zingchart.MODULESDIR = 'https://cdn.zingchart.com/modules/';
zingchart.loadModules('depth');
// DEFINE CHART LOCATIONS (IDS)
// -----------------------------
// Main chart render location
let chartId = 'myChart';
// DOM ELEMENTS
// -----------------------------
let controlBar = document.querySelector('[data-jsref="control-bar"]');
let defaultBtn = document.querySelector('[data-jsref="default-btn"]');
let customBtn = document.querySelector('[data-jsref="custom-btn"]');
// CHART CONFIG
// -----------------------------
// Chart 1
let chartConfig1 = {
type: 'depth',
backgroundColor: '#f3f3f3 #d9d9d9',
options: {
currency: '$',
},
series: [
{
text: 'Sell',
values: [
[1168.49, 0],
[1164.69, 12.0211],
[1163.38, 33.0049],
[1160.98, 45.5622],
[1158.64, 60.4819],
[1154.04, 71.5594],
[1146.54, 83.2051],
[1133.37, 106.8834],
[1129.63, 127.1219],
[1126.89, 145.2484],
[1115.14, 155.8074],
[1113.54, 171.8438],
[1110.49, 184.443],
[1106.92, 202.3068],
[1106.7, 224.5185],
[1104.03, 244.5286],
[1101.99, 256.5801],
[1099.57, 272.8992],
[1099.47, 289.2549],
[1095.76, 300.107],
[1091.75, 320.0837],
[1091.37, 334.7523],
[1086.9, 357.9836],
[1086.6, 375.3844],
[1081.13, 387.3668],
[1079.3, 403.3796],
[1074.56, 420.0898],
[1069.69, 438.8176],
[1068.59, 462.0495],
[1056.35, 484.2044],
[1052.93, 507.0559],
[1052.03, 529.1966],
[1047.46, 541.6345],
[1033.06, 551.942],
[1030.42, 569.7072],
[1025.65, 583.7136],
[1023.38, 608.1764],
[1020.04, 620.0944],
[1018.53, 644.661],
[1014.92, 661.6777],
],
},
{
text: 'Buy',
values: [
[1168.49, 0],
[1172.22, 33.1932],
[1174.28, 50.5177],
[1174.99, 81.8346],
[1189.53, 104.332],
[1191.07, 119.9178],
[1195.62, 146.3812],
[1199.32, 180.9109],
[1201.89, 199.313],
[1204.34, 228.9945],
[1206.47, 251.6454],
[1209.44, 285.6366],
[1221.89, 312.7949],
[1230.48, 328.6889],
[1235.24, 351.3438],
[1248.33, 377.9289],
[1251.24, 409.9444],
[1253.75, 435.5418],
[1257.48, 453.8852],
[1261.01, 483.8769],
[1265.06, 499.7163],
[1268.75, 529.6374],
[1270.2, 552.1779],
[1272.15, 579.5218],
[1274.19, 606.4376],
[1276.17, 638.8508],
[1283.07, 668.7969],
[1285.76, 694.1647],
[1287.89, 709.9417],
[1288.72, 735.6358],
[1295.71, 765.2281],
[1303.26, 784.6807],
[1305.43, 801.1021],
[1307.78, 817.4528],
[1312.76, 836.7914],
[1317.6, 859.4746],
[1322.31, 891.443],
[1324.35, 907.6098],
[1325.7, 931.1996],
[1528.01, 949.3013],
],
},
],
};
// Chart 2
let chartConfig2 = {
type: 'depth',
backgroundColor: '#000',
options: {
buttonZoomin: {
tooltip: {
text: 'Zoomer en avant',
},
backgroundColor: '#000',
borderColor: '#ccc',
borderRadius: '11px',
color: '#fff',
hoverState: {
backgroundColor: '#333',
},
},
buttonZoomout: {
tooltip: {
text: 'Zoomer en arrière',
},
backgroundColor: '#000',
borderColor: '#ccc',
borderRadius: '11px',
color: '#fff',
hoverState: {
backgroundColor: '#333',
},
},
currency: '\u20ac',
labels: {
cost: 'Coût',
},
mmpMarker: {
alpha: 0.75,
lineColor: '#999',
label: {
color: '#fff',
fontSize: '15px',
offsetY: '20px',
},
},
palette: ['#909', '#990'],
subtitle: {
visible: false,
},
title: {
color: '#ff0',
},
},
plot: {
mode: 'normal',
},
scaleX: {
item: {
fontSize: '11px',
color: '#f90',
},
},
scaleY: {
item: {
color: '#fff',
},
},
scaleY2: {
item: {
color: '#fff',
},
},
crosshairX: {
plotLabel: {
backgroundColor: '#000',
color: '#fff',
},
},
series: [
{
text: 'Vendre',
values: [
[83168.4942, 0],
[83165.2911, 24.5257],
[83162.4432, 41.831],
[83155.7512, 55.5769],
[83155.2945, 67.9671],
[83151.4232, 78.4742],
[83151.3712, 91.5577],
[83150.8574, 104.5983],
[83150.4721, 123.8432],
[83149.6144, 147.7095],
[83148.2683, 171.1301],
[83147.3312, 190.1485],
[83142.4782, 210.6557],
[83139.2812, 228.9494],
[83139.1911, 244.5898],
[83134.4493, 258.1534],
[83131.9837, 278.0654],
[83131.6223, 302.7251],
[83130.3352, 317.3595],
[83122.9212, 333.889],
[83118.0342, 352.3895],
[83117.3329, 374.7495],
[83105.0412, 388.6047],
[83103.0253, 404.7422],
[83098.6836, 426.4222],
[83095.4497, 437.743],
[83091.9221, 461.9394],
[83087.6823, 474.8041],
[83083.1435, 495.8427],
[83080.8234, 513.83],
[83078.3357, 535.1954],
[83076.0832, 554.3064],
[83073.8655, 572.399],
[83071.9923, 587.107],
[83068.2523, 606.2238],
[83066.6343, 623.5779],
[83059.5455, 642.0529],
[83057.8222, 664.9309],
[83057.7349, 677.6618],
[83054.5993, 702.1566],
],
},
{
text: 'Acheter',
values: [
[83168.4942, 0],
[83173.5953, 29.0944],
[83177.5155, 60.5268],
[83178.2274, 94.9951],
[83178.8583, 129.6222],
[83190.3322, 155.1349],
[83193.0553, 179.3527],
[83196.3542, 205.565],
[83197.8851, 227.5875],
[83202.0866, 247.89],
[83202.6833, 278.4508],
[83204.7512, 311.6391],
[83218.5123, 343.4197],
[83218.5655, 378.3272],
[83222.1664, 395.7356],
[83226.3923, 418.799],
[83230.4766, 446.4546],
[83232.0442, 469.4259],
[83245.1453, 490.0896],
[83249.8511, 523.8051],
[83256.5532, 546.2099],
[83257.7456, 575.9132],
[83259.8746, 593.3904],
[83261.8122, 621.4962],
[83266.4694, 640.2163],
[83270.2922, 669.7849],
[83271.7844, 692.9558],
[83272.8266, 718.0753],
[83277.1333, 751.864],
[83280.1222, 779.7172],
[83282.6788, 809.8779],
[83285.2123, 826.0661],
[83293.2132, 857.981],
[83297.19, 884.2067],
[83311.1421, 899.814],
[83311.5344, 927.7719],
[83314.5662, 954.9667],
[83322.4794, 986.9748],
[83322.8721, 1013.3939],
[83323.0612, 1040.1686],
],
},
],
};
// RENDER CHART
// -----------------------------
let sharedOpts = {
id: chartId,
width: '100%',
height: '600px',
events: {
load: load,
},
};
// Render the chart on load with the 'default' style
let loadOpts = Object.assign({}, sharedOpts);
loadOpts.data = chartConfig1;
zingchart.render(loadOpts);
// CHART EVENTS
// -----------------------------
defaultBtn.addEventListener('click', function () {
let defaultOpts = Object.assign({}, sharedOpts);
defaultOpts.data = chartConfig1;
zingchart.render(defaultOpts);
});
customBtn.addEventListener('click', function () {
let customOpts = Object.assign({}, sharedOpts);
customOpts.data = chartConfig2;
zingchart.render(customOpts);
});
// HELPER FNS
// -----------------------------
function chartupdate(c) {
// generate random data
let fMidMarketPrice;
if (c === 0) {
fMidMarketPrice = 1168.49 + (-50 + 100 * Math.random());
} else {
fMidMarketPrice = 83168.49 + (-500 + 1000 * Math.random());
}
let sells = [],
buys = [],
kref,
vref,
kstep,
vstep,
mul,
vmax = 0;
kref = fMidMarketPrice;
vref = 0;
for (let s = 0; s < 100; s++) {
vmax = Math.max(vmax, vref);
sells.push([parseFloat(kref.toFixed(2)), parseFloat(vref.toFixed(4))]);
mul = Math.random() < 0.25 ? 15 : 5;
kstep = mul * Math.random();
vstep = 10 + 15 * Math.random();
kref -= kstep;
vref += vstep;
}
kref = fMidMarketPrice;
vref = 0;
for (let b = 0; b < 100; b++) {
vmax = Math.max(vmax, vref);
buys.push([parseFloat(kref.toFixed(2)), parseFloat(vref.toFixed(4))]);
mul = Math.random() < 0.25 ? 15 : 5;
kstep = mul * Math.random();
vstep = 15 + 20 * Math.random();
kref += kstep;
vref += vstep;
}
if (c === 0) {
chartConfig1['series'][0]['values'] = sells;
chartConfig1['series'][1]['values'] = buys;
zingchart.exec('zc1', 'setdata', {
data: chartConfig1,
});
} else {
chartConfig2['series'][0]['values'] = sells;
chartConfig2['series'][1]['values'] = buys;
zingchart.exec('zc2', 'setdata', {
data: chartConfig2,
});
}
}
function load(e) {
controlBar.classList.add('loaded');
}
