[Docs] Violin Jitter Chart interactive

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



});