| <!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 02</title>
|
| <link href="https://playground.anychart.com/docs/samples/BCT_Box_Chart_02/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.14.1/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.14.1/js/anychart-base.min_qe95e7e741b.js"></script>
|
| <script src="_deps/cdn.anychart.com/releases/8.14.1/js/anychart-exports.min_qe95e7e741b.js"></script>
|
| <script src="_deps/cdn.anychart.com/releases/8.14.1/js/anychart-ui.min_qe95e7e741b.js"></script>
|
| <script type="text/javascript">anychart.onDocumentReady(function () {
|
|
|
|
|
| var data1 = [
|
| {x: "Jan", low: 1000, q1: 1050, median: 1200, q3: 1800, high: 2000, outliers: [800, 2500, 3200]},
|
| {x: "Feb", low: 2500, q1: 3000, median: 3800, q3: 3900, high: 4000},
|
| {x: "Mar", low: 2000, q1: 2300, median: 2500, q3: 2900, high: 3000},
|
| {x: "Apr", low: 4000, q1: 5000, median: 6500, q3: 6900, high: 7200, outliers: [8930]},
|
| {x: "May", low: 8000, q1: 8400, median: 8500, q3: 8800, high: 9000, outliers: [6950, 3000]}
|
| ];
|
| var data2 = [
|
| {x: "Jan", low: 4000, q1: 4050, median: 6200, q3: 6800, high: 7000},
|
| {x: "Feb", low: 1500, q1: 2000, median: 2500, q3: 3000, high: 3500},
|
| {x: "Mar", low: 2000, q1: 2200, median: 3000, q3: 3200, high: 3000},
|
| {x: "Apr", low: 3600, q1: 4000, median: 6900, q3: 7300, high: 8000},
|
| {x: "May", low: 7800, q1: 8050, median: 8350, q3: 8400, high: 9000}
|
| ];
|
|
|
|
|
| var chart = anychart.box();
|
|
|
|
|
| series1 = chart.box(data1);
|
| series1.name("Documentary Movies");
|
|
|
|
|
| series1.normal().fill("#00cc99", 0.3);
|
| series1.hovered().fill("#00cc99", 0.1);
|
| series1.selected().fill("#00cc99", 0.5);
|
| series1.normal().stroke("#00cc99", 1, "10 5", "round");
|
| series1.hovered().stroke("#00cc99", 2, "10 5", "round");
|
| series1.selected().stroke("#00cc99", 4, "10 5", "round");
|
|
|
|
|
| series2 = chart.box(data2);
|
| series2.name("Sci-Fi Movies");
|
|
|
|
|
| series2.normal().fill("#0066cc", 0.3);
|
| series2.hovered().fill("#0066cc", 0.1);
|
| series2.selected().fill("#0066cc", 0.5);
|
| series2.normal().hatchFill("forward-diagonal", "#0066cc", 1, 15);
|
| series2.hovered().hatchFill("forward-diagonal", "#0066cc", 1, 15);
|
| series2.selected().hatchFill("forward-diagonal", "#0066cc", 1, 15);
|
| series2.normal().stroke("#0066cc");
|
| series2.hovered().stroke("#0066cc", 2);
|
| series2.selected().stroke("#0066cc", 4);
|
|
|
|
|
| var title = chart.title("Box Chart: Appearance");
|
|
|
|
|
| chart.interactivity("by-x");
|
|
|
|
|
| chart.legend(true);
|
|
|
|
|
| chart.container("container");
|
|
|
|
|
| chart.draw();
|
| });</script>
|
| </body>
|
| </html> |
