<!DOCTYPE html>
<html class="zc-html">
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<script nonce="undefined" src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<style>
.zc-html,
.zc-body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: #fff;
}
.chart--container {
height: 100%;
width: 100%;
min-height: 530px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body class="zc-body">
<!-- CHART CONTAINER -->
<table>
<tr>
<td>Trim:</td>
<td><input type="checkbox" id="trim" /></td>
</tr>
<tr>
<td>Jitter:</td>
<td><input type="range" min="0.5" max="2.5" step="0.05" value="1.25" id="jitter" /></td>
</tr>
<tr>
<td>Rounding Factor:</td>
<td><input type="range" min="0" max="2" step="0.1" value="1" id="roundingFactor" /></td>
</tr>
<tr>
<td>Mean Factor:</td>
<td><input type="range" min="1" max="3" step="1" value="2" id="meanFactor" /></td>
</tr>
</table>
<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"];
zingchart.MODULESDIR = 'https://cdn.zingchart.com/modules/'
let chartConfig = {
type: 'scatter',
options: {
violin: {
jitter: 1.25,
meanFactor: 2,
roundingFactor: 1,
trim: 0,
// general styling
style: {
alpha: 1,
backgroundColor: '#ff9900',
lineWidth: '1px'
}
}
},
scaleX: {
values: '-1:3:1',
labels: [' ', '0.5', '1', '2', ' '],
offset: 0
},
scaleY: {
minValue: 0,
maxValue: 40,
offset: '20px'
},
plot: {
aspect: 'violin',
marker: {
borderColor: '#333',
borderWidth: '1px',
shadow: false,
size: '3px'
}
},
plotarea: {
margin: 'dynamic'
},
legend: {},
tooltip: {
text: '%data-key / %data-value'
},
series: [{
text: 'Sample A',
// specific styling
violin: {
alpha: 1,
alphaArea: 0.2,
backgroundColor: '#900',
lineColor: '#090',
lineWidth: '3px'
},
values: [
[0, 4.2],
[0, 11.5],
[0, 7.3],
[0, 5.8],
[0, 6.4],
[0, 10],
[0, 11.2],
[0, 11.2],
[0, 5.2],
[0, 7],
[0, 15.2],
[0, 21.5],
[0, 17.6],
[0, 9.7],
[0, 14.5],
[0, 10],
[0, 8.2],
[0, 9.4],
[0, 16.5],
[0, 9.7]
]
},
{
text: 'Sample B',
values: [
[1, 16.5],
[1, 16.5],
[1, 15.2],
[1, 17.3],
[1, 22.5],
[1, 17.3],
[1, 13.6],
[1, 14.5],
[1, 18.8],
[1, 15.5],
[1, 19.7],
[1, 23.3],
[1, 23.6],
[1, 26.4],
[1, 20],
[1, 25.2],
[1, 25.8],
[1, 21.2],
[1, 14.5],
[1, 27.3]
]
},
{
text: 'Sample C',
values: [
[2, 23.6],
[2, 18.5],
[2, 33.9],
[2, 25.5],
[2, 26.4],
[2, 32.5],
[2, 26.7],
[2, 21.5],
[2, 23.3],
[2, 29.5],
[2, 25.5],
[2, 26.4],
[2, 22.4],
[2, 24.5],
[2, 24.8],
[2, 30.9],
[2, 26.4],
[2, 27.3],
[2, 29.4],
[2, 23]
]
}
]
};
function renderChart() {
chartConfig.options.violin.trim = document.getElementById('trim').checked ? 1 : 0;
chartConfig.options.violin.jitter = document.getElementById('jitter').value;
chartConfig.options.violin.meanFactor = document.getElementById('meanFactor').value;
chartConfig.options.violin.roundingFactor = document.getElementById('roundingFactor').value;
zingchart.exec('myChart', 'destroy');
zingchart.render({
id: 'myChart',
width: '100%',
height: '450px',
output: 'svg',
data: chartConfig,
modules: 'violin'
});
};
zingchart.loadModules('violin', function() {
renderChart();
});
document.querySelectorAll('input').forEach(input => input.addEventListener('change', () => window.renderChart()));
</script>
</body>
</html>
zingchart.MODULESDIR = 'https://cdn.zingchart.com/modules/'
let chartConfig = {
type: 'scatter',
options: {
violin: {
jitter: 1.25,
meanFactor: 2,
roundingFactor: 1,
trim: 0,
// general styling
style: {
alpha: 1,
backgroundColor: '#ff9900',
lineWidth: '1px'
}
}
},
scaleX: {
values: '-1:3:1',
labels: [' ', '0.5', '1', '2', ' '],
offset: 0
},
scaleY: {
minValue: 0,
maxValue: 40,
offset: '20px'
},
plot: {
aspect: 'violin',
marker: {
borderColor: '#333',
borderWidth: '1px',
shadow: false,
size: '3px'
}
},
plotarea: {
margin: 'dynamic'
},
legend: {},
tooltip: {
text: '%data-key / %data-value'
},
series: [
{
text: 'Sample A',
// specific styling
violin: {
alpha: 1,
alphaArea: 0.2,
backgroundColor: '#900',
lineColor: '#090',
lineWidth: '3px'
},
values: [
[0, 4.2],
[0, 11.5],
[0, 7.3],
[0, 5.8],
[0, 6.4],
[0, 10],
[0, 11.2],
[0, 11.2],
[0, 5.2],
[0, 7],
[0, 15.2],
[0, 21.5],
[0, 17.6],
[0, 9.7],
[0, 14.5],
[0, 10],
[0, 8.2],
[0, 9.4],
[0, 16.5],
[0, 9.7]
]
},
{
text: 'Sample B',
values: [
[1, 16.5],
[1, 16.5],
[1, 15.2],
[1, 17.3],
[1, 22.5],
[1, 17.3],
[1, 13.6],
[1, 14.5],
[1, 18.8],
[1, 15.5],
[1, 19.7],
[1, 23.3],
[1, 23.6],
[1, 26.4],
[1, 20],
[1, 25.2],
[1, 25.8],
[1, 21.2],
[1, 14.5],
[1, 27.3]
]
},
{
text: 'Sample C',
values: [
[2, 23.6],
[2, 18.5],
[2, 33.9],
[2, 25.5],
[2, 26.4],
[2, 32.5],
[2, 26.7],
[2, 21.5],
[2, 23.3],
[2, 29.5],
[2, 25.5],
[2, 26.4],
[2, 22.4],
[2, 24.5],
[2, 24.8],
[2, 30.9],
[2, 26.4],
[2, 27.3],
[2, 29.4],
[2, 23]
]
}
]
};
function renderChart() {
chartConfig.options.violin.trim = document.getElementById('trim').checked ? 1 : 0;
chartConfig.options.violin.jitter = document.getElementById('jitter').value;
chartConfig.options.violin.meanFactor = document.getElementById('meanFactor').value;
chartConfig.options.violin.roundingFactor = document.getElementById('roundingFactor').value;
zingchart.exec('myChart', 'destroy');
zingchart.render({
id: 'myChart',
width: '100%',
height: '450px',
output: 'svg',
data: chartConfig,
modules: 'violin'
});
};
zingchart.loadModules('violin', function () {
renderChart();
});
document.querySelectorAll('input').forEach(input => input.addEventListener('change', () => window.renderChart()));
