• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
    
        <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: 500px;
            }
        </style>
    </head>
    
    <body>
        <div id="zc"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
        <script>
            ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
            var NODES = 2000;
            var _TS_ = (new Date()).getTime();
    
            var dataArea = [];
            var dataScatter1 = [];
            var dataScatter2 = [];
            var dataBubble1 = [];
            var dataBubble2 = [];
            var dataVolume = [];
    
            // set values between 10 & 90
            var vArea = Math.round(10 + 80 * Math.random());
    
            // set values between 2000 & 20000
            var vVolume = Math.round(2000 + 18000 * Math.random());
    
            var ts = _TS_;
    
            var zoomTo = [0, 0];
    
            for (var i = 0; i < NODES; i++) {
                dataArea.push([ts, vArea]);
                dataVolume.push([ts, vVolume]);
                dataScatter1.push([ts, vArea + Math.round(-4 * Math.random())]);
                dataScatter2.push([ts, vArea + Math.round(4 * Math.random())]);
                dataBubble1.push([ts, vArea + Math.round(-4 * Math.random()), Math.round(2 + 28 * Math.random())]);
                dataBubble2.push([ts, vArea + Math.round(4 * Math.random()), Math.round(2 + 28 * Math.random())]);
                vArea += Math.round(-5 + 10 * Math.random());
                if (vArea < 10 || vArea > 90) {
                    vArea = Math.round(10 + 80 * Math.random());
                }
                vVolume = Math.round(2000 + 18000 * Math.random());
    
                if (i === Math.round(NODES * 0.95)) {
                    zoomTo[0] = ts;
                }
                if (i === NODES - 1) {
                    zoomTo[1] = ts;
                }
    
                ts += Math.round(1000 + 9000 * Math.random());
            }
    
            var jsonData = {
                'flat': true,
                'background-color': '#000',
                'graphset': [{
                        'background-color': '#000',
                        'type': 'mixed',
                        'scale-x': {
                            'step': '10second',
                            'zooming': true,
                            'transform': {
                                'type': 'date',
                                'uniform': false
                            },
                            'item': {
                                'font-family': 'Lucida Sans Unicode',
                                'font-size': 11
                            },
                            'guide': {
                                'visible': true,
                                'line-width': 1,
                                'alpha': 0.1,
                                'line-style': 'solid'
                            },
                            '-zoom-to-values': zoomTo
                        },
                        'plotarea': {
                            'margin': '5 5 90 5'
                        },
                        'scale-y': {
                            '-zooming': true,
                            'offset-start': '21%',
                            'auto-fit': true,
                            'item': {
                                'placement': 'inner',
                                'font-family': 'Lucida Sans Unicode',
                                'font-size': 11
                            },
                            'tick': {
                                'placement': 'inner'
                            },
                            'guide': {
                                'line-width': 1,
                                'alpha': 0.1,
                                'line-style': 'solid'
                            }
                        },
                        'scale-y-2': {
                            'offset-end': '81%',
                            'item': {
                                'placement': 'inner',
                                'font-family': 'Lucida Sans Unicode',
                                'font-size': 11
                            },
                            'short': true,
                            'short-unit': 'K',
                            'tick': {
                                'placement': 'inner'
                            },
                            'guide': {
                                'line-width': 1,
                                'alpha': 0.2,
                                'line-style': 'solid'
                            }
                        },
                        'crosshair-x': {
                            'plot-label': {
                                'multiple': true,
                                'font-family': 'Lucida Sans Unicode',
                                'font-size': 11
                            },
                            'scale-label': {
                                'font-family': 'Lucida Sans Unicode',
                                'font-size': 11
                            }
                        },
                        'crosshair-y': {
                            'scale-label': {
                                'font-family': 'Lucida Sans Unicode',
                                'font-size': 11,
                                'offset-x': 40,
                                'callout-position': 'left'
                            }
                        },
                        'plot': {
                            'exact': true,
                            'smart-sampling': true,
                            'max-trackers': 0,
                            'mode': 'fast'
                        },
                        'series': [{
                                'type': 'area',
                                'hint-ts': true,
                                'aspect': 'stepped',
                                'step-start': 'after',
                                'values': dataArea,
                                'line-width': 0,
                                'line-color': '#388',
                                'alpha-area': 0.5,
                                'background-color': '#388',
                                'marker': {
                                    'type': 'none'
                                },
                                'guide-label': {
                                    'color': '#388',
                                    'text': 'Trade: %node-value'
                                },
                                'preview-state': {
                                    'line-width': 1,
                                    'background-color': '#009',
                                    'alpha-area': 0.2,
                                    'alpha': 1,
                                    'line-color': '#00b0ff'
                                }
                            },
                            {
                                'type': 'bubble',
                                'values': dataBubble1,
                                'preview': false,
                                'min-size': 3,
                                'max-size': 10,
                                'marker': {
                                    'background-color': '#c33',
                                    'border-width': 0,
                                    'alpha': 0.4
                                }
                            },
                            {
                                'type': 'bubble',
                                'values': dataBubble2,
                                'preview': false,
                                'min-size': 3,
                                'max-size': 10,
                                'marker': {
                                    'background-color': '#2a6',
                                    'border-width': 0,
                                    'alpha': 0.4
                                }
                            },
    
                            {
                                'type': 'vbar',
                                'hint-ts': true,
                                'background-color': '#ddd',
                                'alpha': 0.9,
                                'bar-space-left': 1.1,
                                'bar-space-right': 1.1,
                                'values': dataVolume,
                                'preview': false,
                                'scales': 'scale-x,scale-y-2',
                                'guide-label': {
                                    'color': '#000',
                                    'text': 'Volume: %node-value'
                                }
                            }
                        ],
                        'preview': {
                            'height': 40,
                            'margin': 'auto 5 5 5',
                            'live': false,
                            'border-width': 1,
                            'handle': {}
                        }
                    }
    
                ]
            };
    
            //zingchart.DEV.DOMFRAGMENTS = 0;
            //zingchart.DEV.SKIPCONTEXTMENU = 1;
            zingchart.DEV.SKIPPROGRESS = 1;
            zingchart.DEV.SORTTOKENS = 0;
            zingchart.DEV.PLOTSTATS = 0;
            zingchart.DEV.RESOURCES = 0;
            zingchart.DEV.KEEPSOURCE = 0;
            zingchart.DEV.COPYDATA = 0;
            zingchart.SYNTAX = 'dashed';
    
            if (window.location.hash === '#profile') {
                console.profile('zc');
            }
            console.time('zc');
    
            zingchart.render({
                id: 'zc',
                width: '100%',
                height: 500,
                data: jsonData,
                events: {
                    load: function(p) {
                        if (window.location.hash === '#profile') {
                            console.profileEnd('zc');
                        }
                        console.timeEnd('zc');
                    }
                }
            });
        </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    	<head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
    	
    		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    	<body>
    		<div id="zc"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></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 NODES = 2000;
    var _TS_ = (new Date()).getTime();
    
    var dataArea = [];
    var dataScatter1 = [];
    var dataScatter2 = [];
    var dataBubble1 = [];
    var dataBubble2 = [];
    var dataVolume = [];
    
    // set values between 10 & 90
    var vArea = Math.round(10 + 80*Math.random());
    
    // set values between 2000 & 20000
    var vVolume = Math.round(2000 + 18000*Math.random());
    
    var ts = _TS_;
    
    var zoomTo = [0, 0];
    
    for (var i=0;i<NODES;i++) {
        dataArea.push([ts, vArea]);
        dataVolume.push([ts, vVolume]);
        dataScatter1.push([ts, vArea + Math.round(-4*Math.random())]);
        dataScatter2.push([ts, vArea + Math.round(4*Math.random())]);
        dataBubble1.push([ts, vArea + Math.round(-4*Math.random()), Math.round(2 + 28*Math.random())]);
        dataBubble2.push([ts, vArea + Math.round(4*Math.random()), Math.round(2 + 28*Math.random())]);
        vArea += Math.round(-5 + 10*Math.random());
        if (vArea < 10 || vArea > 90) {
            vArea = Math.round(10 + 80*Math.random());
        }
        vVolume = Math.round(2000 + 18000*Math.random());
    
        if (i === Math.round(NODES*0.95)) {
            zoomTo[0] = ts;
        }
        if (i === NODES - 1) {
            zoomTo[1] = ts;
        }
    
        ts += Math.round(1000 + 9000*Math.random());
    }
    
    var jsonData = {
        'flat' : true,
        'background-color' : '#000',
        'graphset' : [
            {
                'background-color' : '#000',
                'type' : 'mixed',
                'scale-x' : {
                    'step' : '10second',
                    'zooming' : true,
                    'transform' : {
                        'type' : 'date',
                        'uniform' : false
                    },
                    'item' : {
                        'font-family' : 'Lucida Sans Unicode',
                        'font-size' : 11
                    },
                    'guide' : {
                        'visible' : true,
                        'line-width' : 1,
                        'alpha' : 0.1,
                        'line-style' : 'solid'
                    },
                    '-zoom-to-values' : zoomTo
                },
                'plotarea' : {
                    'margin' : '5 5 90 5'
                },
                'scale-y' : {
                    '-zooming' : true,
                    'offset-start' : '21%',
                    'auto-fit' : true,
                    'item' : {
                        'placement' : 'inner',
                        'font-family' : 'Lucida Sans Unicode',
                        'font-size' : 11
                    },
                    'tick' : {
                        'placement' : 'inner'
                    },
                    'guide' : {
                        'line-width' : 1,
                        'alpha' : 0.1,
                        'line-style' : 'solid'
                    }
                },
                'scale-y-2' : {
                    'offset-end' : '81%',
                    'item' : {
                        'placement' : 'inner',
                        'font-family' : 'Lucida Sans Unicode',
                        'font-size' : 11
                    },
                    'short' : true,
                    'short-unit' : 'K',
                    'tick' : {
                        'placement' : 'inner'
                    },
                    'guide' : {
                        'line-width' : 1,
                        'alpha' : 0.2,
                        'line-style' : 'solid'
                    }
                },
                'crosshair-x' : {
                    'plot-label' : {
                        'multiple' : true,
                        'font-family' : 'Lucida Sans Unicode',
                        'font-size' : 11
                    },
                    'scale-label' : {
                        'font-family' : 'Lucida Sans Unicode',
                        'font-size' : 11                    
                    }
                },
                'crosshair-y' : {
                    'scale-label' : {
                        'font-family' : 'Lucida Sans Unicode',
                        'font-size' : 11,
                        'offset-x' : 40,
                        'callout-position' : 'left'
                    }
                },
                'plot' : {
                    'exact' : true,
            		    'smart-sampling' : true,
        			      'max-trackers' : 0,
        			      'mode' : 'fast'
                },
                'series' : [
                    {
                        'type' : 'area',
                        'hint-ts' : true,
                        'aspect' : 'stepped',
                        'step-start' : 'after',
                        'values' : dataArea,
                        'line-width' : 0,
                        'line-color' : '#388',
                        'alpha-area' : 0.5,
                        'background-color' : '#388',
                        'marker' : {
                            'type' : 'none'   
                        },
                        'guide-label' : {
                            'color' : '#388',
                            'text' : 'Trade: %node-value'
                        },
                        'preview-state' : {
                            'line-width' : 1,
                            'background-color' : '#009',
                            'alpha-area' : 0.2,
                            'alpha' : 1,
                            'line-color' : '#00b0ff'
                        }
                    },
                    {
                        'type' : 'bubble',
                        'values' : dataBubble1,
                        'preview' : false,
                        'min-size' : 3,
                        'max-size' : 10,
                        'marker' : {
                            'background-color' : '#c33',
                            'border-width' : 0,
                            'alpha' : 0.4
                        }
                    },
                    {
                        'type' : 'bubble',
                        'values' : dataBubble2,
                        'preview' : false,
                        'min-size' : 3,
                        'max-size' : 10,
                        'marker' : {
                            'background-color' : '#2a6',
                            'border-width' : 0,
                            'alpha' : 0.4
                        }
                    },
                    
                    {
                        'type' : 'vbar',
                        'hint-ts' : true,
                        'background-color' : '#ddd',
                        'alpha' : 0.9,
                        'bar-space-left' : 1.1,
                        'bar-space-right' : 1.1,
                        'values' : dataVolume,
                        'preview' : false,
                        'scales' : 'scale-x,scale-y-2',
                        'guide-label' : {
                            'color' : '#000',
                            'text' : 'Volume: %node-value'
                        }
                    }
                ],
                'preview' : {
                    'height' : 40,
                    'margin' : 'auto 5 5 5',
                    'live' : false,
                    'border-width' : 1,
                    'handle' : {    
                    }
                }
            }
            
        ]
    };
    
    //zingchart.DEV.DOMFRAGMENTS = 0;
    //zingchart.DEV.SKIPCONTEXTMENU = 1;
    zingchart.DEV.SKIPPROGRESS = 1;
    zingchart.DEV.SORTTOKENS = 0;
    zingchart.DEV.PLOTSTATS = 0;
    zingchart.DEV.RESOURCES = 0;
    zingchart.DEV.KEEPSOURCE = 0;
    zingchart.DEV.COPYDATA = 0;
    zingchart.SYNTAX = 'dashed';
    
    if (window.location.hash === '#profile') {
        console.profile('zc');
    }
    console.time('zc');
    
    zingchart.render({
        id : 'zc',
        width : '100%',
        height : 500,
        data : jsonData,
    	  events : {
    		  load : function(p) {
    		    if (window.location.hash === '#profile') {
    				  console.profileEnd('zc');
    			  }
    			  console.timeEnd('zc');
    		  }
    	  }
    });