<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<style>
* {
font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans';
font-size: 12px;
}
</style>
<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"></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
let chartConfig = {
type: 'depth',
backgroundColor: '#f3f3f3 #d9d9d9',
options: {
buttonZoomin: {
borderColor: 'red',
borderWidth: 4,
hoverState: {
backgroundColor: 'red',
},
mediaRules: [{
maxWidth: 400,
backgroundColor: 'pink',
}],
tooltip: {
backgroundColor: 'red'
},
},
buttonZoomout: {
borderColor: 'red',
borderWidth: 4,
hoverState: {
backgroundColor: 'red',
},
mediaRules: [{
maxWidth: 400,
backgroundColor: 'pink',
}],
tooltip: {
backgroundColor: 'red'
},
},
currency: '$',
mmpMarker: {
lineColor: 'blue',
lineWidth: 5,
label: {
backgroundColor: 'green',
topState: {
backgroundColor: 'red',
offsetX: 10,
offsetY: 10,
}
},
},
subtitle: {
text: 'Subtitle'
},
title: {
text: 'Title'
},
},
series: [{
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: 'Sell'
},
{
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]
],
text: 'Buy'
}
]
};
let chartConfig2 = {
type: 'depth',
backgroundColor: '#000',
options: {
currency: '\u20ac',
title: {
color: '#ff0'
},
subtitle: {
visible: false
},
mmpMarker: {
alpha: 0.75,
lineColor: '#999',
label: {
color: '#fff',
fontSize: 15,
offsetY: 20
}
},
palette: ['#909', '#990'],
},
scaleX: {
item: {
fontSize: 11,
color: '#f90'
}
},
scaleY: {
item: {
color: '#fff'
}
},
scaleY2: {
item: {
color: '#fff'
}
},
plot: {
mode: 'normal'
},
crosshairX: {
plotLabel: {
color: '#fff',
backgroundColor: '#000'
}
},
series: [{
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: 'Vendre'
},
{
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]
],
text: 'Acheter'
}
]
};
let chartupdate = function(c) {
// generate random data
if (c === 0) {
let fMidMarketPrice = 1168.49 + (-50 + 100 * Math.random());
} else {
let 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) {
chartConfig['series'][0]['values'] = sells;
chartConfig['series'][1]['values'] = buys;
zingchart.exec('zc1', 'setdata', {
data: chartConfig
});
} else {
chartConfig2['series'][0]['values'] = sells;
chartConfig2['series'][1]['values'] = buys;
zingchart.exec('zc2', 'setdata', {
data: chartConfig2
});
}
};
zingchart.render({
id: 'myChart',
data: chartConfig
});
</script>
</body>
</html>
let chartConfig = {
type: 'depth',
backgroundColor: '#f3f3f3 #d9d9d9',
options: {
buttonZoomin: {
borderColor: 'red',
borderWidth: 4,
hoverState: {
backgroundColor: 'red',
},
mediaRules: [{
maxWidth: 400,
backgroundColor: 'pink',
}],
tooltip: {
backgroundColor: 'red'
},
},
buttonZoomout: {
borderColor: 'red',
borderWidth: 4,
hoverState: {
backgroundColor: 'red',
},
mediaRules: [{
maxWidth: 400,
backgroundColor: 'pink',
}],
tooltip: {
backgroundColor: 'red'
},
},
currency: '$',
mmpMarker: {
lineColor: 'blue',
lineWidth: 5,
label: {
backgroundColor: 'green',
topState: {
backgroundColor: 'red',
offsetX: 10,
offsetY: 10,
}
},
},
subtitle: {
text: 'Subtitle'
},
title: {
text: 'Title'
},
},
series: [{
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: 'Sell'
},
{
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]
],
text: 'Buy'
}
]
};
let chartConfig2 = {
type: 'depth',
backgroundColor: '#000',
options: {
currency: '\u20ac',
title: {
color: '#ff0'
},
subtitle: {
visible: false
},
mmpMarker: {
alpha: 0.75,
lineColor: '#999',
label: {
color: '#fff',
fontSize: 15,
offsetY: 20
}
},
palette: ['#909', '#990'],
},
scaleX: {
item: {
fontSize: 11,
color: '#f90'
}
},
scaleY: {
item: {
color: '#fff'
}
},
scaleY2: {
item: {
color: '#fff'
}
},
plot: {
mode: 'normal'
},
crosshairX: {
plotLabel: {
color: '#fff',
backgroundColor: '#000'
}
},
series: [{
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: 'Vendre'
},
{
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]
],
text: 'Acheter'
}
]
};
let chartupdate = function(c) {
// generate random data
if (c === 0) {
let fMidMarketPrice = 1168.49 + (-50 + 100 * Math.random());
} else {
let 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) {
chartConfig['series'][0]['values'] = sells;
chartConfig['series'][1]['values'] = buys;
zingchart.exec('zc1', 'setdata', {
data: chartConfig
});
} else {
chartConfig2['series'][0]['values'] = sells;
chartConfig2['series'][1]['values'] = buys;
zingchart.exec('zc2', 'setdata', {
data: chartConfig2
});
}
};
zingchart.render({
id: 'myChart',
data: chartConfig
});