• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script nonce="undefined" 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;
        }
      </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
      });
    
    });