Clustered Chart (Demo1)

<!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
  });

});