• Edit
  • Download
  • <!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,
              tooltip: {
                backgroundColor: 'red',
                bottomState: {
                  backgroundColor: 'blue',
                  offsetX: 10,
                  offsetY: 10
                }
              },
            },
            currency: '$',
            mmpMarker: {
              lineColor: 'blue',
              lineWidth: 5,
              label: {
                backgroundColor: 'green'
              }
            },
            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>
    <!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 src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    
    <body>
      <div id="myChart"></div>
    </body>
    
    </html>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    
    #myChart {
      height: 100%;
      width: 100%;
      min-height: 150px;
    }
    
    .zc-ref {
      display: none;
    }
    let chartConfig = {
      type: 'depth',
      backgroundColor: '#f3f3f3 #d9d9d9',
      options: {
        buttonZoomin: {
          borderColor: 'red',
          borderWidth: 4,
          tooltip: {
            backgroundColor: 'red',
            bottomState: {
              backgroundColor: 'blue',
              offsetX: 10,
              offsetY: 10
            }
          },
        },
        currency: '$',
        mmpMarker: {
          lineColor: 'blue',
          lineWidth: 5,
          label: {
            backgroundColor: 'green'
          }
        },
        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
    });