<!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>
.chart--container {
height: 100%;
width: 100%;
min-height: 530px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body>
<div id="myChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
let chartData = [{
dataBox: [
[26, 37, 41.5, 47, 47],
[30, 40, 43, 54, 61],
[16, 21, 23, 26, 28],
[19, 21, 24, 27, 27],
[16, 22, 24, 26, 28],
[15, 20, 23.5, 29, 32],
[17, 25, 28, 33, 37],
[21, 22, 22.5, 26, 26],
[18, 25, 30, 44, 45],
[18, 21, 23, 25, 27],
[16, 20, 22, 26, 29],
[18, 22, 24, 29, 32],
[19, 29, 31, 42, 43],
[20, 24, 25, 30, 32],
[26, 28, 31, 46, 54],
[24, 32, 33, 40, 41],
[19, 21, 23, 45, 45],
[18, 21, 23, 27, 30],
[20, 23, 24, 27, 29],
[17, 31, 36, 41, 44],
[20, 29, 34, 43, 50],
[14, 18, 21, 24, 27],
[24, 28, 31, 37, 39],
[18, 22, 27.5, 35, 41],
[20, 25, 29, 34, 38],
[18, 22, 23, 28, 31],
[18, 21, 23, 25, 27],
],
dataOutlier: [
['Swimming - Male', 41],
['Swimming - Male', 37],
['Swimming - Male', 36],
['Swimming - Male', 29],
['Swimming - Male', 29],
['Shooting - Male', 60],
['Shooting - Male', 60],
['Shooting - Male', 60],
['Shooting - Male', 58],
['Shooting - Male', 57],
['Shooting - Male', 56],
['Shooting - Male', 56],
['Shooting - Male', 56],
['Shooting - Male', 55],
['Shooting - Male', 54],
['Shooting - Male', 53],
['Shooting - Male', 53],
['Shooting - Male', 51],
['Shooting - Male', 51],
['Gymnastics - Male', 49],
['Gymnastics - Male', 41],
['Gymnastics - Male', 37],
['Gymnastics - Male', 36],
['Gymnastics - Male', 34],
['Gymnastics - Male', 34],
['Gymnastics - Male', 34],
['Gymnastics - Male', 33],
['Gymnastics - Male', 32],
['Gymnastics - Male', 32],
['Gymnastics - Male', 32],
['Gymnastics - Male', 31],
['Gymnastics - Male', 31],
['Gymnastics - Male', 31],
['Gymnastics - Male', 30],
['Gymnastics - Male', 30],
['Gymnastics - Male', 30],
['Gymnastics - Male', 30],
['Rowing - Male', 44],
['Rowing - Male', 41],
['Rowing - Male', 39],
['Rowing - Male', 33],
['Rowing - Male', 32],
['Rowing - Male', 31],
['Rowing - Male', 31],
['Rowing - Male', 31],
['Diving - Male', 40],
['Diving - Male', 34],
['Wrestling - Male', 35],
['Wrestling - Male', 32],
['Wrestling - Male', 31],
['Wrestling - Male', 31],
['Wrestling - Male', 30],
['Wrestling - Male', 28],
['Wrestling - Male', 28],
['Wrestling - Male', 28],
['Wrestling - Male', 28],
['Athletics - Male', 38],
['Athletics - Male', 36],
['Athletics - Male', 35],
['Athletics - Male', 34],
['Athletics - Male', 34],
['Athletics - Male', 34],
['Athletics - Male', 33],
['Athletics - Male', 33],
['Athletics - Male', 33],
['Athletics - Male', 32],
['Athletics - Male', 32],
['Athletics - Male', 31],
['Athletics - Male', 31],
['Athletics - Male', 30],
['Athletics - Male', 30],
['Athletics - Male', 30],
['Athletics - Male', 30],
['Athletics - Male', 30],
['Athletics - Male', 30],
['Athletics - Male', 30],
['Athletics - Male', 30],
['Athletics - Male', 30],
['Athletics - Male', 29],
['Athletics - Male', 29],
['Athletics - Male', 29],
['Athletics - Male', 29],
['Athletics - Male', 29],
['Athletics - Male', 29],
['Athletics - Male', 29],
['Athletics - Male', 29],
['Athletics - Male', 29],
['Athletics - Male', 29],
['Athletics - Male', 29],
['Athletics - Male', 29],
['Fencing - Male', 46],
['Fencing - Male', 45],
['Fencing - Male', 44],
['Fencing - Male', 44],
['Fencing - Male', 43],
['Fencing - Male', 42],
['Fencing - Male', 41],
['Fencing - Male', 41],
['Fencing - Male', 40],
['Fencing - Male', 40],
['Fencing - Male', 38],
['Fencing - Male', 38],
['Tennis - Male', 44],
['Cycling - Male', 34],
['Cycling - Male', 34],
['Cycling - Male', 31],
['Cycling - Male', 29],
['Cycling - Male', 29],
['Sailing - Male', 58],
['Sailing - Male', 55],
['Sailing - Male', 55],
['Sailing - Male', 54],
['Sailing - Male', 51],
['Sailing - Male', 51],
['Sailing - Male', 48],
['Boxing - Male', 37],
['Boxing - Male', 33],
['Boxing - Male', 32],
['Archery - Female', 53],
['Football - Male', 34],
['Football - Male', 30],
['Football - Male', 30],
['Football - Male', 28],
['Rugby - Male', 16],
['Hockey - Male', 33],
['Tug-Of-War - Male', 45],
['Tug-Of-War - Male', 40],
['Lacrosse - Male', 35],
['Archery - Male', 18],
],
}, ];
let chartConfig = {
type: 'boxplot',
theme: 'classic',
backgroundColor: '#fbfbfb',
borderColor: '#000',
borderWidth: '2px',
title: {
text: 'Olympic Athlete Ages - Summer 1908',
backgroundColor: '#00',
},
options: {
box: {
tooltip: {
text: '<span style="font-style:italic;">%scale-key-text</span><br><b style="font-size:15px;"align:left;>Observations:</b><br><br>Maximum: <b>%data-max</b><br>Upper Quartile: <b>%data-upper-quartile</b><br>Median: <b>%data-median</b><br>Lower Quartile: <b>%data-lower-quartile</b><br>Minimum: <b>%data-min</b>',
backgroundColor: '#0079C4',
borderColor: '#36b574',
borderRadius: '5px',
borderWidth: '2px',
shadow: false,
textAlign: 'left',
},
backgroundColor: '#0079C4',
borderColor: '#36b574',
borderWidth: '1px',
},
lineMaxConnector: {
lineColor: '#36b574',
lineWidth: '2px',
},
lineMaxLevel: {
lineColor: '#36b574',
},
lineMedianLevel: {
lineColor: '#36b574',
lineWidth: '2px',
},
lineMinConnector: {
lineColor: '#36b574',
lineWidth: '2px',
},
lineMinLevel: {
lineColor: '#36b574',
},
outlier: {
tooltip: {
text: '<span style="font-style:italic;">%scale-key-text</span><br><b style="font-size:10px;color:white;">Age: %node-value</b>',
backgroundColor: '#0079C4',
borderColor: '#36b574',
borderRadius: '5px',
borderWidth: '2px',
shadow: false,
textAlign: 'left',
},
hoverMarker: {
backgroundColor: 'red',
borderColor: 'red',
shadow: false,
size: '3px',
},
marker: {
backgroundColor: 'none',
borderColor: 'black',
shadow: false,
size: '3px',
},
},
},
plot: {
maxTrackers: 999,
},
plotarea: {
marginBottom: '30%',
},
scaleX: {
values: [
'Archery - Female',
'Archery - Male',
'Athletics - Male',
'Boxing - Male',
'Cycling - Male',
'Diving - Male',
'Fencing - Male',
'Figure Skating - Female',
'Figure Skating - Male',
'Football - Male',
'Gymnastics - Male',
'Hockey - Male',
'Jeu De Paume - Male',
'Lacrosse - Male',
'Motorboating - Male',
'Polo - Male',
'Racquets - Male',
'Rowing - Male',
'Rugby - Male',
'Sailing - Male',
'Shooting - Male',
'Swimming - Male',
'Tennis - Female',
'Tennis - Male',
'Tug-Of-War - Male',
'Water Polo - Male',
'Wrestling - Male',
],
guide: {
items: [{
backgroundColor: '#ebebeb',
},
{
backgroundColor: '#fbfbfb',
},
],
lineWidth: '0px',
},
item: {
angle: -90,
fontSize: '10px',
},
itemsOverlap: true,
lineColor: '#0079C4',
maxItems: 999,
tick: {
lineColor: '#0079C4',
},
},
scaleY: {
values: '0:70:10',
guide: {
lineWidth: '0px',
},
label: {
text: 'Athletes Age',
fontColor: 'black',
},
lineColor: '#0079C4',
tick: {
lineColor: '#0079C4',
},
},
crosshairX: {
lineColor: 'none',
marker: {
visible: false,
},
plotLabel: {
visible: false,
},
scaleLabel: {
angle: -90,
callout: false,
fontSize: '10px',
offsetY: '49px',
width: '136px',
height: '22px',
textAlign: 'right',
zIndex: 0,
},
},
series: chartData,
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
</script>
</body>
</html>
let chartData = [
{
dataBox: [
[26, 37, 41.5, 47, 47],
[30, 40, 43, 54, 61],
[16, 21, 23, 26, 28],
[19, 21, 24, 27, 27],
[16, 22, 24, 26, 28],
[15, 20, 23.5, 29, 32],
[17, 25, 28, 33, 37],
[21, 22, 22.5, 26, 26],
[18, 25, 30, 44, 45],
[18, 21, 23, 25, 27],
[16, 20, 22, 26, 29],
[18, 22, 24, 29, 32],
[19, 29, 31, 42, 43],
[20, 24, 25, 30, 32],
[26, 28, 31, 46, 54],
[24, 32, 33, 40, 41],
[19, 21, 23, 45, 45],
[18, 21, 23, 27, 30],
[20, 23, 24, 27, 29],
[17, 31, 36, 41, 44],
[20, 29, 34, 43, 50],
[14, 18, 21, 24, 27],
[24, 28, 31, 37, 39],
[18, 22, 27.5, 35, 41],
[20, 25, 29, 34, 38],
[18, 22, 23, 28, 31],
[18, 21, 23, 25, 27],
],
dataOutlier: [
['Swimming - Male', 41],
['Swimming - Male', 37],
['Swimming - Male', 36],
['Swimming - Male', 29],
['Swimming - Male', 29],
['Shooting - Male', 60],
['Shooting - Male', 60],
['Shooting - Male', 60],
['Shooting - Male', 58],
['Shooting - Male', 57],
['Shooting - Male', 56],
['Shooting - Male', 56],
['Shooting - Male', 56],
['Shooting - Male', 55],
['Shooting - Male', 54],
['Shooting - Male', 53],
['Shooting - Male', 53],
['Shooting - Male', 51],
['Shooting - Male', 51],
['Gymnastics - Male', 49],
['Gymnastics - Male', 41],
['Gymnastics - Male', 37],
['Gymnastics - Male', 36],
['Gymnastics - Male', 34],
['Gymnastics - Male', 34],
['Gymnastics - Male', 34],
['Gymnastics - Male', 33],
['Gymnastics - Male', 32],
['Gymnastics - Male', 32],
['Gymnastics - Male', 32],
['Gymnastics - Male', 31],
['Gymnastics - Male', 31],
['Gymnastics - Male', 31],
['Gymnastics - Male', 30],
['Gymnastics - Male', 30],
['Gymnastics - Male', 30],
['Gymnastics - Male', 30],
['Rowing - Male', 44],
['Rowing - Male', 41],
['Rowing - Male', 39],
['Rowing - Male', 33],
['Rowing - Male', 32],
['Rowing - Male', 31],
['Rowing - Male', 31],
['Rowing - Male', 31],
['Diving - Male', 40],
['Diving - Male', 34],
['Wrestling - Male', 35],
['Wrestling - Male', 32],
['Wrestling - Male', 31],
['Wrestling - Male', 31],
['Wrestling - Male', 30],
['Wrestling - Male', 28],
['Wrestling - Male', 28],
['Wrestling - Male', 28],
['Wrestling - Male', 28],
['Athletics - Male', 38],
['Athletics - Male', 36],
['Athletics - Male', 35],
['Athletics - Male', 34],
['Athletics - Male', 34],
['Athletics - Male', 34],
['Athletics - Male', 33],
['Athletics - Male', 33],
['Athletics - Male', 33],
['Athletics - Male', 32],
['Athletics - Male', 32],
['Athletics - Male', 31],
['Athletics - Male', 31],
['Athletics - Male', 30],
['Athletics - Male', 30],
['Athletics - Male', 30],
['Athletics - Male', 30],
['Athletics - Male', 30],
['Athletics - Male', 30],
['Athletics - Male', 30],
['Athletics - Male', 30],
['Athletics - Male', 30],
['Athletics - Male', 29],
['Athletics - Male', 29],
['Athletics - Male', 29],
['Athletics - Male', 29],
['Athletics - Male', 29],
['Athletics - Male', 29],
['Athletics - Male', 29],
['Athletics - Male', 29],
['Athletics - Male', 29],
['Athletics - Male', 29],
['Athletics - Male', 29],
['Athletics - Male', 29],
['Fencing - Male', 46],
['Fencing - Male', 45],
['Fencing - Male', 44],
['Fencing - Male', 44],
['Fencing - Male', 43],
['Fencing - Male', 42],
['Fencing - Male', 41],
['Fencing - Male', 41],
['Fencing - Male', 40],
['Fencing - Male', 40],
['Fencing - Male', 38],
['Fencing - Male', 38],
['Tennis - Male', 44],
['Cycling - Male', 34],
['Cycling - Male', 34],
['Cycling - Male', 31],
['Cycling - Male', 29],
['Cycling - Male', 29],
['Sailing - Male', 58],
['Sailing - Male', 55],
['Sailing - Male', 55],
['Sailing - Male', 54],
['Sailing - Male', 51],
['Sailing - Male', 51],
['Sailing - Male', 48],
['Boxing - Male', 37],
['Boxing - Male', 33],
['Boxing - Male', 32],
['Archery - Female', 53],
['Football - Male', 34],
['Football - Male', 30],
['Football - Male', 30],
['Football - Male', 28],
['Rugby - Male', 16],
['Hockey - Male', 33],
['Tug-Of-War - Male', 45],
['Tug-Of-War - Male', 40],
['Lacrosse - Male', 35],
['Archery - Male', 18],
],
},
];
let chartConfig = {
type: 'boxplot',
theme: 'classic',
backgroundColor: '#fbfbfb',
borderColor: '#000',
borderWidth: '2px',
title: {
text: 'Olympic Athlete Ages - Summer 1908',
backgroundColor: '#00',
},
options: {
box: {
tooltip: {
text: '<span style="font-style:italic;">%scale-key-text</span><br><b style="font-size:15px;"align:left;>Observations:</b><br><br>Maximum: <b>%data-max</b><br>Upper Quartile: <b>%data-upper-quartile</b><br>Median: <b>%data-median</b><br>Lower Quartile: <b>%data-lower-quartile</b><br>Minimum: <b>%data-min</b>',
backgroundColor: '#0079C4',
borderColor: '#36b574',
borderRadius: '5px',
borderWidth: '2px',
shadow: false,
textAlign: 'left',
},
backgroundColor: '#0079C4',
borderColor: '#36b574',
borderWidth: '1px',
},
lineMaxConnector: {
lineColor: '#36b574',
lineWidth: '2px',
},
lineMaxLevel: {
lineColor: '#36b574',
},
lineMedianLevel: {
lineColor: '#36b574',
lineWidth: '2px',
},
lineMinConnector: {
lineColor: '#36b574',
lineWidth: '2px',
},
lineMinLevel: {
lineColor: '#36b574',
},
outlier: {
tooltip: {
text: '<span style="font-style:italic;">%scale-key-text</span><br><b style="font-size:10px;color:white;">Age: %node-value</b>',
backgroundColor: '#0079C4',
borderColor: '#36b574',
borderRadius: '5px',
borderWidth: '2px',
shadow: false,
textAlign: 'left',
},
hoverMarker: {
backgroundColor: 'red',
borderColor: 'red',
shadow: false,
size: '3px',
},
marker: {
backgroundColor: 'none',
borderColor: 'black',
shadow: false,
size: '3px',
},
},
},
plot: {
maxTrackers: 999,
},
plotarea: {
marginBottom: '30%',
},
scaleX: {
values: [
'Archery - Female',
'Archery - Male',
'Athletics - Male',
'Boxing - Male',
'Cycling - Male',
'Diving - Male',
'Fencing - Male',
'Figure Skating - Female',
'Figure Skating - Male',
'Football - Male',
'Gymnastics - Male',
'Hockey - Male',
'Jeu De Paume - Male',
'Lacrosse - Male',
'Motorboating - Male',
'Polo - Male',
'Racquets - Male',
'Rowing - Male',
'Rugby - Male',
'Sailing - Male',
'Shooting - Male',
'Swimming - Male',
'Tennis - Female',
'Tennis - Male',
'Tug-Of-War - Male',
'Water Polo - Male',
'Wrestling - Male',
],
guide: {
items: [
{
backgroundColor: '#ebebeb',
},
{
backgroundColor: '#fbfbfb',
},
],
lineWidth: '0px',
},
item: {
angle: -90,
fontSize: '10px',
},
itemsOverlap: true,
lineColor: '#0079C4',
maxItems: 999,
tick: {
lineColor: '#0079C4',
},
},
scaleY: {
values: '0:70:10',
guide: {
lineWidth: '0px',
},
label: {
text: 'Athletes Age',
fontColor: 'black',
},
lineColor: '#0079C4',
tick: {
lineColor: '#0079C4',
},
},
crosshairX: {
lineColor: 'none',
marker: {
visible: false,
},
plotLabel: {
visible: false,
},
scaleLabel: {
angle: -90,
callout: false,
fontSize: '10px',
offsetY: '49px',
width: '136px',
height: '22px',
textAlign: 'right',
zIndex: 0,
},
},
series: chartData,
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
