• 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;
        }
      </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"
      });
    
    });