• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style>
        html,
        body {
          height: 100%;
          width: 100%;
          margin: 0;
          padding: 0;
        }
    
        #myChart {
          height: 100%;
          width: 100%;
          min-height: 150px;
        }
    
        .zc-ref {
          display: none;
        }
      </style>
    </head>
    
    <body>
      <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        var myConfig = {
          "layout": "horizontal",
          "graphset": [{
              "series": [{
                "data-outlier": [],
                "data-box": [
                  [0, 0.355, 0.452, 0.576, 0.853],
                  [0, 0.3225, 0.444, 0.6, 0.897],
                  [0, 0.3475, 0.464, 0.607, 0.875],
                  [0, 0.357, 0.464, 0.571, 0.9],
                  [0, 0.357, 0.464, 0.606, 0.861],
                  [0, 0.37, 0.481, 0.618, 0.923],
                  [0, 0.355, 0.452, 0.5875, 0.921],
                  [0, 0.333, 0.458, 0.61425, 0.923]
                ]
              }],
              "title": {
                "text": "opponent win:loss",
                "font-size": "12px"
              },
              "labels": [],
              "legend": null,
              "width": null,
              "options": null,
              "plot": {
    
              },
              "scaleY": null,
              "type": "boxplot",
              "scaleX": {
                "item": {
                  "text": null,
                  "angle": 0,
                  "maxChars": 3,
                  "offsetX": 0,
                  "offsetY": 0
                },
                "items-overlap": true,
                "offset": null,
                "labels": [],
                "label": {
                  "text": ""
                },
                "max-items": 8,
                "values": ["brown", "columbia", "cornell", "dartmouth", "harvard", "pennsylvania", "princeton", "yale"],
                "tooltip": {
                  "text": null
                }
              }
            },
            {
              "series": [{
                "data-outlier": [],
                "data-box": [
                  [0, 0, 0, 0.142011834, 0.18],
                  [0.104938272, 0.110726644, 0.132653061, 0.188365651, 0.197530864],
                  [0, 0, 0.095, 0.188365651, 0.207612457],
                  [0, 0.132653061, 0.132653061, 0.231111111, 0.3046875],
                  [0, 0, 0, 0.1171875, 0.132653061],
                  [0, 0, 0.110726644, 0.124444444, 0.290657439],
                  [0.110726644, 0.110726644, 0.1171875, 0.124444444, 0.132653061],
                  [0, 0, 0.110726644, 0.124444444, 0.132653061]
                ]
              }],
              "title": {
                "text": "height diversity",
                "font-size": "12px"
              },
              "labels": [],
              "legend": null,
              "width": null,
              "options": null,
              "plot": {
    
              },
              "scaleY": null,
              "type": "boxplot",
              "scaleX": {
                "item": {
                  "text": null,
                  "angle": 0,
                  "maxChars": 3,
                  "offsetX": 0,
                  "offsetY": 0
                },
                "items-overlap": true,
                "offset": null,
                "labels": [],
                "label": {
                  "text": ""
                },
                "max-items": 8,
                "values": ["brown", "columbia", "cornell", "dartmouth", "harvard", "pennsylvania", "princeton", "yale"],
                "tooltip": {
                  "text": null
                }
              }
            }
          ]
        }
    
        zingchart.render({
          id: 'myChart',
          data: myConfig,
          height: '100%',
          width: '100%'
        });
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    
    <body>
      <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    </body>
    
    </html>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    
    #myChart {
      height: 100%;
      width: 100%;
      min-height: 150px;
    }
    
    .zc-ref {
      display: none;
    }
    var myConfig = {
      "layout": "horizontal",
      "graphset": [{
          "series": [{
            "data-outlier": [],
            "data-box": [
              [0, 0.355, 0.452, 0.576, 0.853],
              [0, 0.3225, 0.444, 0.6, 0.897],
              [0, 0.3475, 0.464, 0.607, 0.875],
              [0, 0.357, 0.464, 0.571, 0.9],
              [0, 0.357, 0.464, 0.606, 0.861],
              [0, 0.37, 0.481, 0.618, 0.923],
              [0, 0.355, 0.452, 0.5875, 0.921],
              [0, 0.333, 0.458, 0.61425, 0.923]
            ]
          }],
          "title": {
            "text": "opponent win:loss",
            "font-size": "12px"
          },
          "labels": [],
          "legend": null,
          "width": null,
          "options": null,
          "plot": {
    
          },
          "scaleY": null,
          "type": "boxplot",
          "scaleX": {
            "item": {
              "text": null,
              "angle": 0,
              "maxChars": 3,
              "offsetX": 0,
              "offsetY": 0
            },
            "items-overlap": true,
            "offset": null,
            "labels": [],
            "label": {
              "text": ""
            },
            "max-items": 8,
            "values": ["brown", "columbia", "cornell", "dartmouth", "harvard", "pennsylvania", "princeton", "yale"],
            "tooltip": {
              "text": null
            }
          }
        },
        {
          "series": [{
            "data-outlier": [],
            "data-box": [
              [0, 0, 0, 0.142011834, 0.18],
              [0.104938272, 0.110726644, 0.132653061, 0.188365651, 0.197530864],
              [0, 0, 0.095, 0.188365651, 0.207612457],
              [0, 0.132653061, 0.132653061, 0.231111111, 0.3046875],
              [0, 0, 0, 0.1171875, 0.132653061],
              [0, 0, 0.110726644, 0.124444444, 0.290657439],
              [0.110726644, 0.110726644, 0.1171875, 0.124444444, 0.132653061],
              [0, 0, 0.110726644, 0.124444444, 0.132653061]
            ]
          }],
          "title": {
            "text": "height diversity",
            "font-size": "12px"
          },
          "labels": [],
          "legend": null,
          "width": null,
          "options": null,
          "plot": {
    
          },
          "scaleY": null,
          "type": "boxplot",
          "scaleX": {
            "item": {
              "text": null,
              "angle": 0,
              "maxChars": 3,
              "offsetX": 0,
              "offsetY": 0
            },
            "items-overlap": true,
            "offset": null,
            "labels": [],
            "label": {
              "text": ""
            },
            "max-items": 8,
            "values": ["brown", "columbia", "cornell", "dartmouth", "harvard", "pennsylvania", "princeton", "yale"],
            "tooltip": {
              "text": null
            }
          }
        }
      ]
    }
    
    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: '100%',
      width: '100%'
    });