<!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 --> <table> <tr> <td>Trim:</td> <td><input type="checkbox" id="trim" checked /></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"]; window.addEventListener('load', () => { let chartConfig = { type: 'scatter', options: { violin: { trim: 0, jitter: 1.25, roundingFactor: 1, meanFactor: 2, // general styling style: { backgroundColor: '#ff9900', lineWidth: 1 } } }, 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: '#900', alpha: 1, alphaArea: 0.2, lineWidth: 3, lineColor: '#090' }, 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] ] } ] }; window.renderChart = function() { chartConfig.options.violin.trim = ($('#trim').prop('checked')) ? 0 : 1; chartConfig.options.violin.jitter = $('#jitter').val(); chartConfig.options.violin.meanFactor = $('#meanFactor').val(); chartConfig.options.violin.roundingFactor = $('#roundingFactor').val(); zingchart.exec('myChart', 'destroy'); zingchart.render({ id: 'myChart', width: '100%', height: 450, output: 'svg', data: chartConfig, modules: 'violin' }); }; window.renderChart(); $('input').on('change', function() { window.renderChart(); }); }); </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 --> <table> <tr> <td>Trim:</td> <td><input type="checkbox" id="trim" checked /></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> </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', () => { let chartConfig = { type: 'scatter', options: { violin: { trim: 0, jitter: 1.25, roundingFactor: 1, meanFactor: 2, // general styling style: { backgroundColor: '#ff9900', lineWidth: 1 } } }, 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: '#900', alpha: 1, alphaArea: 0.2, lineWidth: 3, lineColor: '#090' }, 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] ] } ] }; window.renderChart = function() { chartConfig.options.violin.trim = ($('#trim').prop('checked')) ? 0 : 1; chartConfig.options.violin.jitter = $('#jitter').val(); chartConfig.options.violin.meanFactor = $('#meanFactor').val(); chartConfig.options.violin.roundingFactor = $('#roundingFactor').val(); zingchart.exec('myChart', 'destroy'); zingchart.render({ id: 'myChart', width: '100%', height: 450, output: 'svg', data: chartConfig, modules: 'violin' }); }; window.renderChart(); $('input').on('change', function() { window.renderChart(); }); });