Clustered Scatter Chart

<!doctype html>
<html class="zc-html">

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    .chart--container {
      height: 100%;
      width: 100%;
      min-height: 530px;
    }

    .zc-ref {
      display: none;
    }
  </style>
</head>


<body class="zc-body">
  
  <div id="myChart" class="chart--container">
    <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
  </div>

  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // DEFINE DATA
    // -----------------------------
    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'];

    // HELPER METHODS
    // -----------------------------
    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)]);
        }
      }
    }

    // CHART CONFIG
    // -----------------------------
    let chartConfig = {
      type: 'scatter',
      clustered: true,
      title: {
        text: 'Distance Travelled by Football Players',
        adjustLayout: true
      },
      plot: {
        clusterOffset: '5px',
        marker: {
          alpha: 0.5,
          borderWidth: 0,
          size: '4px'
        }
      },
      plotarea: {
        margin: 'dynamic'
      },
      scaleX: {
        values: games,
        item: {
          fontSize: '13px',
          fontWeight: 'bold'
        },
        label: {
          text: 'Game'
        },
        lineWidth: 0,
        offset: 0,
        placement: 'opposite',
        tick: {
          visible: false
        }
      },
      scaleY: {
        guide: {
          visible: false
        },
        label: {
          text: 'Distance travelled (m)'
        },
        lineColor: '#aaa',
        offset: 0,
        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);
    }

    // RENDER CHARTS
    // -----------------------------
    // window:load 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 class="zc-html">

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>


<body class="zc-body">
  
  <div id="myChart" class="chart--container">
    <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
  </div>

</body>

</html>

.chart--container {
  height: 100%;
  width: 100%;
  min-height: 530px;
}

.zc-ref {
  display: none;
}

// DEFINE DATA
// -----------------------------
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'];

// HELPER METHODS
// -----------------------------
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)]);
    }
  }
}

// CHART CONFIG
// -----------------------------
let chartConfig = {
  type: 'scatter',
  clustered: true,
  title: {
    text: 'Distance Travelled by Football Players',
    adjustLayout: true
  },
  plot: {
    clusterOffset: '5px',
    marker: {
      alpha: 0.5,
      borderWidth: 0,
      size: '4px'
    }
  },
  plotarea: {
    margin: 'dynamic'
  },
  scaleX: {
    values: games,
    item: {
      fontSize: '13px',
      fontWeight: 'bold'
    },
    label: {
      text: 'Game'
    },
    lineWidth: 0,
    offset: 0,
    placement: 'opposite',
    tick: {
      visible: false
    }
  },
  scaleY: {
    guide: {
      visible: false
    },
    label: {
      text: 'Distance travelled (m)'
    },
    lineColor: '#aaa',
    offset: 0,
    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);
}

// RENDER CHARTS
// -----------------------------
// window:load 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'
  });
});