<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
#container {
  max-width: 500px;
  height: 600px;
  position: absolute;
  margin: auto;
  right: 0;
  left: 0;
}
let discipline = [
  {
    name: "Aquatics",
    data: "aquatics"
  },
  {
    name: "Archery",
    data: "archery"
  },
  {
    name: "Athletics",
    data: "athletics"
  },
  {
    name: "Badminton",
    data: "badminton"
  },
  {
    name: "Basketball",
    data: "basketball"
  },
  {
    name: "Canoe",
    data: "canoe"
  },
  {
    name: "Cycling",
    data: "cycling"
  },
  {
    name: "Equestrian",
    data: "equestrian"
  },
  {
    name: "Fencing",
    data: "fencing"
  },
  {
    name: "Football",
    data: "football"
  },
  {
    name: "Golf",
    data: "golf"
  },
  {
    name: "Gymnastics",
    data: "gymnastics"
  },
  {
    name: "Handball",
    data: "handball"
  },
  {
    name: "Hockey",
    data: "hockey"
  },
  {
    name: "Judo",
    data: "judo"
  },
  {
    name: "Modern Pentathlon",
    data: "modern pentathlon"
  },
  {
    name: "Rowing",
    data: "rowing"
  },
  {
    name: "Sailing",
    data: "sailing"
  },
  {
    name: "Shooting",
    data: "shooting"
  },
  {
    name: "Table Tennis",
    data: "tableTennis"
  },
  {
    name: "Taekwondo",
    data: "taekwondo"
  },
  {
    name: "Triathlon",
    data: "triathlon"
  },
  {
    name: "Volleyball",
    data: "volleyball"
  },
  {
    name: "Weight Lifting",
    data: "weightlifting"
  }
];


async function getData(){
  const response = await fetch( "https://raw.githubusercontent.com/mekhatria/demo_highcharts/master/olympic2012.json?callback=?"
);
  return response.json();
}


getData().then((data) => {
    const getData = (sportName) => {
      let temp = [];
      data.forEach((elm) => {
        if (elm.sport == sportName && elm.weight > 0 && elm.height > 0) {
          temp.push([elm.height, elm.weight]);
        }
      });
      return temp;
    };
    let series = [];
    discipline.forEach((e) => {
      series.push({
        name: e.name,
        data: getData(e.data)
      });
    });
    const colors = Highcharts.getOptions().colors.map(
      c => Highcharts.color(c).setOpacity(0.5).get()
    );
    Highcharts.chart("container", {
      chart: {
        type: "scatter",
        zoomType: "xy"
      },
      colors,
      title: {
        text: "Olympics 2012 sport by height and weight"
      },
      subtitle: {
        text:
          'Source: <a href="https://www.theguardian.com/sport/datablog/2012/aug/07/olympics-2012-athletes-age-weight-height">The Guardian</a>'
      },
      xAxis: {
        title: {
          text: "Height"
        },
        labels: {
          format: "{value} m"
        },
        startOnTick: true,
        endOnTick: true,
        showLastLabel: true
      },
      yAxis: {
        title: {
          text: "Weight"
        },
        labels: {
          format: "{value} kg"
        }
      },
      legend: {
        enabled: true
      },
      plotOptions: {
        scatter: {
          marker: {
            radius: 2.5,
            symbol: "circle",
            states: {
              hover: {
                enabled: true,
                lineColor: "rgb(100,100,100)"
              }
            }
          },
          states: {
            hover: {
              marker: {
                enabled: false
              }
            }
          }
        }
      },
      tooltip: {
        pointFormat: "Height: {point.x} m <br/> Weight: {point.y} kg"
      },
      series: series
    });
  }
);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.