• Edit
  • Download
  • <!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>
        <style>
            html,
            body {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
            }
    
            .chart--container {
                min-height: 150px;
                width: 100%;
                height: 100%;
            }
    
            .zc-ref {
                display: none;
            }
    
            zing-grid[loading] {
                height: 450px;
            }
        </style>
    </head>
    
    <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="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',
                    options: {
                        violin: {
                            trim: 0,
                            jitter: 1.25,
                            roundingFactor: 1,
                            meanFactor: 2,
                            // general styling
                            style: {
                                backgroundColor: '#ff9900',
                                alpha: 1,
                                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() {
                    cdata.options.violin.trim = ($('#trim').attr("checked") === "checked") ? 1 : 0;
                    cdata.options.violin.jitter = $('#jitter').val();
                    cdata.options.violin.meanFactor = $('#meanFactor').val();
                    cdata.options.violin.roundingFactor = $('#roundingFactor').val();
    
                    console.log('hi')
                    zingchart.exec('zc', 'destroy');
                    zingchart.render({
                        id: "zc",
                        width: '100%',
                        height: 450,
                        output: "svg",
                        data: cdata,
                        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" /></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="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',
          options: {
              violin: {
                  trim: 0,
                  jitter: 1.25,
                  roundingFactor: 1,
                  meanFactor: 2,
                  // general styling
                  style: {
                    backgroundColor: '#ff9900',
                    alpha  : 1,
                    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() {
          cdata.options.violin.trim = ($('#trim').attr("checked") === "checked") ? 1 : 0;
          cdata.options.violin.jitter = $('#jitter').val();
          cdata.options.violin.meanFactor = $('#meanFactor').val();
          cdata.options.violin.roundingFactor = $('#roundingFactor').val();
          
          console.log('hi')
          zingchart.exec('zc', 'destroy');
          zingchart.render({
              id : "zc",
              width : '100%',
              height : 450,
              output : "svg",
              data : cdata,
              modules : "violin"
          });
          
      };
    
      window.renderChart();
    
      $('input').on('change', function() {
          window.renderChart();
      });
      
    
    
    });