• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9.   <style>
    10.     html,
    11.     body {
    12.       height: 100%;
    13.       width: 100%;
    14.       margin: 0;
    15.       padding: 0;
    16.     }
    17.  
    18.     #myChart {
    19.       height: 100%;
    20.       width: 100%;
    21.       min-height: 150px;
    22.     }
    23.  
    24.     .zc-ref {
    25.       display: none;
    26.     }
    27.   </style>
    28. </head>
    29.  
    30. <body>
    31.   <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    32.   <script>
    33.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    34.     var myConfig = {
    35.       "layout": "vertical",
    36.       "graphset": [{
    37.           "series": [{
    38.             "data-outlier": [],
    39.             "data-box": [
    40.               [0, 0.355, 0.452, 0.576, 0.853],
    41.               [0, 0.3225, 0.444, 0.6, 0.897],
    42.               [0, 0.3475, 0.464, 0.607, 0.875],
    43.               [0, 0.357, 0.464, 0.571, 0.9],
    44.               [0, 0.357, 0.464, 0.606, 0.861],
    45.               [0, 0.37, 0.481, 0.618, 0.923],
    46.               [0, 0.355, 0.452, 0.5875, 0.921],
    47.               [0, 0.333, 0.458, 0.61425, 0.923]
    48.             ]
    49.           }],
    50.           "title": {
    51.             "text": "opponent win:loss",
    52.             "font-size": "12px"
    53.           },
    54.           "labels": [],
    55.           "legend": null,
    56.           "width": null,
    57.           "options": null,
    58.           "plot": {
    59.  
    60.           },
    61.           "scaleY": null,
    62.           "type": "boxplot",
    63.           "scaleX": {
    64.             "item": {
    65.               "text": null,
    66.               "angle": 0,
    67.               "maxChars": 3,
    68.               "offsetX": 0,
    69.               "offsetY": 0
    70.             },
    71.             "items-overlap": true,
    72.             "offset": null,
    73.             "labels": [],
    74.             "label": {
    75.               "text": ""
    76.             },
    77.             "max-items": 8,
    78.             "values": ["brown", "columbia", "cornell", "dartmouth", "harvard", "pennsylvania", "princeton", "yale"],
    79.             "tooltip": {
    80.               "text": null
    81.             }
    82.           }
    83.         },
    84.         {
    85.           "series": [{
    86.             "data-outlier": [],
    87.             "data-box": [
    88.               [0, 0, 0, 0.142011834, 0.18],
    89.               [0.104938272, 0.110726644, 0.132653061, 0.188365651, 0.197530864],
    90.               [0, 0, 0.095, 0.188365651, 0.207612457],
    91.               [0, 0.132653061, 0.132653061, 0.231111111, 0.3046875],
    92.               [0, 0, 0, 0.1171875, 0.132653061],
    93.               [0, 0, 0.110726644, 0.124444444, 0.290657439],
    94.               [0.110726644, 0.110726644, 0.1171875, 0.124444444, 0.132653061],
    95.               [0, 0, 0.110726644, 0.124444444, 0.132653061]
    96.             ]
    97.           }],
    98.           "title": {
    99.             "text": "height diversity",
    100.             "font-size": "12px"
    101.           },
    102.           "labels": [],
    103.           "legend": null,
    104.           "width": null,
    105.           "options": null,
    106.           "plot": {
    107.  
    108.           },
    109.           "scaleY": null,
    110.           "type": "boxplot",
    111.           "scaleX": {
    112.             "item": {
    113.               "text": null,
    114.               "angle": 0,
    115.               "maxChars": 3,
    116.               "offsetX": 0,
    117.               "offsetY": 0
    118.             },
    119.             "items-overlap": true,
    120.             "offset": null,
    121.             "labels": [],
    122.             "label": {
    123.               "text": ""
    124.             },
    125.             "max-items": 8,
    126.             "values": ["brown", "columbia", "cornell", "dartmouth", "harvard", "pennsylvania", "princeton", "yale"],
    127.             "tooltip": {
    128.               "text": null
    129.             }
    130.           }
    131.         }
    132.       ]
    133.     }
    134.     zingchart.render({
    135.       id: 'myChart',
    136.       data: myConfig,
    137.       height: '100%',
    138.       width: '100%'
    139.     });
    140.   </script>
    141. </body>
    142.  
    143. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12.   <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    13. </body>
    14.  
    15. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8.  
    9. #myChart {
    10.   height: 100%;
    11.   width: 100%;
    12.   min-height: 150px;
    13. }
    14.  
    15. .zc-ref {
    16.   display: none;
    17. }
    1. var myConfig = {
    2.   "layout": "vertical",
    3.   "graphset": [{
    4.       "series": [{
    5.         "data-outlier": [],
    6.         "data-box": [
    7.           [0, 0.355, 0.452, 0.576, 0.853],
    8.           [0, 0.3225, 0.444, 0.6, 0.897],
    9.           [0, 0.3475, 0.464, 0.607, 0.875],
    10.           [0, 0.357, 0.464, 0.571, 0.9],
    11.           [0, 0.357, 0.464, 0.606, 0.861],
    12.           [0, 0.37, 0.481, 0.618, 0.923],
    13.           [0, 0.355, 0.452, 0.5875, 0.921],
    14.           [0, 0.333, 0.458, 0.61425, 0.923]
    15.         ]
    16.       }],
    17.       "title": {
    18.         "text": "opponent win:loss",
    19.         "font-size": "12px"
    20.       },
    21.       "labels": [],
    22.       "legend": null,
    23.       "width": null,
    24.       "options": null,
    25.       "plot": {
    26.  
    27.       },
    28.       "scaleY": null,
    29.       "type": "boxplot",
    30.       "scaleX": {
    31.         "item": {
    32.           "text": null,
    33.           "angle": 0,
    34.           "maxChars": 3,
    35.           "offsetX": 0,
    36.           "offsetY": 0
    37.         },
    38.         "items-overlap": true,
    39.         "offset": null,
    40.         "labels": [],
    41.         "label": {
    42.           "text": ""
    43.         },
    44.         "max-items": 8,
    45.         "values": ["brown", "columbia", "cornell", "dartmouth", "harvard", "pennsylvania", "princeton", "yale"],
    46.         "tooltip": {
    47.           "text": null
    48.         }
    49.       }
    50.     },
    51.     {
    52.       "series": [{
    53.         "data-outlier": [],
    54.         "data-box": [
    55.           [0, 0, 0, 0.142011834, 0.18],
    56.           [0.104938272, 0.110726644, 0.132653061, 0.188365651, 0.197530864],
    57.           [0, 0, 0.095, 0.188365651, 0.207612457],
    58.           [0, 0.132653061, 0.132653061, 0.231111111, 0.3046875],
    59.           [0, 0, 0, 0.1171875, 0.132653061],
    60.           [0, 0, 0.110726644, 0.124444444, 0.290657439],
    61.           [0.110726644, 0.110726644, 0.1171875, 0.124444444, 0.132653061],
    62.           [0, 0, 0.110726644, 0.124444444, 0.132653061]
    63.         ]
    64.       }],
    65.       "title": {
    66.         "text": "height diversity",
    67.         "font-size": "12px"
    68.       },
    69.       "labels": [],
    70.       "legend": null,
    71.       "width": null,
    72.       "options": null,
    73.       "plot": {
    74.  
    75.       },
    76.       "scaleY": null,
    77.       "type": "boxplot",
    78.       "scaleX": {
    79.         "item": {
    80.           "text": null,
    81.           "angle": 0,
    82.           "maxChars": 3,
    83.           "offsetX": 0,
    84.           "offsetY": 0
    85.         },
    86.         "items-overlap": true,
    87.         "offset": null,
    88.         "labels": [],
    89.         "label": {
    90.           "text": ""
    91.         },
    92.         "max-items": 8,
    93.         "values": ["brown", "columbia", "cornell", "dartmouth", "harvard", "pennsylvania", "princeton", "yale"],
    94.         "tooltip": {
    95.           "text": null
    96.         }
    97.       }
    98.     }
    99.   ]
    100. }
    101. zingchart.render({
    102.   id: 'myChart',
    103.   data: myConfig,
    104.   height: '100%',
    105.   width: '100%'
    106. });