• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script nonce="undefined" src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    8.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9.   <script nonce="undefined" src="https://cdn.zingchart.com/modules/zingchart-violin.min.js"></script>
    10.   <style>
    11.     html,
    12.     body {
    13.       margin: 0;
    14.       padding: 0;
    15.       width: 100%;
    16.       height: 100%;
    17.     }
    18.  
    19.     .chart--container {
    20.       min-height: 150px;
    21.       width: 100%;
    22.       height: 100%;
    23.     }
    24.  
    25.     .zc-ref {
    26.       display: none;
    27.     }
    28.   </style>
    29. </head>
    30.  
    31. <body>
    32.   <!-- CHART CONTAINER -->
    33.  
    34.   <div id="zc" class="chart--container">
    35.     <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    36.   </div>
    37.   <script>
    38.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    39.     window.addEventListener('load', () => {
    40.  
    41.       var cdata = {
    42.         type: 'scatter',
    43.         title: {
    44.           text: 'Violin/Jitter Charts'
    45.         },
    46.         options: {
    47.           violin: {
    48.             jitter: .5,
    49.             // general styling
    50.             style: {
    51.               backgroundColor: '#e57373',
    52.               alpha: 1,
    53.               lineWidth: 3,
    54.               lineColor: '#e53935'
    55.             }
    56.           }
    57.         },
    58.         scaleX: {
    59.           values: '-1:3:1',
    60.           labels: [' ', '0.5', '1', '2', ' '],
    61.           offset: 0
    62.         },
    63.         scaleY: {
    64.           offset: 20,
    65.           minValue: 0,
    66.           maxValue: 40
    67.         },
    68.         plotarea: {
    69.           margin: 'dynamic'
    70.         },
    71.         tooltip: {
    72.           text: '%data-key / %data-value'
    73.         },
    74.         legend: {},
    75.         plot: {
    76.           aspect: 'violin',
    77.           marker: {
    78.             borderWidth: 1,
    79.             borderColor: '#333',
    80.             shadow: false,
    81.             size: 3
    82.           }
    83.         },
    84.         series: [{
    85.             text: 'Sample A',
    86.             // specific styling
    87.             violin: {
    88.               backgroundColor: '#81c784',
    89.               alpha: 1,
    90.               alphaArea: 0.2,
    91.               lineWidth: 3,
    92.               lineColor: '#388e3c'
    93.             },
    94.             values: [
    95.               [0, 4.2],
    96.               [0, 11.5],
    97.               [0, 7.3],
    98.               [0, 5.8],
    99.               [0, 6.4],
    100.               [0, 10],
    101.               [0, 11.2],
    102.               [0, 11.2],
    103.               [0, 5.2],
    104.               [0, 7],
    105.               [0, 15.2],
    106.               [0, 21.5],
    107.               [0, 17.6],
    108.               [0, 9.7],
    109.               [0, 14.5],
    110.               [0, 10],
    111.               [0, 8.2],
    112.               [0, 9.4],
    113.               [0, 16.5],
    114.               [0, 9.7]
    115.             ]
    116.           },
    117.           {
    118.             text: 'Sample B',
    119.             values: [
    120.               [1, 16.5],
    121.               [1, 16.5],
    122.               [1, 15.2],
    123.               [1, 17.3],
    124.               [1, 22.5],
    125.               [1, 17.3],
    126.               [1, 13.6],
    127.               [1, 14.5],
    128.               [1, 18.8],
    129.               [1, 15.5],
    130.               [1, 19.7],
    131.               [1, 23.3],
    132.               [1, 23.6],
    133.               [1, 26.4],
    134.               [1, 20],
    135.               [1, 25.2],
    136.               [1, 25.8],
    137.               [1, 21.2],
    138.               [1, 14.5],
    139.               [1, 27.3]
    140.             ]
    141.           },
    142.           {
    143.             text: 'Sample C',
    144.             values: [
    145.               [2, 23.6],
    146.               [2, 18.5],
    147.               [2, 33.9],
    148.               [2, 25.5],
    149.               [2, 26.4],
    150.               [2, 32.5],
    151.               [2, 26.7],
    152.               [2, 21.5],
    153.               [2, 23.3],
    154.               [2, 29.5],
    155.               [2, 25.5],
    156.               [2, 26.4],
    157.               [2, 22.4],
    158.               [2, 24.5],
    159.               [2, 24.8],
    160.               [2, 30.9],
    161.               [2, 26.4],
    162.               [2, 27.3],
    163.               [2, 29.4],
    164.               [2, 23]
    165.             ]
    166.           }
    167.         ]
    168.       };
    169.  
    170.       zingchart.render({
    171.         id: "zc",
    172.         width: '100%',
    173.         height: 450,
    174.         output: "svg",
    175.         data: cdata,
    176.         modules: "violin"
    177.       });
    178.  
    179.     });
    180.   </script>
    181. </body>
    182.  
    183. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    8.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9.   <script src="https://cdn.zingchart.com/modules/zingchart-violin.min.js"></script>
    10. </head>
    11.  
    12. <body>
    13.   <!-- CHART CONTAINER -->
    14.  
    15.   <div id="zc" class="chart--container">
    16.     <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    17.   </div>
    18. </body>
    19.  
    20. </html>
    1. html,
    2. body {
    3.   margin: 0;
    4.   padding: 0;
    5.   width: 100%;
    6.   height: 100%;
    7. }
    8.  
    9. .chart--container {
    10.   min-height: 150px;
    11.   width: 100%;
    12.   height: 100%;
    13. }
    14.  
    15. .zc-ref {
    16.   display: none;
    17. }
    1. window.addEventListener('load', () => {
    2.  
    3.   var cdata = {
    4.     type: 'scatter',
    5.     title: {
    6.       text: 'Violin/Jitter Charts'
    7.     },
    8.     options: {
    9.       violin: {
    10.         jitter: .5,
    11.         // general styling
    12.         style: {
    13.           backgroundColor: '#e57373',
    14.           alpha: 1,
    15.           lineWidth: 3,
    16.           lineColor: '#e53935'
    17.         }
    18.       }
    19.     },
    20.     scaleX: {
    21.       values: '-1:3:1',
    22.       labels: [' ', '0.5', '1', '2', ' '],
    23.       offset: 0
    24.     },
    25.     scaleY: {
    26.       offset: 20,
    27.       minValue: 0,
    28.       maxValue: 40
    29.     },
    30.     plotarea: {
    31.       margin: 'dynamic'
    32.     },
    33.     tooltip: {
    34.       text: '%data-key / %data-value'
    35.     },
    36.     legend: {},
    37.     plot: {
    38.       aspect: 'violin',
    39.       marker: {
    40.         borderWidth: 1,
    41.         borderColor: '#333',
    42.         shadow: false,
    43.         size: 3
    44.       }
    45.     },
    46.     series: [{
    47.         text: 'Sample A',
    48.         // specific styling
    49.         violin: {
    50.           backgroundColor: '#81c784',
    51.           alpha: 1,
    52.           alphaArea: 0.2,
    53.           lineWidth: 3,
    54.           lineColor: '#388e3c'
    55.         },
    56.         values: [
    57.           [0, 4.2],
    58.           [0, 11.5],
    59.           [0, 7.3],
    60.           [0, 5.8],
    61.           [0, 6.4],
    62.           [0, 10],
    63.           [0, 11.2],
    64.           [0, 11.2],
    65.           [0, 5.2],
    66.           [0, 7],
    67.           [0, 15.2],
    68.           [0, 21.5],
    69.           [0, 17.6],
    70.           [0, 9.7],
    71.           [0, 14.5],
    72.           [0, 10],
    73.           [0, 8.2],
    74.           [0, 9.4],
    75.           [0, 16.5],
    76.           [0, 9.7]
    77.         ]
    78.       },
    79.       {
    80.         text: 'Sample B',
    81.         values: [
    82.           [1, 16.5],
    83.           [1, 16.5],
    84.           [1, 15.2],
    85.           [1, 17.3],
    86.           [1, 22.5],
    87.           [1, 17.3],
    88.           [1, 13.6],
    89.           [1, 14.5],
    90.           [1, 18.8],
    91.           [1, 15.5],
    92.           [1, 19.7],
    93.           [1, 23.3],
    94.           [1, 23.6],
    95.           [1, 26.4],
    96.           [1, 20],
    97.           [1, 25.2],
    98.           [1, 25.8],
    99.           [1, 21.2],
    100.           [1, 14.5],
    101.           [1, 27.3]
    102.         ]
    103.       },
    104.       {
    105.         text: 'Sample C',
    106.         values: [
    107.           [2, 23.6],
    108.           [2, 18.5],
    109.           [2, 33.9],
    110.           [2, 25.5],
    111.           [2, 26.4],
    112.           [2, 32.5],
    113.           [2, 26.7],
    114.           [2, 21.5],
    115.           [2, 23.3],
    116.           [2, 29.5],
    117.           [2, 25.5],
    118.           [2, 26.4],
    119.           [2, 22.4],
    120.           [2, 24.5],
    121.           [2, 24.8],
    122.           [2, 30.9],
    123.           [2, 26.4],
    124.           [2, 27.3],
    125.           [2, 29.4],
    126.           [2, 23]
    127.         ]
    128.       }
    129.     ]
    130.   };
    131.  
    132.   zingchart.render({
    133.     id: "zc",
    134.     width: '100%',
    135.     height: 450,
    136.     output: "svg",
    137.     data: cdata,
    138.     modules: "violin"
    139.   });
    140.  
    141. });