<!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>
html,
body,
#myChart {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id='myChart'></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
let chartConfig = {
type: 'boxplot',
plotarea: {
margin: '100'
},
scaleX: {
guide: {
visible: false
},
label: {
text: 'Experiment No.'
},
values: ['1', '2', '3', '4', '5'],
item: {
wrapText: true
}
},
scaleY: {
minValue: 'auto',
guide: {
lineStyle: 'solid'
},
label: {
text: 'Observations'
},
item: {
wrapText: true
}
},
tooltip: {
fontSize: 11,
align: 'left',
borderRadius: 7,
borderWidth: 1,
backgroundColor: '#fff',
alpha: 0.9,
padding: 10,
color: '#000'
},
plot: {},
options: {
box: {
barWidth: 0.5,
tooltip: {
text: '<span style=\'font-style:italic;\'>Experiment no. %scale-key-text</span><br><b style=\'font-size:15px;color:%color3\'>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>'
}
},
outlier: {
tooltip: {
text: '<span style=\'font-style:italic;\'>Experiment no. %scale-key-text</span><br><b style=\'font-size:15px;color:%color-7\'>Observation: %node-value</b>'
},
marker: {
type: 'circle',
backgroundColor: '#ff0'
}
},
lineMinLevel: {
lineColor: '#f00',
lineWidth: 2,
},
lineMaxLevel: {
lineColor: '#0f0',
lineWidth: 2,
},
lineMinConnector: {
lineWidth: 2,
lineColor: '#f00'
},
lineMaxConnector: {
lineColor: '#00f',
lineWidth: 4,
},
lineMedianLevel: {
alpha: 0.5
}
},
series: [{
dataBox: [
[760, 801, 848, 895, 965],
[733, 853, 939, 980, 1080],
[714, 762, 817, 870, 918],
[724, 802, 836, 871, 950],
[834, 856, 864, 882, 910]
],
dataOutlier: [
[0, 644],
[1, 718],
[4, 951],
[3, 969],
[2, 944]
]
}]
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%'
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id='myChart'></div>
</body>
</html>
html,
body,
#myChart {
height: 100%;
width: 100%;
}
let chartConfig = {
type: 'boxplot',
plotarea: {
margin: '100'
},
scaleX: {
guide: {
visible: false
},
label: {
text: 'Experiment No.'
},
values: ['1', '2', '3', '4', '5'],
item: {
wrapText: true
}
},
scaleY: {
minValue: 'auto',
guide: {
lineStyle: 'solid'
},
label: {
text: 'Observations'
},
item: {
wrapText: true
}
},
tooltip: {
fontSize: 11,
align: 'left',
borderRadius: 7,
borderWidth: 1,
backgroundColor: '#fff',
alpha: 0.9,
padding: 10,
color: '#000'
},
plot: {},
options: {
box: {
barWidth: 0.5,
tooltip: {
text: '<span style=\'font-style:italic;\'>Experiment no. %scale-key-text</span><br><b style=\'font-size:15px;color:%color3\'>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>'
}
},
outlier: {
tooltip: {
text: '<span style=\'font-style:italic;\'>Experiment no. %scale-key-text</span><br><b style=\'font-size:15px;color:%color-7\'>Observation: %node-value</b>'
},
marker: {
type: 'circle',
backgroundColor: '#ff0'
}
},
lineMinLevel: {
lineColor: '#f00',
lineWidth: 2,
},
lineMaxLevel: {
lineColor: '#0f0',
lineWidth: 2,
},
lineMinConnector: {
lineWidth: 2,
lineColor: '#f00'
},
lineMaxConnector: {
lineColor: '#00f',
lineWidth: 4,
},
lineMedianLevel: {
alpha: 0.5
}
},
series: [{
dataBox: [
[760, 801, 848, 895, 965],
[733, 853, 939, 980, 1080],
[714, 762, 817, 870, 918],
[724, 802, 836, 871, 950],
[834, 856, 864, 882, 910]
],
dataOutlier: [
[0, 644],
[1, 718],
[4, 951],
[3, 969],
[2, 944]
]
}]
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%'
});