• 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 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;
            }
    
            zing-grid[loading] {
                height: 800px;
            }
        </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 = ["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
                    });
                }
    
            };
    
            $('#b1').click(chartupdate);
    
            $('#bl1').click(function() {
                zingchart.render({
                    id: 'zc',
                    width: 800,
                    height: 380,
                    output: 'svg',
                    data: cdata1
                });
            });
    
            $('#bl2').click(function() {
                zingchart.render({
                    id: 'zc',
                    width: 800,
                    height: 380,
                    output: 'svg',
                    data: cdata2
                });
            });
    
            $('#bu').click(function() {
                window.setInterval(function() {
                    chartupdate(0);
                }, 500);
            });
    
            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
            });
        }
        
    };
    
    $('#b1').click(chartupdate);
    
    $('#bl1').click(function() {
        zingchart.render({
          id : 'zc',
          width : 800,
          height : 380,
        	output : 'svg',
        	data : cdata1
        });
    });
    
    $('#bl2').click(function() {
        zingchart.render({
          id : 'zc',
          width : 800,
        	height : 380,
        	output : 'svg',
        	data : cdata2
        });
    });
    
    $('#bu').click(function() {
        window.setInterval(function() {chartupdate(0);}, 500);    
    });
     
    zingchart.render({
      id : 'zc',
    	width : 800,
    	height : 380,
    	output : 'svg',
    	data : cdata1
    });