• 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: 400px;
            }
        </style>
    </head>
    
    <body>
        <div id="zc"></div>
        <script>
            ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
            var games = ['BRAvsCHI', 'COLvsURU', 'NEDvsMEX', 'CRCvsGRE', 'FRAvsNGA', 'GERvsALG', 'ARGvsSWI', 'BELvsUSA'];
    
            var _r_ = function(min, max) {
                return Math.round(min + (max - min) * Math.random());
            }
    
            // create fake data, we will plot distance travelled by all players per each minute of the full 90 mins game
            var data = {},
                g, m, p, r;
            for (g = 0; g < games.length; g++) {
                data[g] = [];
                for (m = 0; m < 90; m++) {
                    // try to simulate original chart, majority of data is on the lower part
                    r = Math.random();
                    if (r >= 0 && r < 0.85) {
                        data[g].push([m, _r_(0, 100)]);
                    } else if (r >= 0.85 && r < 0.95) {
                        data[g].push([m, _r_(50, 300)]);
                    } else {
                        data[g].push([m, _r_(200, 800)]);
                    }
                }
            }
    
            var cdata = {
                type: 'scatter',
                clustered: true,
                title: {
                    adjustLayout: true,
                    text: 'Distance travelled by football players (added)'
                },
                plotarea: {
                    margin: 'dynamic'
                },
                scaleX: {
                    placement: 'opposite',
                    lineWidth: 0,
                    tick: {
                        visible: false
                    },
                    label: {
                        text: 'Game'
                    },
                    item: {
                        fontSize: 13,
                        fontWeight: 'bold'
                    },
                    offset: 0,
                    values: games
                },
                scaleY: {
                    guide: {
                        visible: false
                    },
                    lineColor: '#aaa',
                    tick: {
                        lineColor: '#aaa'
                    },
                    label: {
                        text: 'Distance travelled (m)'
                    },
                    offset: 0
                },
                tooltip: {
                    text: 'Minute %scale-key-value: %node-value meters travelled'
                },
                plot: {
                    clusterOffset: 5,
                    marker: {
                        borderWidth: 0,
                        size: 4,
                        alpha: 0.5
                    }
                },
                series: []
            };
    
            for (g = 0; g < games.length; g++) {
                var sdata = {
                    clustered: true,
                    values: data[g]
                };
                cdata['series'].push(sdata);
            }
    
            window.addEventListener('load', function() {
    
                zingchart.render({
                    id: 'zc',
                    width: 800,
                    height: 400,
                    output: 'svg',
                    data: cdata
                });
    
            });
        </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"></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 games = ['BRAvsCHI', 'COLvsURU', 'NEDvsMEX', 'CRCvsGRE', 'FRAvsNGA', 'GERvsALG', 'ARGvsSWI', 'BELvsUSA'];
    
    var _r_ = function(min, max) {
    	return Math.round(min + (max-min)*Math.random());	
    }
    
    // create fake data, we will plot distance travelled by all players per each minute of the full 90 mins game
    var data = {}, g, m, p, r;
    for (g=0;g<games.length;g++) {
    	data[g] = [];
    	for (m=0;m<90;m++) {
    		// try to simulate original chart, majority of data is on the lower part
    		r = Math.random();
    		if (r >= 0 && r < 0.85) {
    			data[g].push([m, _r_(0, 100)]);
    		} else if (r >= 0.85 && r < 0.95) {
    			data[g].push([m, _r_(50, 300)]);
    		} else {
    			data[g].push([m, _r_(200, 800)]);
    		}
    	}
    }
    
    var cdata = {
    	type : 'scatter',
    	clustered : true,
    	title : {
    		adjustLayout : true,
    		text : 'Distance travelled by football players (added)'
    	},
    	plotarea : {
    		margin : 'dynamic'
    	},
    	scaleX : {
    		placement : 'opposite',
    		lineWidth : 0,
    		tick : {
    			visible : false
    		},
    		label : {
    			text : 'Game'	
    		},
    		item : {
    			fontSize : 13,
    			fontWeight : 'bold'
    		},
    		offset : 0,
    		values : games   
    	},
    	scaleY : {
    		guide : {
    			visible : false
    		},
    		lineColor : '#aaa',
    		tick : {
    			lineColor : '#aaa'
    		},
    		label : {
    			text : 'Distance travelled (m)'
    		},
    		offset : 0
    	},
    	tooltip : {
    		text : 'Minute %scale-key-value: %node-value meters travelled'
    	},
    	plot : {
    		clusterOffset : 5,
    		marker : {
    			borderWidth : 0,
    			size : 4,
    			alpha : 0.5
    		}
    	},
    	series : [
    	]
    };
    
    for (g=0;g<games.length;g++) {
    	var sdata = {
    		clustered : true,
    		values : data[g]	
    	};
    	cdata['series'].push(sdata);
    }
    
    window.addEventListener('load', function() {
    
      zingchart.render({
        id : 'zc',
        width : 800,
        height : 400,
        output : 'svg',
        data : cdata
      });
    
    });