<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<script nonce="undefined" src="https://cdn.zingchart.com/modules/zingchart-violin.min.js"></script>
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.chart--container {
min-height: 150px;
width: 100%;
height: 100%;
}
.zc-ref {
display: none;
}
</style>
</head>
<body>
<!-- CHART CONTAINER -->
<div id="zc" class="chart--container">
<a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
window.addEventListener('load', () => {
var cdata = {
type: 'scatter',
title: {
text: 'Violin/Jitter Charts'
},
options: {
violin: {
jitter: .5,
// general styling
style: {
backgroundColor: '#e57373',
alpha: 1,
lineWidth: 3,
lineColor: '#e53935'
}
}
},
scaleX: {
values: '-1:3:1',
labels: [' ', '0.5', '1', '2', ' '],
offset: 0
},
scaleY: {
offset: 20,
minValue: 0,
maxValue: 40
},
plotarea: {
margin: 'dynamic'
},
tooltip: {
text: '%data-key / %data-value'
},
legend: {},
plot: {
aspect: 'violin',
marker: {
borderWidth: 1,
borderColor: '#333',
shadow: false,
size: 3
}
},
series: [{
text: 'Sample A',
// specific styling
violin: {
backgroundColor: '#81c784',
alpha: 1,
alphaArea: 0.2,
lineWidth: 3,
lineColor: '#388e3c'
},
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]
]
}
]
};
zingchart.render({
id: "zc",
width: '100%',
height: 450,
output: "svg",
data: cdata,
modules: "violin"
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<script src="https://cdn.zingchart.com/modules/zingchart-violin.min.js"></script>
</head>
<body>
<!-- CHART CONTAINER -->
<div id="zc" class="chart--container">
<a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
</div>
</body>
</html>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.chart--container {
min-height: 150px;
width: 100%;
height: 100%;
}
.zc-ref {
display: none;
}
window.addEventListener('load', () => {
var cdata = {
type: 'scatter',
title: {
text: 'Violin/Jitter Charts'
},
options: {
violin: {
jitter: .5,
// general styling
style: {
backgroundColor: '#e57373',
alpha: 1,
lineWidth: 3,
lineColor: '#e53935'
}
}
},
scaleX: {
values: '-1:3:1',
labels: [' ', '0.5', '1', '2', ' '],
offset: 0
},
scaleY: {
offset: 20,
minValue: 0,
maxValue: 40
},
plotarea: {
margin: 'dynamic'
},
tooltip: {
text: '%data-key / %data-value'
},
legend: {},
plot: {
aspect: 'violin',
marker: {
borderWidth: 1,
borderColor: '#333',
shadow: false,
size: 3
}
},
series: [{
text: 'Sample A',
// specific styling
violin: {
backgroundColor: '#81c784',
alpha: 1,
alphaArea: 0.2,
lineWidth: 3,
lineColor: '#388e3c'
},
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]
]
}
]
};
zingchart.render({
id: "zc",
width: '100%',
height: 450,
output: "svg",
data: cdata,
modules: "violin"
});
});