<!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 = [{
text: 'Female',
values: [
[161.2, 51.6],
[167.5, 59],
[159.5, 49.2],
[157, 63],
[155.8, 53.6],
[170, 59],
[159.1, 47.6],
[166, 69.8],
[176.2, 66.8],
[160.2, 75.2],
[172.5, 55.2],
[170.9, 54.2],
[172.9, 62.5],
[153.4, 42],
[160, 50],
[147.2, 49.8],
[168.2, 49.2],
[175, 73.2],
[157, 47.8],
[167.6, 68.8],
[159.5, 50.6],
[175, 82.5],
[166.8, 57.2],
[176.5, 87.8],
[170.2, 72.8],
[174, 54.5],
[173, 59.8],
[179.9, 67.3],
[170.5, 67.8],
[160, 47],
[154.4, 46.2],
[162, 55],
[176.5, 83],
[160, 54.4],
[152, 45.8],
[162.1, 53.6],
[170, 73.2],
[160.2, 52.1],
[161.3, 67.9],
[166.4, 56.6],
[168.9, 62.3],
[163.8, 58.5],
[167.6, 54.5],
[160, 50.2],
[161.3, 60.3],
[167.6, 58.3],
[165.1, 56.2],
[160, 50.2],
[170, 72.9],
[157.5, 59.8],
[167.6, 61],
[160.7, 69.1],
[163.2, 55.9],
[152.4, 46.5],
[157.5, 54.3],
[168.3, 54.8],
[180.3, 60.7],
[165.5, 60],
[165, 62],
[164.5, 60.3]
],
tooltip: {
text: '%k / %v',
padding: '10px',
alpha: 0.8,
backgroundColor: '#FFF',
borderColor: '#e24b77',
borderRadius: '8px',
borderWidth: '2px',
color: '#e24b77',
textAlign: 'left'
},
marker: {
type: 'circle',
backgroundColor: '#e24b77',
borderColor: '#fff',
borderWidth: '1px',
shadow: false
}
},
{
text: 'Male',
values: [
[174, 65.6],
[175.3, 71.8],
[193.5, 80.7],
[186.5, 72.6],
[187.2, 78.8],
[181.5, 74.8],
[184, 86.4],
[184.5, 78.4],
[175, 62],
[184, 81.6],
[180, 76.6],
[177.8, 83.6],
[192, 90],
[176, 74.6],
[174, 71],
[184, 79.6],
[192.7, 93.8],
[171.5, 70],
[173, 72.4],
[176, 85.9],
[176, 78.8],
[180.5, 77.8],
[172.7, 66.2],
[176, 86.4],
[173.5, 81.8],
[178, 89.6],
[180.3, 82.8],
[180.3, 76.4],
[164.5, 63.2],
[173, 60.9],
[183.5, 74.8],
[175.5, 70],
[188, 72.4],
[189.2, 84.1],
[172.8, 69.1],
[170, 59.5],
[182, 67.2],
[170, 61.3],
[177.8, 68.6],
[184.2, 80.1],
[186.7, 87.8],
[171.4, 84.7],
[172.7, 73.4],
[175.3, 72.1],
[180.3, 82.6],
[182.9, 88.7],
[188, 84.1],
[177.2, 94.1],
[172.1, 74.9],
[167, 59.1],
[169.5, 75.6],
[174, 86.2],
[172.7, 75.3],
[182.2, 87.1],
[164.1, 55.2]
],
tooltip: {
text: '%k / %v',
padding: '10px',
alpha: 0.8,
backgroundColor: '#FFF',
borderColor: '#4c77ba',
borderRadius: '8px',
borderWidth: '2px',
color: '#4c77ba',
textAlign: 'left'
},
marker: {
type: 'circle',
backgroundColor: '#4c77ba',
borderColor: '#fff',
borderWidth: '1px',
shadow: false
}
}
];
let chartConfig = {
type: 'scatter',
theme: 'classic',
backgroundColor: '#fff #fbfbfb',
title: {
text: 'Height Versus Weight of 507 Individuals By Gender<br>Source: Heinz et al. 2003',
backgroundColor: '#00a679 #33b894'
},
legend: {
adjustLayout: true,
alpha: 0.8,
borderColor: '#00a679',
borderRadius: '5px',
borderWidth: '3px',
cursor: 'hand',
marginTop: '55px',
item: {
bold: true,
cursor: 'hand'
},
marker: {
type: 'circle',
borderColor: '#fff',
borderWidth: '1px',
cursor: 'hand',
size: '5px'
},
shadow: false
},
plot: {
selectedMarker: {
type: 'star5',
backgroundColor: '#00a679',
borderColor: '#00a679',
borderWidth: '1px',
size: '6px'
},
selectionMode: 'multiple'
},
plotarea: {
margin: '60px 40px dynamic dynamic'
},
scaleX: {
itemsOverlap: true,
label: {
text: 'Height (cm)'
},
maxItems: 16,
offsetStart: '20px',
offsetEnd: '20px'
},
scaleY: {
label: {
text: 'Weight (Kg)'
},
minValue: 'auto',
offsetStart: '20px',
offsetEnd: '20px'
},
labels: [{
text: 'Selected',
bold: true,
fontSize: '11px',
x: '91%',
y: '23%'
}],
shapes: [{
type: 'star5',
backgroundColor: '#00a679',
size: '6px',
x: '89%',
y: '24.6%'
}],
series: chartData
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
</script>
</body>
</html>
let chartData = [
{
text: 'Female',
values: [[161.2, 51.6], [167.5, 59], [159.5, 49.2], [157, 63], [155.8, 53.6], [170, 59], [159.1, 47.6], [166, 69.8], [176.2, 66.8], [160.2, 75.2], [172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42], [160, 50], [147.2, 49.8], [168.2, 49.2], [175, 73.2], [157, 47.8], [167.6, 68.8], [159.5, 50.6], [175, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8], [174, 54.5], [173, 59.8], [179.9, 67.3], [170.5, 67.8], [160, 47], [154.4, 46.2], [162, 55], [176.5, 83], [160, 54.4], [152, 45.8], [162.1, 53.6], [170, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6], [168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160, 50.2], [161.3, 60.3], [167.6, 58.3], [165.1, 56.2], [160, 50.2], [170, 72.9], [157.5, 59.8], [167.6, 61], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3], [168.3, 54.8], [180.3, 60.7], [165.5, 60], [165, 62], [164.5, 60.3]],
tooltip: {
text: '%k / %v',
padding: '10px',
alpha: 0.8,
backgroundColor: '#FFF',
borderColor: '#e24b77',
borderRadius: '8px',
borderWidth: '2px',
color: '#e24b77',
textAlign: 'left'
},
marker: {
type: 'circle',
backgroundColor: '#e24b77',
borderColor: '#fff',
borderWidth: '1px',
shadow: false
}
},
{
text: 'Male',
values: [[174, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8], [181.5, 74.8], [184, 86.4], [184.5, 78.4], [175, 62], [184, 81.6], [180, 76.6], [177.8, 83.6], [192, 90], [176, 74.6], [174, 71], [184, 79.6], [192.7, 93.8], [171.5, 70], [173, 72.4], [176, 85.9], [176, 78.8], [180.5, 77.8], [172.7, 66.2], [176, 86.4], [173.5, 81.8], [178, 89.6], [180.3, 82.8], [180.3, 76.4], [164.5, 63.2], [173, 60.9], [183.5, 74.8], [175.5, 70], [188, 72.4], [189.2, 84.1], [172.8, 69.1], [170, 59.5], [182, 67.2], [170, 61.3], [177.8, 68.6], [184.2, 80.1], [186.7, 87.8], [171.4, 84.7], [172.7, 73.4], [175.3, 72.1], [180.3, 82.6], [182.9, 88.7], [188, 84.1], [177.2, 94.1], [172.1, 74.9], [167, 59.1], [169.5, 75.6], [174, 86.2], [172.7, 75.3], [182.2, 87.1], [164.1, 55.2]],
tooltip: {
text: '%k / %v',
padding: '10px',
alpha: 0.8,
backgroundColor: '#FFF',
borderColor: '#4c77ba',
borderRadius: '8px',
borderWidth: '2px',
color: '#4c77ba',
textAlign: 'left'
},
marker: {
type: 'circle',
backgroundColor: '#4c77ba',
borderColor: '#fff',
borderWidth: '1px',
shadow: false
}
}
];
let chartConfig = {
type: 'scatter',
theme: 'classic',
backgroundColor: '#fff #fbfbfb',
title: {
text: 'Height Versus Weight of 507 Individuals By Gender<br>Source: Heinz et al. 2003',
backgroundColor: '#00a679 #33b894'
},
legend: {
adjustLayout: true,
alpha: 0.8,
borderColor: '#00a679',
borderRadius: '5px',
borderWidth: '3px',
cursor: 'hand',
marginTop: '55px',
item: {
bold: true,
cursor: 'hand'
},
marker: {
type: 'circle',
borderColor: '#fff',
borderWidth: '1px',
cursor: 'hand',
size: '5px'
},
shadow: false
},
plot: {
selectedMarker: {
type: 'star5',
backgroundColor: '#00a679',
borderColor: '#00a679',
borderWidth: '1px',
size: '6px'
},
selectionMode: 'multiple'
},
plotarea: {
margin: '60px 40px dynamic dynamic'
},
scaleX: {
itemsOverlap: true,
label: {
text: 'Height (cm)'
},
maxItems: 16,
offsetStart: '20px',
offsetEnd: '20px'
},
scaleY: {
label: {
text: 'Weight (Kg)'
},
minValue: 'auto',
offsetStart: '20px',
offsetEnd: '20px'
},
labels: [
{
text: 'Selected',
bold: true,
fontSize: '11px',
x: '91%',
y: '23%'
}
],
shapes: [
{
type: 'star5',
backgroundColor: '#00a679',
size: '6px',
x: '89%',
y: '24.6%'
}
],
series: chartData
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
