Feature: Jitter. Fixed k-d-tree position, added box plot sample.

.eslintrc

@@ -23,6 +23,7 @@ rules:
     operator-linebreak: [2, "after"]
     padding-line-between-statements: 0 // Annoying in samples and tools. If we want it, do --fix.
     prefer-arrow-callback: 0 // Not supported in Highcharts, too early for tests and samples.
+    prefer-spread: 0 // Too early for samples
     prefer-template: 0 // Will probably create a lot of noise in samples
     space-before-function-paren: [2, {"anonymous": "always", "named": "never"}] # JSLint style
     strict: 0

js/parts/ScatterSeries.js

@@ -116,7 +116,6 @@ seriesType(
 // @todo
 // - API docs
 // - Tutorial docs
-// - Sample with box plot, find correct setting for width
 H.addEvent(Series, 'afterTranslate', function () {
     if (!(this instanceof H.seriesTypes.scatter)) {
         return;
@@ -139,6 +138,7 @@ H.addEvent(Series, 'afterTranslate', function () {
 
                         // Modify plotX and plotY
                         point['plot' + dim.toUpperCase()] += offset;
+                        point.clientX = point.plotX; // For tooltip k-d-tree
                     }
                 }
             });

samples/highcharts/series-scatter/jitter-boxplot/demo.css

@@ -0,0 +1,5 @@
+#container {
+    height: 400px;
+    max-width: 800px;
+    margin: 0 auto;
+}

samples/highcharts/series-scatter/jitter-boxplot/demo.details

@@ -0,0 +1,6 @@
+---
+ name: Highcharts Box Plot and Jittered Scatter Plot
+ authors:
+   - Torstein Hønsi
+ js_wrap: b
+...

samples/highcharts/series-scatter/jitter-boxplot/demo.html

@@ -0,0 +1,5 @@
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/highcharts-more.js"></script>
+
+<div id="container"></div>
+

samples/highcharts/series-scatter/jitter-boxplot/demo.js

@@ -0,0 +1,91 @@
+// Generate test data with continuous Y values.
+function getExperimentData() {
+    var data = [],
+        off = 0.3 + 0.2 * Math.random(),
+        i;
+    for (i = 0; i < 200; i++) {
+        data.push(
+            Math.round(1000 * (off + (Math.random() - 0.5) * (Math.random() - 0.5)))
+        );
+    }
+    return data;
+}
+
+function getBoxPlotData(values) {
+    var sorted = values.sort(function (a, b) {
+        return a - b;
+    });
+
+    return {
+        low: sorted[0],
+        q1: sorted[Math.round(values.length * 0.25)],
+        median: sorted[Math.round(values.length * 0.5)],
+        q3: sorted[Math.round(values.length * 0.75)],
+        high: sorted[sorted.length - 1]
+    };
+}
+
+var experiments = [
+    getExperimentData(),
+    getExperimentData(),
+    getExperimentData(),
+    getExperimentData(),
+    getExperimentData()
+];
+
+var scatterData = experiments
+    .reduce(function (acc, data, x) {
+        return acc.concat(data.map(function (value) {
+            return [x, value];
+        }));
+    }, []);
+
+var boxplotData = experiments
+    .map(getBoxPlotData);
+
+Highcharts.chart('container', {
+
+    title: {
+        text: 'Highcharts Box Plot and Jittered Scatter Plot'
+    },
+
+    legend: {
+        enabled: false
+    },
+
+    xAxis: {
+        categories: ['1', '2', '3', '4', '5'],
+        title: {
+            text: 'Experiment No.'
+        }
+    },
+
+    yAxis: {
+        title: {
+            text: 'Observations'
+        }
+    },
+
+    series: [{
+        type: 'boxplot',
+        name: 'Summary',
+        data: boxplotData,
+        tooltip: {
+            headerFormat: '<em>Experiment No {point.key}</em><br/>'
+        }
+    }, {
+        name: 'Observation',
+        type: 'scatter',
+        data: scatterData,
+        jitter: {
+            x: 0.24 // Exact fit for box plot's groupPadding and pointPadding
+        },
+        marker: {
+            radius: 1
+        },
+        color: 'rgba(100, 100, 100, 0.5)',
+        tooltip: {
+            pointFormat: 'Value: {point.y}'
+        }
+    }]
+});

samples/highcharts/series-scatter/jitter/demo.js

@@ -1,16 +1,26 @@
 // Generate test data with discrete X values and continuous Y values.
-function getTestData() {
-    var data = [];
-    for (var x = 0; x < 5; x++) {
-        var off = 0.2 + 0.2 * Math.random();
-        for (var i = 0; i < 200; i++) {
-            data.push([x, off + (Math.random() - 0.5) * (Math.random() - 0.5)]);
-        }
+function getTestData(x) {
+    var data = [],
+        off = 0.2 + 0.2 * Math.random(),
+        i;
+    for (i = 0; i < 200; i++) {
+        data.push([x, off + (Math.random() - 0.5) * (Math.random() - 0.5)]);
     }
     return data;
 }
 
+// Make all the colors semi-transparent so we can see overlapping dots
+var colors = Highcharts.getOptions().colors.map(function (color) {
+    return Highcharts.color(color).setOpacity(0.5).get();
+});
+
 Highcharts.chart('container', {
+    chart: {
+        type: 'scatter'
+    },
+
+    colors: colors,
+
     title: {
         text: 'Scatter chart with jitter'
     },
@@ -25,18 +35,36 @@ Highcharts.chart('container', {
             text: 'Measurements'
         }
     },
-    series: [{
-        name: 'Experiments',
-        data: getTestData(),
-        showInLegend: false,
-        type: 'scatter',
-        color: 'rgba(100, 100, 255, 0.5)',
-        jitter: {
-            x: 0.2,
-            y: 0
-        },
-        marker: {
-            radius: 2
+    plotOptions: {
+        scatter: {
+            showInLegend: false,
+            jitter: {
+                x: 0.2,
+                y: 0
+            },
+            marker: {
+                radius: 2,
+                symbol: 'circle'
+            },
+            tooltip: {
+                pointFormat: 'Measurement: {point.y:.3f}'
+            }
         }
+    },
+    series: [{
+        name: 'Run 1',
+        data: getTestData(0)
+    }, {
+        name: 'Run 2',
+        data: getTestData(1)
+    }, {
+        name: 'Run 3',
+        data: getTestData(2)
+    }, {
+        name: 'Run 4',
+        data: getTestData(3)
+    }, {
+        name: 'Run 5',
+        data: getTestData(4)
     }]
 });