• 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: 450px;
            }
        </style>
    </head>
    
    <body>
        <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
        <script>
            ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
            var cfg = {
                globals: {
                    fontFamily: 'Lucida Sans Unicode'
                },
                type: 'line',
                plotarea: {
                    adjustLayout: true
                },
                crosshairX: {
                    singleLine: true
                },
                scaleX: {
                    zooming: true,
                    transform: {
                        type: 'date',
                        item: {
                            visible: true
                        }
                    }
                },
                scaleY: {
                    autoFit: true
                },
                series: [],
                legend: {
                    layout: 'float',
                    adjustLayout: true,
                    margin: '20 auto 0 auto',
                    toggleAction: 'remove'
                },
                preview: {
                    _width: 300,
                    height: 40,
                    adjustLayout: true,
                    borderWidth: 1,
                    borderColor: '#369',
                    label: {
                        _color: '#900',
                        _lineWidth: 1,
                        _lineColor: '#090'
                    },
                    handle: {
                        borderWidth: 0,
                        lineWidth: 0,
                        backgroundColor: '#369',
                        width: 10,
                        height: '100%',
                        label: {
                            _fontSize: 11,
                            _color: '#000',
                            _fontWeight: 'bold'
                        }
                    },
                    active: {
                        backgroundColor: 'transparent',
                        alpha: 1
                    }
                }
            };
    
            var nodes = 10000;
            var interval = 1000 * 60 * 1;
            var ts = new Date().getTime() + 13500 * interval;
    
            function dset(offset) {
                var d = [];
                var k, v;
                for (var i = 0; i < nodes; i++) {
                    if (i === 0) {
                        k = ts + offset;
                        v = ZC._i_(ZC._r_(400, 600));
                    } else {
                        k += ZC._i_(ZC._r_(interval, 10 * interval));
                        v += ZC._i_(ZC._r_(-10, 10));
                    }
                    d.push([k, v]);
                    //d.push(v);
                }
                return d;
            }
    
            cfg.series.push({
                values: dset(0)
            });
            cfg.series.push({
                values: dset(0)
            });
    
            zingchart.render({
                id: 'myChart',
                width: '100%',
                height: '100%',
                output: 'svg',
                data: cfg
            });
        </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="myChart"><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 cfg = {
        globals : {
            fontFamily : 'Lucida Sans Unicode'
        },
        type : 'line',
        plotarea : {
            adjustLayout : true
        },
        crosshairX : {
            singleLine : true
        },
        scaleX : {
            zooming : true,
            transform : {
                type : 'date',
                item : {
                    visible : true    
                }
            }
        },
        scaleY : {
            autoFit : true
        },
        series : [],
        legend : {
            layout : 'float',
            adjustLayout : true,
            margin : '20 auto 0 auto',
            toggleAction : 'remove'
        },
        preview : {
            _width : 300,
            height : 40,
            adjustLayout : true,
            borderWidth : 1,
            borderColor : '#369',
            label : {
                _color : '#900',
                _lineWidth : 1,
                _lineColor : '#090'
            },
            handle : {
                borderWidth : 0,
                lineWidth : 0,
                backgroundColor : '#369',
                width : 10,
                height : '100%',
                label : {
                    _fontSize : 11,
                    _color : '#000',
                    _fontWeight : 'bold'
                }
            },
            active : {
                backgroundColor : 'transparent',
                alpha : 1
            }
        }
    };
    
    var nodes = 10000;
    var interval = 1000*60*1;
    var ts = new Date().getTime() + 13500*interval;
    
    function dset(offset) {
        var d = [];
        var k, v;
        for (var i=0;i<nodes;i++) {
            if (i === 0) {
                k = ts + offset;
                v = ZC._i_(ZC._r_(400, 600));
            } else {
                k += ZC._i_(ZC._r_(interval, 10*interval));
                v += ZC._i_(ZC._r_(-10, 10));
            }
            d.push([k, v]);
            //d.push(v);
        }
        return d;
    }
    
    cfg.series.push({
        values : dset(0)
    });
    cfg.series.push({
        values : dset(0)
    });
    
    zingchart.render({
      id : 'myChart',
      width : '100%',
    	height : '100%',
    	output : 'svg',
    	data : cfg
    });