• Edit
  • Download
  • <!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();
      });
    
    
    
    });