• 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 style="padding:5px">
        <button id="bl1" style="font-size:11px;font-weight:bold;">Load Default Style</button>
        <button id="bl2" style="font-size:11px;font-weight:bold;">Load Custom Style</button>
      </div>
    
      <div id="zc"></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        var cdata1 = {
          "background-color": "#f3f3f3 #d9d9d9",
          "type": "depth",
          "options": {
            "currency": "$"
          },
          "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"
            }
          ]
        };
    
        var cdata2 = {
          "type": "depth",
          "background-color": "#000",
          "options": {
            "currency": "\u20ac",
            "button-zoomout": {
              "tooltip": {
                "text": "Zoomer en arrière"
              },
              "background-color": "#000",
              "border-color": "#ccc",
              "color": "#fff",
              "border-radius": 11,
              "hover-state": {
                "background-color": "#333"
              }
            },
            "button-zoomin": {
              "tooltip": {
                "text": "Zoomer en avant"
              },
              "background-color": "#000",
              "border-color": "#ccc",
              "color": "#fff",
              "border-radius": 11,
              "hover-state": {
                "background-color": "#333"
              }
            },
            "title": {
              "color": "#ff0"
            },
            "subtitle": {
              "visible": false
            },
            "mmp-marker": {
              "alpha": 0.75,
              "line-color": "#999",
              "label": {
                "color": "#fff",
                "font-size": 15,
                "offset-y": 20
              }
            },
            "palette": ['#909', '#990'],
            "labels": {
              "cost": "Coût"
            }
          },
          "scale-x": {
            "item": {
              "font-size": 11,
              "color": "#f90"
            }
          },
          "scale-y": {
            "item": {
              "color": "#fff"
            }
          },
          "scale-y-2": {
            "item": {
              "color": "#fff"
            }
          },
          "plot": {
            "mode": "normal"
          },
          "crosshair-x": {
            "plot-label": {
              "color": "#fff",
              "background-color": "#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"
            }
          ]
        };
    
        var chartupdate = function(c) {
    
          // generate random data
          if (c === 0) {
            var fMidMarketPrice = 1168.49 + (-50 + 100 * Math.random());
          } else {
            var fMidMarketPrice = 83168.49 + (-500 + 1000 * Math.random());
          }
    
          var sells = [],
            buys = [],
            kref, vref, kstep, vstep, mul, vmax = 0;
    
          kref = fMidMarketPrice;
          vref = 0;
          for (var 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 (var 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) {
            cdata1['series'][0]['values'] = sells;
            cdata1['series'][1]['values'] = buys;
            zingchart.exec('zc1', 'setdata', {
              data: cdata1
            });
          } else {
            cdata2['series'][0]['values'] = sells;
            cdata2['series'][1]['values'] = buys;
            zingchart.exec('zc2', 'setdata', {
              data: cdata2
            });
          }
    
        };
    
    
        bl1.addEventListener('click', function() {
          zingchart.render({
            id: 'zc',
            width: 800,
            height: 380,
            output: 'svg',
            data: cdata1
          });
        });
    
        bl2.addEventListener('click', function() {
          zingchart.render({
            id: 'zc',
            width: 800,
            height: 380,
            output: 'svg',
            data: cdata2
          });
        });
    
    
    
        zingchart.render({
          id: 'zc',
          width: 800,
          height: 380,
          output: 'svg',
          data: cdata1
        });
      </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 style="padding:5px">
        <button id="bl1" style="font-size:11px;font-weight:bold;">Load Default Style</button>
        <button id="bl2" style="font-size:11px;font-weight:bold;">Load Custom Style</button>
      </div>
    
      <div id="zc"></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;
    }
    var cdata1 = {
      "background-color": "#f3f3f3 #d9d9d9",
      "type": "depth",
      "options": {
        "currency": "$"
      },
      "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"
        }
      ]
    };
    
    var cdata2 = {
      "type": "depth",
      "background-color": "#000",
      "options": {
        "currency": "\u20ac",
        "button-zoomout": {
          "tooltip": {
            "text": "Zoomer en arrière"
          },
          "background-color": "#000",
          "border-color": "#ccc",
          "color": "#fff",
          "border-radius": 11,
          "hover-state": {
            "background-color": "#333"
          }
        },
        "button-zoomin": {
          "tooltip": {
            "text": "Zoomer en avant"
          },
          "background-color": "#000",
          "border-color": "#ccc",
          "color": "#fff",
          "border-radius": 11,
          "hover-state": {
            "background-color": "#333"
          }
        },
        "title": {
          "color": "#ff0"
        },
        "subtitle": {
          "visible": false
        },
        "mmp-marker": {
          "alpha": 0.75,
          "line-color": "#999",
          "label": {
            "color": "#fff",
            "font-size": 15,
            "offset-y": 20
          }
        },
        "palette": ['#909', '#990'],
        "labels": {
          "cost": "Coût"
        }
      },
      "scale-x": {
        "item": {
          "font-size": 11,
          "color": "#f90"
        }
      },
      "scale-y": {
        "item": {
          "color": "#fff"
        }
      },
      "scale-y-2": {
        "item": {
          "color": "#fff"
        }
      },
      "plot": {
        "mode": "normal"
      },
      "crosshair-x": {
        "plot-label": {
          "color": "#fff",
          "background-color": "#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"
        }
      ]
    };
    
    var chartupdate = function(c) {
    
      // generate random data
      if (c === 0) {
        var fMidMarketPrice = 1168.49 + (-50 + 100 * Math.random());
      } else {
        var fMidMarketPrice = 83168.49 + (-500 + 1000 * Math.random());
      }
    
      var sells = [],
        buys = [],
        kref, vref, kstep, vstep, mul, vmax = 0;
    
      kref = fMidMarketPrice;
      vref = 0;
      for (var 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 (var 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) {
        cdata1['series'][0]['values'] = sells;
        cdata1['series'][1]['values'] = buys;
        zingchart.exec('zc1', 'setdata', {
          data: cdata1
        });
      } else {
        cdata2['series'][0]['values'] = sells;
        cdata2['series'][1]['values'] = buys;
        zingchart.exec('zc2', 'setdata', {
          data: cdata2
        });
      }
    
    };
    
    
    bl1.addEventListener('click', function() {
      zingchart.render({
        id: 'zc',
        width: 800,
        height: 380,
        output: 'svg',
        data: cdata1
      });
    });
    
    bl2.addEventListener('click', function() {
      zingchart.render({
        id: 'zc',
        width: 800,
        height: 380,
        output: 'svg',
        data: cdata2
      });
    });
    
    
    
    zingchart.render({
      id: 'zc',
      width: 800,
      height: 380,
      output: 'svg',
      data: cdata1
    });