Olympics athletes by height and weight

by koh_edwin

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
    </p>
</figure>

CSS

#container {
    max-width: 800px;
    margin: auto;
}

.highcharts-figure,
.highcharts-data-table table {
    min-width: 360px;
    max-width: 800px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

JavaScript

Highcharts.setOptions({
    colors: ['rgba(5,141,199,0.5)', 'rgba(80,180,50,0.5)', 'rgba(237,86,27,0.5)']
});
const hyperCube= {
qDataPages:[{
qMatrix:
[[{qText: 'Wrinch Memorial Hospital (B.C.)', qNum: 'NaN', qElemNumber: 789, qState: 'O'},{qText: '80', qNum: '80', qElemNumber: 0, qState: 'L', qIsNull: true},{qText: '57.365310778', qNum: '57.365310778', qElemNumber: 0, qState: 'L', qIsNull: true},{qText: '44', qNum: '44', qElemNumber: 0, qState: 'L', qIsNull: true}],
[{qText: 'Kaigo Senior Living Group — Heritage Square (B.C.)', qNum: 'NaN', qElemNumber: 789, qState: 'O'},{qText: '60', qNum: '60', qElemNumber: 0, qState: 'L', qIsNull: true},{qText: '39.6781812411', qNum: '39.6781812411', qElemNumber: 0, qState: 'L', qIsNull: true},{qText: '42', qNum: '42', qElemNumber: 0, qState: 'L', qIsNull: true}],
]}
]};
const vseries = [{
	name: 'metric',
	id: 'basketball',
  marker: {symbol: 'circle'},
  type: 'scatter',
  data:[
{x:80,y:57.365310778,name:'Wrinch Memorial Hospital (B.C.)'},
{x:60,y:39.6781812411,name:'Kaigo Senior Living Group — Heritage Square (B.C.)'},
{x:57,y:34.9963765114,name:'McBride and District Hospital (B.C.)'},
{x:46,y:35.273035916,name:'Points West Living — Red Deer (Alta.)'},
{x:46,y:28.456,name:'St-Thomas Vallée Memramcook (corp.) — Notre-Dame-du-Sacré-Coeur (N.B.)'},
{x:46,y:26.4140416307,name:'The Care Group — The OxFord (B.C.)'},
{x:45,y:35.273035916,name:'Points West Living'},
{x:44,y:30.463183148,name:'Gander Long-Term Care Home (N.L.)'},
{x:43,y:34.6138970869,name:'The Brenda Strafford Foundation Ltd. — Tudor Manor (Alta.)'},
{x:40,y:23.607,name:'Rob L. Knowles Vet Unit (N.B.)'},
{x:38,y:33.56739215,name:'Lakeridge Health — Lakeridge Gardens (Ont.)'},
{x:38,y:33.56739215,name:'Lakeridge Health (Ont.)'},
{x:38,y:26.973,name:'Villa Maria (N.B.)'},
{x:36,y:28.6521413201,name:'Westhills Care Centre (Ont.)'},
{x:35,y:23.7804949102,name:'Grand Falls Windsor Long-Term Care Home (N.L.)'},
{x:16,y:11.8297251,name:'Jarlette Health Services — Villa...