• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <style>
    8.     * {
    9.       font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans';
    10.       font-size: 12px;
    11.     }
    12.   </style>
    13.  
    14.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    15.   <style>
    16.     html,
    17.     body {
    18.       height: 100%;
    19.       width: 100%;
    20.       margin: 0;
    21.       padding: 0;
    22.     }
    23.  
    24.     #myChart {
    25.       height: 100%;
    26.       width: 100%;
    27.       min-height: 150px;
    28.     }
    29.  
    30.     .zc-ref {
    31.       display: none;
    32.     }
    33.   </style>
    34. </head>
    35.  
    36. <body>
    37.  
    38.   <div style="padding:5px">
    39.     <button id="bl1" style="font-size:11px;font-weight:bold;">Load Default Style</button>
    40.     <button id="bl2" style="font-size:11px;font-weight:bold;">Load Custom Style</button>
    41.   </div>
    42.  
    43.   <div id="zc"></div>
    44.   <script>
    45.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    46.     var cdata1 = {
    47.       "background-color": "#f3f3f3 #d9d9d9",
    48.       "type": "depth",
    49.       "options": {
    50.         "currency": "$"
    51.       },
    52.       "series": [{
    53.           "values": [
    54.             [1168.49, 0],
    55.             [1164.69, 12.0211],
    56.             [1163.38, 33.0049],
    57.             [1160.98, 45.5622],
    58.             [1158.64, 60.4819],
    59.             [1154.04, 71.5594],
    60.             [1146.54, 83.2051],
    61.             [1133.37, 106.8834],
    62.             [1129.63, 127.1219],
    63.             [1126.89, 145.2484],
    64.             [1115.14, 155.8074],
    65.             [1113.54, 171.8438],
    66.             [1110.49, 184.443],
    67.             [1106.92, 202.3068],
    68.             [1106.7, 224.5185],
    69.             [1104.03, 244.5286],
    70.             [1101.99, 256.5801],
    71.             [1099.57, 272.8992],
    72.             [1099.47, 289.2549],
    73.             [1095.76, 300.107],
    74.             [1091.75, 320.0837],
    75.             [1091.37, 334.7523],
    76.             [1086.9, 357.9836],
    77.             [1086.6, 375.3844],
    78.             [1081.13, 387.3668],
    79.             [1079.3, 403.3796],
    80.             [1074.56, 420.0898],
    81.             [1069.69, 438.8176],
    82.             [1068.59, 462.0495],
    83.             [1056.35, 484.2044],
    84.             [1052.93, 507.0559],
    85.             [1052.03, 529.1966],
    86.             [1047.46, 541.6345],
    87.             [1033.06, 551.942],
    88.             [1030.42, 569.7072],
    89.             [1025.65, 583.7136],
    90.             [1023.38, 608.1764],
    91.             [1020.04, 620.0944],
    92.             [1018.53, 644.661],
    93.             [1014.92, 661.6777]
    94.           ],
    95.           "text": "Sell"
    96.         },
    97.         {
    98.           "values": [
    99.             [1168.49, 0],
    100.             [1172.22, 33.1932],
    101.             [1174.28, 50.5177],
    102.             [1174.99, 81.8346],
    103.             [1189.53, 104.332],
    104.             [1191.07, 119.9178],
    105.             [1195.62, 146.3812],
    106.             [1199.32, 180.9109],
    107.             [1201.89, 199.313],
    108.             [1204.34, 228.9945],
    109.             [1206.47, 251.6454],
    110.             [1209.44, 285.6366],
    111.             [1221.89, 312.7949],
    112.             [1230.48, 328.6889],
    113.             [1235.24, 351.3438],
    114.             [1248.33, 377.9289],
    115.             [1251.24, 409.9444],
    116.             [1253.75, 435.5418],
    117.             [1257.48, 453.8852],
    118.             [1261.01, 483.8769],
    119.             [1265.06, 499.7163],
    120.             [1268.75, 529.6374],
    121.             [1270.2, 552.1779],
    122.             [1272.15, 579.5218],
    123.             [1274.19, 606.4376],
    124.             [1276.17, 638.8508],
    125.             [1283.07, 668.7969],
    126.             [1285.76, 694.1647],
    127.             [1287.89, 709.9417],
    128.             [1288.72, 735.6358],
    129.             [1295.71, 765.2281],
    130.             [1303.26, 784.6807],
    131.             [1305.43, 801.1021],
    132.             [1307.78, 817.4528],
    133.             [1312.76, 836.7914],
    134.             [1317.6, 859.4746],
    135.             [1322.31, 891.443],
    136.             [1324.35, 907.6098],
    137.             [1325.7, 931.1996],
    138.             [1528.01, 949.3013]
    139.           ],
    140.           "text": "Buy"
    141.         }
    142.       ]
    143.     };
    144.  
    145.     var cdata2 = {
    146.       "type": "depth",
    147.       "background-color": "#000",
    148.       "options": {
    149.         "currency": "\u20ac",
    150.         "button-zoomout": {
    151.           "tooltip": {
    152.             "text": "Zoomer en arrière"
    153.           },
    154.           "background-color": "#000",
    155.           "border-color": "#ccc",
    156.           "color": "#fff",
    157.           "border-radius": 11,
    158.           "hover-state": {
    159.             "background-color": "#333"
    160.           }
    161.         },
    162.         "button-zoomin": {
    163.           "tooltip": {
    164.             "text": "Zoomer en avant"
    165.           },
    166.           "background-color": "#000",
    167.           "border-color": "#ccc",
    168.           "color": "#fff",
    169.           "border-radius": 11,
    170.           "hover-state": {
    171.             "background-color": "#333"
    172.           }
    173.         },
    174.         "title": {
    175.           "color": "#ff0"
    176.         },
    177.         "subtitle": {
    178.           "visible": false
    179.         },
    180.         "mmp-marker": {
    181.           "alpha": 0.75,
    182.           "line-color": "#999",
    183.           "label": {
    184.             "color": "#fff",
    185.             "font-size": 15,
    186.             "offset-y": 20
    187.           }
    188.         },
    189.         "palette": ['#909', '#990'],
    190.         "labels": {
    191.           "cost": "Coût"
    192.         }
    193.       },
    194.       "scale-x": {
    195.         "item": {
    196.           "font-size": 11,
    197.           "color": "#f90"
    198.         }
    199.       },
    200.       "scale-y": {
    201.         "item": {
    202.           "color": "#fff"
    203.         }
    204.       },
    205.       "scale-y-2": {
    206.         "item": {
    207.           "color": "#fff"
    208.         }
    209.       },
    210.       "plot": {
    211.         "mode": "normal"
    212.       },
    213.       "crosshair-x": {
    214.         "plot-label": {
    215.           "color": "#fff",
    216.           "background-color": "#000"
    217.         }
    218.       },
    219.       "series": [{
    220.           "values": [
    221.             [83168.4942, 0],
    222.             [83165.2911, 24.5257],
    223.             [83162.4432, 41.831],
    224.             [83155.7512, 55.5769],
    225.             [83155.2945, 67.9671],
    226.             [83151.4232, 78.4742],
    227.             [83151.3712, 91.5577],
    228.             [83150.8574, 104.5983],
    229.             [83150.4721, 123.8432],
    230.             [83149.6144, 147.7095],
    231.             [83148.2683, 171.1301],
    232.             [83147.3312, 190.1485],
    233.             [83142.4782, 210.6557],
    234.             [83139.2812, 228.9494],
    235.             [83139.1911, 244.5898],
    236.             [83134.4493, 258.1534],
    237.             [83131.9837, 278.0654],
    238.             [83131.6223, 302.7251],
    239.             [83130.3352, 317.3595],
    240.             [83122.9212, 333.889],
    241.             [83118.0342, 352.3895],
    242.             [83117.3329, 374.7495],
    243.             [83105.0412, 388.6047],
    244.             [83103.0253, 404.7422],
    245.             [83098.6836, 426.4222],
    246.             [83095.4497, 437.743],
    247.             [83091.9221, 461.9394],
    248.             [83087.6823, 474.8041],
    249.             [83083.1435, 495.8427],
    250.             [83080.8234, 513.83],
    251.             [83078.3357, 535.1954],
    252.             [83076.0832, 554.3064],
    253.             [83073.8655, 572.399],
    254.             [83071.9923, 587.107],
    255.             [83068.2523, 606.2238],
    256.             [83066.6343, 623.5779],
    257.             [83059.5455, 642.0529],
    258.             [83057.8222, 664.9309],
    259.             [83057.7349, 677.6618],
    260.             [83054.5993, 702.1566]
    261.           ],
    262.           "text": "Vendre"
    263.         },
    264.         {
    265.           "values": [
    266.             [83168.4942, 0],
    267.             [83173.5953, 29.0944],
    268.             [83177.5155, 60.5268],
    269.             [83178.2274, 94.9951],
    270.             [83178.8583, 129.6222],
    271.             [83190.3322, 155.1349],
    272.             [83193.0553, 179.3527],
    273.             [83196.3542, 205.565],
    274.             [83197.8851, 227.5875],
    275.             [83202.0866, 247.89],
    276.             [83202.6833, 278.4508],
    277.             [83204.7512, 311.6391],
    278.             [83218.5123, 343.4197],
    279.             [83218.5655, 378.3272],
    280.             [83222.1664, 395.7356],
    281.             [83226.3923, 418.799],
    282.             [83230.4766, 446.4546],
    283.             [83232.0442, 469.4259],
    284.             [83245.1453, 490.0896],
    285.             [83249.8511, 523.8051],
    286.             [83256.5532, 546.2099],
    287.             [83257.7456, 575.9132],
    288.             [83259.8746, 593.3904],
    289.             [83261.8122, 621.4962],
    290.             [83266.4694, 640.2163],
    291.             [83270.2922, 669.7849],
    292.             [83271.7844, 692.9558],
    293.             [83272.8266, 718.0753],
    294.             [83277.1333, 751.864],
    295.             [83280.1222, 779.7172],
    296.             [83282.6788, 809.8779],
    297.             [83285.2123, 826.0661],
    298.             [83293.2132, 857.981],
    299.             [83297.19, 884.2067],
    300.             [83311.1421, 899.814],
    301.             [83311.5344, 927.7719],
    302.             [83314.5662, 954.9667],
    303.             [83322.4794, 986.9748],
    304.             [83322.8721, 1013.3939],
    305.             [83323.0612, 1040.1686]
    306.           ],
    307.           "text": "Acheter"
    308.         }
    309.       ]
    310.     };
    311.  
    312.     var chartupdate = function(c) {
    313.  
    314.       // generate random data
    315.       if (c === 0) {
    316.         var fMidMarketPrice = 1168.49 + (-50 + 100 * Math.random());
    317.       } else {
    318.         var fMidMarketPrice = 83168.49 + (-500 + 1000 * Math.random());
    319.       }
    320.  
    321.       var sells = [],
    322.         buys = [],
    323.         kref, vref, kstep, vstep, mul, vmax = 0;
    324.  
    325.       kref = fMidMarketPrice;
    326.       vref = 0;
    327.       for (var s = 0; s < 100; s++) {
    328.         vmax = Math.max(vmax, vref);
    329.         sells.push([parseFloat(kref.toFixed(2)), parseFloat(vref.toFixed(4))]);
    330.         mul = Math.random() < 0.25 ? 15 : 5;
    331.         kstep = mul * Math.random();
    332.         vstep = 10 + 15 * Math.random();
    333.         kref -= kstep;
    334.         vref += vstep;
    335.       }
    336.  
    337.       kref = fMidMarketPrice;
    338.       vref = 0;
    339.       for (var b = 0; b < 100; b++) {
    340.         vmax = Math.max(vmax, vref);
    341.         buys.push([parseFloat(kref.toFixed(2)), parseFloat(vref.toFixed(4))]);
    342.         mul = Math.random() < 0.25 ? 15 : 5;
    343.         kstep = mul * Math.random();
    344.         vstep = 15 + 20 * Math.random();
    345.         kref += kstep;
    346.         vref += vstep;
    347.       }
    348.  
    349.       if (c === 0) {
    350.         cdata1['series'][0]['values'] = sells;
    351.         cdata1['series'][1]['values'] = buys;
    352.         zingchart.exec('zc1', 'setdata', {
    353.           data: cdata1
    354.         });
    355.       } else {
    356.         cdata2['series'][0]['values'] = sells;
    357.         cdata2['series'][1]['values'] = buys;
    358.         zingchart.exec('zc2', 'setdata', {
    359.           data: cdata2
    360.         });
    361.       }
    362.  
    363.     };
    364.  
    365.  
    366.     bl1.addEventListener('click', function() {
    367.       zingchart.render({
    368.         id: 'zc',
    369.         width: 800,
    370.         height: 380,
    371.         output: 'svg',
    372.         data: cdata1
    373.       });
    374.     });
    375.  
    376.     bl2.addEventListener('click', function() {
    377.       zingchart.render({
    378.         id: 'zc',
    379.         width: 800,
    380.         height: 380,
    381.         output: 'svg',
    382.         data: cdata2
    383.       });
    384.     });
    385.  
    386.  
    387.  
    388.     zingchart.render({
    389.       id: 'zc',
    390.       width: 800,
    391.       height: 380,
    392.       output: 'svg',
    393.       data: cdata1
    394.     });
    395.   </script>
    396. </body>
    397.  
    398. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <style>
    8.     * {
    9.       font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans';
    10.       font-size: 12px;
    11.     }
    12.   </style>
    13.  
    14.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    15. </head>
    16.  
    17. <body>
    18.  
    19.   <div style="padding:5px">
    20.     <button id="bl1" style="font-size:11px;font-weight:bold;">Load Default Style</button>
    21.     <button id="bl2" style="font-size:11px;font-weight:bold;">Load Custom Style</button>
    22.   </div>
    23.  
    24.   <div id="zc"></div>
    25. </body>
    26.  
    27. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8.  
    9. #myChart {
    10.   height: 100%;
    11.   width: 100%;
    12.   min-height: 150px;
    13. }
    14.  
    15. .zc-ref {
    16.   display: none;
    17. }
    1. var cdata1 = {
    2.   "background-color": "#f3f3f3 #d9d9d9",
    3.   "type": "depth",
    4.   "options": {
    5.     "currency": "$"
    6.   },
    7.   "series": [{
    8.       "values": [
    9.         [1168.49, 0],
    10.         [1164.69, 12.0211],
    11.         [1163.38, 33.0049],
    12.         [1160.98, 45.5622],
    13.         [1158.64, 60.4819],
    14.         [1154.04, 71.5594],
    15.         [1146.54, 83.2051],
    16.         [1133.37, 106.8834],
    17.         [1129.63, 127.1219],
    18.         [1126.89, 145.2484],
    19.         [1115.14, 155.8074],
    20.         [1113.54, 171.8438],
    21.         [1110.49, 184.443],
    22.         [1106.92, 202.3068],
    23.         [1106.7, 224.5185],
    24.         [1104.03, 244.5286],
    25.         [1101.99, 256.5801],
    26.         [1099.57, 272.8992],
    27.         [1099.47, 289.2549],
    28.         [1095.76, 300.107],
    29.         [1091.75, 320.0837],
    30.         [1091.37, 334.7523],
    31.         [1086.9, 357.9836],
    32.         [1086.6, 375.3844],
    33.         [1081.13, 387.3668],
    34.         [1079.3, 403.3796],
    35.         [1074.56, 420.0898],
    36.         [1069.69, 438.8176],
    37.         [1068.59, 462.0495],
    38.         [1056.35, 484.2044],
    39.         [1052.93, 507.0559],
    40.         [1052.03, 529.1966],
    41.         [1047.46, 541.6345],
    42.         [1033.06, 551.942],
    43.         [1030.42, 569.7072],
    44.         [1025.65, 583.7136],
    45.         [1023.38, 608.1764],
    46.         [1020.04, 620.0944],
    47.         [1018.53, 644.661],
    48.         [1014.92, 661.6777]
    49.       ],
    50.       "text": "Sell"
    51.     },
    52.     {
    53.       "values": [
    54.         [1168.49, 0],
    55.         [1172.22, 33.1932],
    56.         [1174.28, 50.5177],
    57.         [1174.99, 81.8346],
    58.         [1189.53, 104.332],
    59.         [1191.07, 119.9178],
    60.         [1195.62, 146.3812],
    61.         [1199.32, 180.9109],
    62.         [1201.89, 199.313],
    63.         [1204.34, 228.9945],
    64.         [1206.47, 251.6454],
    65.         [1209.44, 285.6366],
    66.         [1221.89, 312.7949],
    67.         [1230.48, 328.6889],
    68.         [1235.24, 351.3438],
    69.         [1248.33, 377.9289],
    70.         [1251.24, 409.9444],
    71.         [1253.75, 435.5418],
    72.         [1257.48, 453.8852],
    73.         [1261.01, 483.8769],
    74.         [1265.06, 499.7163],
    75.         [1268.75, 529.6374],
    76.         [1270.2, 552.1779],
    77.         [1272.15, 579.5218],
    78.         [1274.19, 606.4376],
    79.         [1276.17, 638.8508],
    80.         [1283.07, 668.7969],
    81.         [1285.76, 694.1647],
    82.         [1287.89, 709.9417],
    83.         [1288.72, 735.6358],
    84.         [1295.71, 765.2281],
    85.         [1303.26, 784.6807],
    86.         [1305.43, 801.1021],
    87.         [1307.78, 817.4528],
    88.         [1312.76, 836.7914],
    89.         [1317.6, 859.4746],
    90.         [1322.31, 891.443],
    91.         [1324.35, 907.6098],
    92.         [1325.7, 931.1996],
    93.         [1528.01, 949.3013]
    94.       ],
    95.       "text": "Buy"
    96.     }
    97.   ]
    98. };
    99.  
    100. var cdata2 = {
    101.   "type": "depth",
    102.   "background-color": "#000",
    103.   "options": {
    104.     "currency": "\u20ac",
    105.     "button-zoomout": {
    106.       "tooltip": {
    107.         "text": "Zoomer en arrière"
    108.       },
    109.       "background-color": "#000",
    110.       "border-color": "#ccc",
    111.       "color": "#fff",
    112.       "border-radius": 11,
    113.       "hover-state": {
    114.         "background-color": "#333"
    115.       }
    116.     },
    117.     "button-zoomin": {
    118.       "tooltip": {
    119.         "text": "Zoomer en avant"
    120.       },
    121.       "background-color": "#000",
    122.       "border-color": "#ccc",
    123.       "color": "#fff",
    124.       "border-radius": 11,
    125.       "hover-state": {
    126.         "background-color": "#333"
    127.       }
    128.     },
    129.     "title": {
    130.       "color": "#ff0"
    131.     },
    132.     "subtitle": {
    133.       "visible": false
    134.     },
    135.     "mmp-marker": {
    136.       "alpha": 0.75,
    137.       "line-color": "#999",
    138.       "label": {
    139.         "color": "#fff",
    140.         "font-size": 15,
    141.         "offset-y": 20
    142.       }
    143.     },
    144.     "palette": ['#909', '#990'],
    145.     "labels": {
    146.       "cost": "Coût"
    147.     }
    148.   },
    149.   "scale-x": {
    150.     "item": {
    151.       "font-size": 11,
    152.       "color": "#f90"
    153.     }
    154.   },
    155.   "scale-y": {
    156.     "item": {
    157.       "color": "#fff"
    158.     }
    159.   },
    160.   "scale-y-2": {
    161.     "item": {
    162.       "color": "#fff"
    163.     }
    164.   },
    165.   "plot": {
    166.     "mode": "normal"
    167.   },
    168.   "crosshair-x": {
    169.     "plot-label": {
    170.       "color": "#fff",
    171.       "background-color": "#000"
    172.     }
    173.   },
    174.   "series": [{
    175.       "values": [
    176.         [83168.4942, 0],
    177.         [83165.2911, 24.5257],
    178.         [83162.4432, 41.831],
    179.         [83155.7512, 55.5769],
    180.         [83155.2945, 67.9671],
    181.         [83151.4232, 78.4742],
    182.         [83151.3712, 91.5577],
    183.         [83150.8574, 104.5983],
    184.         [83150.4721, 123.8432],
    185.         [83149.6144, 147.7095],
    186.         [83148.2683, 171.1301],
    187.         [83147.3312, 190.1485],
    188.         [83142.4782, 210.6557],
    189.         [83139.2812, 228.9494],
    190.         [83139.1911, 244.5898],
    191.         [83134.4493, 258.1534],
    192.         [83131.9837, 278.0654],
    193.         [83131.6223, 302.7251],
    194.         [83130.3352, 317.3595],
    195.         [83122.9212, 333.889],
    196.         [83118.0342, 352.3895],
    197.         [83117.3329, 374.7495],
    198.         [83105.0412, 388.6047],
    199.         [83103.0253, 404.7422],
    200.         [83098.6836, 426.4222],
    201.         [83095.4497, 437.743],
    202.         [83091.9221, 461.9394],
    203.         [83087.6823, 474.8041],
    204.         [83083.1435, 495.8427],
    205.         [83080.8234, 513.83],
    206.         [83078.3357, 535.1954],
    207.         [83076.0832, 554.3064],
    208.         [83073.8655, 572.399],
    209.         [83071.9923, 587.107],
    210.         [83068.2523, 606.2238],
    211.         [83066.6343, 623.5779],
    212.         [83059.5455, 642.0529],
    213.         [83057.8222, 664.9309],
    214.         [83057.7349, 677.6618],
    215.         [83054.5993, 702.1566]
    216.       ],
    217.       "text": "Vendre"
    218.     },
    219.     {
    220.       "values": [
    221.         [83168.4942, 0],
    222.         [83173.5953, 29.0944],
    223.         [83177.5155, 60.5268],
    224.         [83178.2274, 94.9951],
    225.         [83178.8583, 129.6222],
    226.         [83190.3322, 155.1349],
    227.         [83193.0553, 179.3527],
    228.         [83196.3542, 205.565],
    229.         [83197.8851, 227.5875],
    230.         [83202.0866, 247.89],
    231.         [83202.6833, 278.4508],
    232.         [83204.7512, 311.6391],
    233.         [83218.5123, 343.4197],
    234.         [83218.5655, 378.3272],
    235.         [83222.1664, 395.7356],
    236.         [83226.3923, 418.799],
    237.         [83230.4766, 446.4546],
    238.         [83232.0442, 469.4259],
    239.         [83245.1453, 490.0896],
    240.         [83249.8511, 523.8051],
    241.         [83256.5532, 546.2099],
    242.         [83257.7456, 575.9132],
    243.         [83259.8746, 593.3904],
    244.         [83261.8122, 621.4962],
    245.         [83266.4694, 640.2163],
    246.         [83270.2922, 669.7849],
    247.         [83271.7844, 692.9558],
    248.         [83272.8266, 718.0753],
    249.         [83277.1333, 751.864],
    250.         [83280.1222, 779.7172],
    251.         [83282.6788, 809.8779],
    252.         [83285.2123, 826.0661],
    253.         [83293.2132, 857.981],
    254.         [83297.19, 884.2067],
    255.         [83311.1421, 899.814],
    256.         [83311.5344, 927.7719],
    257.         [83314.5662, 954.9667],
    258.         [83322.4794, 986.9748],
    259.         [83322.8721, 1013.3939],
    260.         [83323.0612, 1040.1686]
    261.       ],
    262.       "text": "Acheter"
    263.     }
    264.   ]
    265. };
    266.  
    267. var chartupdate = function(c) {
    268.  
    269.   // generate random data
    270.   if (c === 0) {
    271.     var fMidMarketPrice = 1168.49 + (-50 + 100 * Math.random());
    272.   } else {
    273.     var fMidMarketPrice = 83168.49 + (-500 + 1000 * Math.random());
    274.   }
    275.  
    276.   var sells = [],
    277.     buys = [],
    278.     kref, vref, kstep, vstep, mul, vmax = 0;
    279.  
    280.   kref = fMidMarketPrice;
    281.   vref = 0;
    282.   for (var s = 0; s < 100; s++) {
    283.     vmax = Math.max(vmax, vref);
    284.     sells.push([parseFloat(kref.toFixed(2)), parseFloat(vref.toFixed(4))]);
    285.     mul = Math.random() < 0.25 ? 15 : 5;
    286.     kstep = mul * Math.random();
    287.     vstep = 10 + 15 * Math.random();
    288.     kref -= kstep;
    289.     vref += vstep;
    290.   }
    291.  
    292.   kref = fMidMarketPrice;
    293.   vref = 0;
    294.   for (var b = 0; b < 100; b++) {
    295.     vmax = Math.max(vmax, vref);
    296.     buys.push([parseFloat(kref.toFixed(2)), parseFloat(vref.toFixed(4))]);
    297.     mul = Math.random() < 0.25 ? 15 : 5;
    298.     kstep = mul * Math.random();
    299.     vstep = 15 + 20 * Math.random();
    300.     kref += kstep;
    301.     vref += vstep;
    302.   }
    303.  
    304.   if (c === 0) {
    305.     cdata1['series'][0]['values'] = sells;
    306.     cdata1['series'][1]['values'] = buys;
    307.     zingchart.exec('zc1', 'setdata', {
    308.       data: cdata1
    309.     });
    310.   } else {
    311.     cdata2['series'][0]['values'] = sells;
    312.     cdata2['series'][1]['values'] = buys;
    313.     zingchart.exec('zc2', 'setdata', {
    314.       data: cdata2
    315.     });
    316.   }
    317.  
    318. };
    319.  
    320.  
    321. bl1.addEventListener('click', function() {
    322.   zingchart.render({
    323.     id: 'zc',
    324.     width: 800,
    325.     height: 380,
    326.     output: 'svg',
    327.     data: cdata1
    328.   });
    329. });
    330.  
    331. bl2.addEventListener('click', function() {
    332.   zingchart.render({
    333.     id: 'zc',
    334.     width: 800,
    335.     height: 380,
    336.     output: 'svg',
    337.     data: cdata2
    338.   });
    339. });
    340.  
    341.  
    342.  
    343. zingchart.render({
    344.   id: 'zc',
    345.   width: 800,
    346.   height: 380,
    347.   output: 'svg',
    348.   data: cdata1
    349. });