| <!doctype html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta content="IE=edge" http-equiv="X-UA-Compatible">
|
| <meta content="width=device-width, initial-scale=1" name="viewport">
|
| <title>BCT Box Chart 06</title>
|
| <link href="https://playground.anychart.com/93tpxaOC/iframe" rel="canonical">
|
| <meta content="Box Chart,Box and Whisker Plot,Statistical Data" name="keywords">
|
| <meta content="AnyChart - JavaScript Charts designed to be embedded and integrated" name="description">
|
| |
| |
| |
|
|
| <link href="_deps/cdn.anychart.com/releases/8.11.0/css/anychart-ui.min_qe95e7e741b.css" rel="stylesheet" type="text/css">
|
| <style>html, body, #container {
|
| width: 100%;
|
| height: 100%;
|
| margin: 0;
|
| padding: 0;
|
| }</style>
|
| </head>
|
| <body>
|
| <div id="container"></div>
|
| <script src="_deps/cdn.anychart.com/releases/8.11.0/js/anychart-base.min_qe95e7e741b.js"></script>
|
| <script src="_deps/cdn.anychart.com/releases/8.11.0/js/anychart-exports.min_qe95e7e741b.js"></script>
|
| <script src="_deps/cdn.anychart.com/releases/8.11.0/js/anychart-ui.min_qe95e7e741b.js"></script>
|
| <script type="text/javascript">anychart.onDocumentReady(function () {
|
|
|
|
|
| var data = [
|
| {x: "MBL1-HaeIII-T?", low: 276, q1: 284, median: 314, q3: 384, high: 531},
|
| {x: "MBL1-HaeIII-?C", low: 249, q1: 288, median: 312, q3: 344, high: 375,
|
| normal: {
|
| fill: "#DC143C 0.7",
|
| stroke: "#DC143C",
|
| medianStroke: "0.7 #DC143C",
|
| stemStroke: "0.7 #DC143C"
|
| }
|
| },
|
| {x: "MBL1-HaeIII-C?", low: 326, q1: 377, median: 384, q3: 414, high: 522,
|
| normal: {
|
| fill: "#00bfa5 0.7",
|
| stroke: "#00bfa5",
|
| medianStroke: "0.7 #00bfa5",
|
| stemStroke: "0.7 #00bfa5"
|
| }
|
| },
|
| {x: "????? ???????", low: 311, q1: 347, median: 368, q3: 387, high: 432,
|
| normal: {
|
| fill: "#808080 0.7",
|
| stroke: "#808080",
|
| medianStroke: "0.7 #808080",
|
| stemStroke: "0.7 #808080"
|
| }
|
| },
|
| ];
|
|
|
|
|
| var chart = anychart.box();
|
|
|
|
|
| series = chart.box(data);
|
|
|
|
|
| series.whiskerWidth(30);
|
| series.normal().whiskerStroke("#dd2c00", 0.7);
|
| series.hovered().whiskerStroke("#dd2c00", 1);
|
| series.selected().whiskerStroke("#dd2c00", 2);
|
|
|
|
|
| var title = chart.title("Box Chart: Whiskers");
|
|
|
|
|
| chart.interactivity("by-x");
|
|
|
|
|
| chart.container("container");
|
|
|
|
|
| chart.draw();
|
|
|
|
|
| var axisLabels = chart.xAxis().labels();
|
| axisLabels.useHtml(true);
|
| axisLabels.format("<b style='color:black;'>{%value}</b>");
|
|
|
|
|
| chart.container("container");
|
| chart.draw();
|
| });</script>
|
| </body>
|
| </html> |
