| <!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 01</title>
|
| <link href="https://playground.anychart.com/3LXN62FD/iframe" rel="canonical">
|
| <meta content="Box Chart,Box and Whisker Plot,Statistical Data,Dot Chart,Marker Chart,Multiple Axes" name="keywords">
|
| <meta content="AnyChart - JavaScript Charts designed to be embedded and integrated" name="description">
|
| |
| |
| |
|
|
| <link href="_deps/cdn.anychart.com/releases/8.3.0/css/anychart-ui.min.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.3.0/js/anychart-base.min.js"></script>
|
| <script src="_deps/cdn.anychart.com/releases/8.3.0/js/anychart-exports.min.js"></script>
|
| <script src="_deps/cdn.anychart.com/releases/8.3.0/js/anychart-ui.min.js"></script>
|
| <script type="text/javascript">
|
| anychart.onDocumentReady(function () {
|
|
|
|
|
| var data = [
|
| { x: "Jan", low: 1000, q1: 1050, median: 1200, q3: 1800, high: 2000, customOutliers: [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: 6500, high: 7000, customOutliers: [8930] },
|
| { x: "May", low: 8000, q1: 8400, median: 8500, q3: 8800, high: 9000, customOutliers: [6950, 3000] }
|
| ];
|
|
|
| var data2 = [
|
| { x: "Jan", low: 1000, q1: 1050, median: 1200, q3: 1800, high: 2000, customOutliers: [5000, 2500] },
|
| { x: "Feb", low: 2500, q1: 3000, median: 3800, q3: 3900, high: 4000, customOutliers: [4300, 2300] },
|
| { x: "Mar", low: 2000, q1: 2300, median: 2500, q3: 2900, high: 3000 },
|
| { x: "Apr", low: 4000, q1: 5000, median: 6500, q3: 6500, high: 7000, customOutliers: [8930] },
|
| { x: "May", low: 8000, q1: 8400, median: 8500, q3: 8800, high: 9000, customOutliers: [6950, 3000] }
|
| ]
|
|
|
|
|
| var processedData = preprocessingData(data, 1);
|
| var processedData2 = preprocessingData(data2, 2);
|
|
|
| var chart = anychart.box();
|
|
|
|
|
| chart.yGrid(true);
|
|
|
|
|
| var boxSeries = chart.box(data);
|
| boxSeries.name('Box plots');
|
| var boxSeries2 = chart.box(data2);
|
| boxSeries2.name('Box plots2');
|
|
|
|
|
| chart.barsPadding(1);
|
| chart.barGroupsPadding(3);
|
| var customXScale = anychart.scales.linear();
|
| customXScale.minimum(0);
|
| customXScale.maximum(data.length * 3);
|
| customXScale.ticks().interval(1);
|
| var customXAxis = chart.xAxis(1);
|
| customXAxis.scale(customXScale);
|
| chart.xAxis(1).enabled(false);
|
|
|
|
|
| var outliersSet = anychart.data.set(processedData.outliersData);
|
| var outliersSet2 = anychart.data.set(processedData2.outliersData);
|
|
|
| createOutliers(processedData, outliersSet, customXScale);
|
| createOutliers(processedData2, outliersSet2, customXScale);
|
|
|
|
|
| chart.title('Ungrouped box chart');
|
|
|
|
|
| chart.legend(true);
|
|
|
|
|
| chart.container("container").draw();
|
|
|
|
|
| function preprocessingData(data, index) {
|
| var processedData = {
|
| outliersData: [],
|
| outliersSeriesCount: 0
|
| };
|
| var row;
|
| var currentOutliers;
|
|
|
| for (var i = 0; i < data.length; i++) {
|
| row = data[i];
|
| currentOutliers = [];
|
|
|
| currentOutliers.push(index + i*3);
|
| if (row.customOutliers) {
|
| for (var j = 0; j < row.customOutliers.length; j++) {
|
| currentOutliers.push(row.customOutliers[j]);
|
| }
|
| if (currentOutliers.length > processedData.outliersSeriesCount)
|
| processedData.outliersSeriesCount = currentOutliers.length;
|
| }
|
| processedData.outliersData.push(currentOutliers);
|
| }
|
| processedData.outliersSeriesCount -= 1;
|
| return processedData;
|
| }
|
|
|
|
|
| function createOutliers(processedData, outliersSet, customXScale) {
|
| for (var i = 1; i <= processedData.outliersSeriesCount; i++) {
|
| var mapping = outliersSet.mapAs({ 'x': 0, 'value': i });
|
| var outlierSeries = chart.marker(mapping);
|
| outlierSeries.name('Outliers');
|
| outlierSeries.normal()
|
| .size(5)
|
| .type("circle")
|
| .fill("green", 0.3)
|
| .stroke("green", 1);
|
| outlierSeries.hovered().size(7);
|
| outlierSeries.selected().size(7);
|
| outlierSeries.legendItem().enabled(false);
|
| outlierSeries.xScale(customXScale);
|
| }
|
| }
|
| });
|
| </script>
|
| </body>
|
| </html> |
