| <!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>Happiness by Region</title>
|
| <link href="https://playground.anychart.com/aIixouH9/iframe" rel="canonical">
|
| <meta content="Box Chart,Box and Whisker Plot,Stagger Axis feature,Statistical Data,Tooltip" name="keywords">
|
| <meta content="AnyChart - JavaScript Charts designed to be embedded and integrated" name="description">
|
| |
| |
| |
|
|
| <link href="_deps/cdn.anychart.com/releases/v8/css/anychart-ui.min.css" rel="stylesheet" type="text/css">
|
| <link href="_deps/cdn.anychart.com/releases/v8/fonts/css/anychart-font.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/v8/js/anychart-base.min.js"></script>
|
| <script src="_deps/cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
|
| <script src="_deps/cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
|
| <script type="text/javascript">anychart.onDocumentReady(function () {
|
| var data = [
|
| {
|
| x: 'Data Engineer',
|
| low: 40000,
|
| q1: 54000,
|
| median: 68000,
|
| q3: 84000,
|
| high: 110000,
|
| outliers: [200000]
|
| },
|
| {
|
| x: 'DevOps',
|
| low: 52500,
|
| q1: 65000,
|
| median: 72000,
|
| q3: 82500,
|
| high: 124000,
|
| outliers: [30000, 37000, 124000, 140000]
|
| },
|
| {
|
| x: 'Engineering Manager',
|
| low: 78000,
|
| q1: 80000,
|
| median: 85000,
|
| q3: 95750,
|
| high: 105000
|
| },
|
| {
|
| x: 'Frontend Developer',
|
| low: 33000,
|
| q1: 54625,
|
| median: 65500,
|
| q3: 73875,
|
| high: 100000,
|
| outliers: [18700, 24000, 105000, 105000, 110000]
|
| },
|
| {
|
| x: 'ML Engineer',
|
| low: 11500,
|
| q1: 52500,
|
| median: 65000,
|
| q3: 81000,
|
| high: 120000,
|
| outliers: [180000]
|
| },
|
| {
|
| x: 'Mobile Developer',
|
| low: 40000,
|
| q1: 61250,
|
| median: 66000,
|
| q3: 77000,
|
| high: 85000,
|
| outliers: [240000]
|
| },
|
| {
|
| x: 'Product Manager',
|
| low: 30000,
|
| q1: 60000,
|
| median: 70000,
|
| q3: 85000,
|
| high: 120000,
|
| outliers: [150000]
|
| },
|
| {
|
| x: 'Software Engineer',
|
| low: 28800,
|
| q1: 60000,
|
| median: 72000,
|
| q3: 81000,
|
| high: 110000,
|
| outliers: [14712, 16320, 21000, 21120, 24000, 26400, 113000, 115000, 120000, 120000, 120000, 120000, 120000, 120000, 130000, 130000, 140000, 150000, 151872, 160000, 200000, 250000]
|
| },
|
| ];
|
|
|
|
|
| var chart = anychart.box();
|
|
|
|
|
| var series = chart.box(data);
|
|
|
|
|
| chart.title('Yearly Gross Salary for Different Professions in Europe');
|
|
|
|
|
| chart.xAxis().title('Salary');
|
| chart.yAxis().title('Position');
|
|
|
|
|
| chart.xAxis().staggerMode(true);
|
|
|
|
|
| series.normal().fill('#36558F', 0.2);
|
| series.hovered().fill('#36558F', 0.2);
|
| series.selected().fill('#36558F', 0.6);
|
| series.normal().stroke('#36558F', 1);
|
| series.hovered().stroke('#36558F', 2);
|
| series.selected().stroke('#36558F', 2);
|
|
|
|
|
| series.normal().medianStroke('#dd2c00', 2);
|
| series.hovered().medianStroke('#dd2c00', 2);
|
| series.selected().medianStroke('#dd2c00', 2);
|
|
|
|
|
| series.normal().outlierMarkers({
|
| fill: '#36558F 0.2',
|
| stroke: { color: '#36558F', thickness: 1 },
|
| size: 5,
|
| type: 'star5'
|
| });
|
| series.hovered().outlierMarkers({
|
| fill: '#36558F 0.2',
|
| stroke: { color: '#36558F', thickness: 2 },
|
| size: 5,
|
| type: 'star5'
|
| });
|
| series.selected().outlierMarkers({
|
| fill: '#36558F 0.6',
|
| stroke: { color: '#36558F', thickness: 4 },
|
| size: 7.5,
|
| type: 'star5'
|
| });
|
|
|
|
|
| series.normal().stemStroke('#36558F', 0.5);
|
| series.hovered().stemStroke('#36558F', 1);
|
| series.selected().stemStroke('#36558F', 2);
|
|
|
|
|
| series.whiskerWidth(50);
|
| series.normal().whiskerStroke('#36558F', 0.5);
|
| series.hovered().whiskerStroke('#36558F', 1);
|
| series.selected().whiskerStroke('#36558F', 2);
|
|
|
|
|
| chart.tooltip().titleFormat('Region: {%x}');
|
| chart.tooltip().format('Low: {%low} \n High: {%high} \n Quantile 1: {%q1} \n Quantile 3: {%q3} \n Median: {%median} \n Outliers: {%outliers}');
|
|
|
|
|
| chart.container('container');
|
|
|
|
|
| chart.draw();
|
|
|
| });</script>
|
| </body>
|
| </html> |
