• 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 {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
            }
    
            .chart--container {
                min-height: 150px;
                width: 100%;
                height: 100%;
            }
    
            .zc-ref {
                display: none;
            }
    
            zing-grid[loading] {
                height: 480px;
            }
        </style>
    </head>
    
    <body>
        <div id="myChart" class="chart--container">
            <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
        </div>
        <script>
            ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
            let games = ['BRA vs CHI', 'COL vs URU', 'NED vs MEX', 'CRC vs GRE', 'FRA vs NGA', 'GER vs ALG', 'ARG vs SWI', 'BEL vs USA'];
    
            let _r_ = (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
            let chartData = {},
                g, m, r;
            for (g = 0; g < games.length; g++) {
                chartData[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) {
                        chartData[g].push([m, _r_(0, 100)]);
                    } else if (r >= 0.85 && r < 0.95) {
                        chartData[g].push([m, _r_(50, 300)]);
                    } else {
                        chartData[g].push([m, _r_(200, 800)]);
                    }
                }
            }
    
            let chartConfig = {
                type: 'scatter',
                clustered: true,
                title: {
                    text: 'Distance Travelled by Football Players',
                    adjustLayout: true
                },
                plot: {
                    clusterOffset: 5,
                    marker: {
                        alpha: 0.5,
                        borderWidth: '0px',
                        size: '4px'
                    }
                },
                plotarea: {
                    margin: 'dynamic'
                },
                scaleX: {
                    values: games,
                    item: {
                        fontSize: '13px',
                        fontWeight: 'bold'
                    },
                    label: {
                        text: 'Game'
                    },
                    lineWidth: '0px',
                    offset: '0px',
                    placement: 'opposite',
                    tick: {
                        visible: false
                    }
                },
                scaleY: {
                    guide: {
                        visible: false
                    },
                    label: {
                        text: 'Distance travelled (m)'
                    },
                    lineColor: '#aaa',
                    offset: '0px',
                    tick: {
                        lineColor: '#aaa'
                    }
                },
                tooltip: {
                    text: 'Minute %scale-key-value: %node-value meters travelled'
                },
                series: []
            };
    
            for (g = 0; g < games.length; g++) {
                let sdata = {
                    values: chartData[g],
                    clustered: true
                };
                chartConfig['series'].push(sdata);
            }
    
            // window.onload event for Javascript to run after HTML
            // because this Javascript is injected into the document head
            window.addEventListener('load', () => {
                // Javascript code to execute after DOM content
                zingchart.render({
                    id: 'myChart',
                    data: chartConfig,
                    output: 'svg'
                });
            });
        </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" class="chart--container">
    			<a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    		</div>
    	</body>
    </html>
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
    
    .chart--container {
      min-height: 150px;
      width: 100%;
      height: 100%;
    }
    
    .zc-ref {
      display: none;
    }
    let games = ['BRA vs CHI', 'COL vs URU', 'NED vs MEX', 'CRC vs GRE', 'FRA vs NGA', 'GER vs ALG', 'ARG vs SWI', 'BEL vs USA'];
    
    let _r_ = (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
    let chartData = {}, g, m, r;
    for (g = 0; g < games.length; g++) {
      chartData[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) {
          chartData[g].push([m, _r_(0, 100)]);
        } else if (r >= 0.85 && r < 0.95) {
          chartData[g].push([m, _r_(50, 300)]);
        } else {
          chartData[g].push([m, _r_(200, 800)]);
        }
      }
    }
    
    let chartConfig = {
      type: 'scatter',
      clustered: true,
      title: {
        text: 'Distance Travelled by Football Players',
        adjustLayout: true
      },
      plot: {
        clusterOffset: 5,
        marker: {
          alpha: 0.5,
          borderWidth: '0px',
          size: '4px'
        }
      },
      plotarea: {
        margin: 'dynamic'
      },
      scaleX: {
        values: games,
        item: {
          fontSize: '13px',
          fontWeight: 'bold'
        },
        label: {
          text: 'Game'
        },
        lineWidth: '0px',
        offset: '0px',
        placement: 'opposite',
        tick: {
          visible: false
        }
      },
      scaleY: {
        guide: {
          visible: false
        },
        label: {
          text: 'Distance travelled (m)'
        },
        lineColor: '#aaa',
        offset: '0px',
        tick: {
          lineColor: '#aaa'
        }
      },
      tooltip: {
        text: 'Minute %scale-key-value: %node-value meters travelled'
      },
      series: [
      ]
    };
    
    for (g = 0; g < games.length; g++) {
      let sdata = {
        values: chartData[g],
        clustered: true
      };
      chartConfig['series'].push(sdata);
    }
    
    // window.onload event for Javascript to run after HTML
    // because this Javascript is injected into the document head
    window.addEventListener('load', () => {
      // Javascript code to execute after DOM content
      zingchart.render({
        id: 'myChart',
        data: chartConfig,
        output: 'svg'
      });
    });