| <!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>CS Interactivity 10</title>
|
| <link href="https://playground.anychart.com/docs/samples/CS_Interactivity_10/iframe" rel="canonical">
|
| <meta content="Box Chart,Box and Whisker Plot,Stagger Axis feature,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 data = [
|
| {x: "East Europe", low: 1, q1: 5, median: 8, q3: 12, high: 16},
|
| {x: "West Europe", low: 1, q1: 7, median: 10, q3: 17, high: 22},
|
| {x: "Australia", low: 1, q1: 8, median: 12, q3: 19, high: 26},
|
| {x: "South America", low: 2, q1: 8, median: 12, q3: 21, high: 28},
|
| {x: "North America", low: 3, q1: 10, median: 17, q3: 28, high: 30},
|
| {x: "Oceania", low: 1, q1: 9, median: 16, q3: 22, high: 24},
|
| {x: "North Africa", low: 1, q1: 8, median: 14, q3: 18, high: 24},
|
| {x: "West Africa", low: 1, q1: 6, median: 8, q3: 13, high: 16},
|
| {x: "Central Africa", low: 2, q1: 4, median: 9, q3: 12, high: 15},
|
| {x: "Southern Africa", low: 1, q1: 4, median: 8, q3: 11, high: 14}
|
| ];
|
|
|
|
|
| var chart = anychart.box();
|
|
|
|
|
| chart.title("Oceanic Airlines Delays December, 2014");
|
|
|
|
|
| var xAxis = chart.xAxis();
|
| xAxis.staggerMode(true);
|
|
|
| var series = chart.box(data);
|
|
|
|
|
| series.selected().hatchFill("soliddiamond", "#FFF", 1, 5);
|
| series.selected().stroke("none");
|
| series.select([2,4,9]);
|
|
|
|
|
| chart.container("container");
|
|
|
|
|
| chart.draw();
|
| });</script>
|
| </body>
|
| </html> |
