With mulitiple boxplots/median trend line series', line points don't line up with boxplot

StackOverflow https://stackoverflow.com/questions/21705479

  •  10-10-2022
  •  | 
  •  

Pregunta

Highcharts box plots have a fantastic feature that offsets box plots when 2 series' are on the same point of the x axis. My problem is that I also have a trend line along the median that is linked to the box plots, but its data points are not offset with the box plots. Is there a way I can apply the same adjustments to the line series' that are being applied to the box plots? I need to make sure they line up regardless of chart size, number of data points, etc.

jsfiddle example

        series: [{
        name: "1st Series",
        data: [
            [1352959200000, 1.38, 1.38, 1.44, 1.59, 1.59],
            [1355551200000, 1.39, 1.39, 1.48, 1.63, 1.63],
            [1358229600000, 1.41, 1.41, 1.5, 1.6, 1.6],
            [1360908000000, 1.37, 1.37, 1.52, 1.61, 1.61],
            [1363323600000, 1.47, 1.47, 1.5, 1.66, 1.66],
            [1366002000000, 1.33, 1.33, 1.47, 1.62, 1.62],
            [1368594000000, 1.26, 1.26, 1.46, 1.54, 1.54],
            [1371272400000, 1.14, 1.14, 1.26, 1.43, 1.43],
            [1373864400000, 1.21, 1.21, 1.28, 1.35, 1.35],
            [1376542800000, 1.31, 1.31, 1.33, 1.46, 1.46],
            [1379221200000, 1.31, 1.31, 1.33, 1.46, 1.46],
            [1381813200000, 1.33, 1.33, 1.41, 1.67, 1.67]
        ]
    }, {
        name: "1st Series Median Trend",
        type: "spline",
        linkedTo: ":previous",
        data: [
            [1352959200000, 1.44],
            [1355551200000, 1.48],
            [1358229600000, 1.5],
            [1360908000000, 1.52],
            [1363323600000, 1.5],
            [1366002000000, 1.47],
            [1368594000000, 1.46],
            [1371272400000, 1.26],
            [1373864400000, 1.28],
            [1376542800000, 1.33],
            [1379221200000, 1.33],
            [1381813200000, 1.41]
        ]
    }, {
        name: "2nd Series",
        data: [
            [1352999200000, 1.21, 1.21, 1.36, 1.45, 1.45],
            [1355591200000, 1.17, 1.17, 1.27, 1.46, 1.46],
            [1358269600000, 1.18, 1.18, 1.28, 1.55, 1.55],
            [1360948000000, 1.22, 1.22, 1.39, 1.61, 1.61],
            [1363363600000, 1.28, 1.28, 1.4, 1.61, 1.61],
            [1366042000000, 1.27, 1.27, 1.37, 1.61, 1.61],
            [1368634000000, 1, 1, 1.11, 1.28, 1.28],
            [1371312400000, 1, 1, 1.22, 1.33, 1.33],
            [1373904400000, 1.09, 1.09, 1.33, 1.39, 1.39],
            [1376582800000, 1.26, 1.26, 1.36, 1.43, 1.43],
            [1379261200000, 1.25, 1.25, 1.36, 1.49, 1.49],
            [1381853200000, 1.26, 1.26, 1.48, 1.59, 1.59]
        ]
    }, {
        name: "2nd Series Median Trend",
        type: "spline",
        linkedTo: ":previous",
        data: [
            [1352999200000, 1.36],
            [1355591200000, 1.27],
            [1358269600000, 1.28],
            [1360948000000, 1.39],
            [1363363600000, 1.4],
            [1366042000000, 1.37],
            [1368634000000, 1.11],
            [1371312400000, 1.22],
            [1373904400000, 1.33],
            [1376582800000, 1.36],
            [1379261200000, 1.36],
            [1381853200000, 1.48]
        ]
    }]
¿Fue útil?

Solución

The solution I settled on uses Pawel's suggestion of offsetting the date values, but also un-groups the box plots and offsets the trend line data points that correspond with the box plots. This way, the box plots and trend lines will be aligned regardless of hiding, resizing, etc.

jsfiddle

$(function () {
var interval = 3 * 24 * 3600 * 1000;
$('#container').highcharts({
    chart: {
        type: 'boxplot'
    },

    title: {
        text: 'Highcharts Box Plot Example'
    },

    plotOptions: {
        boxplot: {
            grouping: false,
            shadow: false,
            pointWidth: 10
        },
        spline:{
            marker: {
                enabled: false
            }
        }
    },

    xAxis: {
        type: "datetime",
        title: {
            text: "Test Date"
        },
    },
    yAxis: {
        title: {
            text: 'Observations'
        },
    },

    series: [{
        name: "1st Series",
        data: [
            [1352959200000 - interval, 1.38, 1.38, 1.44, 1.59, 1.59],
            [1355551200000 - interval, 1.39, 1.39, 1.48, 1.63, 1.63],
            [1358229600000 - interval, 1.41, 1.41, 1.5, 1.6, 1.6],
            [1360908000000 - interval, 1.37, 1.37, 1.52, 1.61, 1.61],
            [1363323600000 - interval, 1.47, 1.47, 1.5, 1.66, 1.66],
            [1366002000000 - interval, 1.33, 1.33, 1.47, 1.62, 1.62],
            [1368594000000 - interval, 1.26, 1.26, 1.46, 1.54, 1.54],
            [1371272400000 - interval, 1.14, 1.14, 1.26, 1.43, 1.43],
            [1373864400000 - interval, 1.21, 1.21, 1.28, 1.35, 1.35],
            [1376542800000 - interval, 1.31, 1.31, 1.33, 1.46, 1.46],
            [1379221200000 - interval, 1.31, 1.31, 1.33, 1.46, 1.46],
            [1381813200000 - interval, 1.33, 1.33, 1.41, 1.67, 1.67]
        ]
    }, {
        name: "1st Series Median",
        type: "spline",
        linkedTo: ":previous",
        data: [
            [1352959200000 - interval, 1.44],
            [1355551200000 - interval, 1.48],
            [1358229600000 - interval, 1.5],
            [1360908000000 - interval, 1.52],
            [1363323600000 - interval, 1.5],
            [1366002000000 - interval, 1.47],
            [1368594000000 - interval, 1.46],
            [1371272400000 - interval, 1.26],
            [1373864400000 - interval, 1.28],
            [1376542800000 - interval, 1.33],
            [1379221200000 - interval, 1.33],
            [1381813200000 - interval, 1.41]
        ]
    }, {
        name: "2nd Series",
        data: [
            [1352999200000 + interval, 1.21, 1.21, 1.36, 1.45, 1.45],
            [1355591200000 + interval, 1.17, 1.17, 1.27, 1.46, 1.46],
            [1358269600000 + interval, 1.18, 1.18, 1.28, 1.55, 1.55],
            [1360948000000 + interval, 1.22, 1.22, 1.39, 1.61, 1.61],
            [1363363600000 + interval, 1.28, 1.28, 1.4, 1.61, 1.61],
            [1366042000000 + interval, 1.27, 1.27, 1.37, 1.61, 1.61],
            [1368634000000 + interval, 1, 1, 1.11, 1.28, 1.28],
            [1371312400000 + interval, 1, 1, 1.22, 1.33, 1.33],
            [1373904400000 + interval, 1.09, 1.09, 1.33, 1.39, 1.39],
            [1376582800000 + interval, 1.26, 1.26, 1.36, 1.43, 1.43],
            [1379261200000 + interval, 1.25, 1.25, 1.36, 1.49, 1.49],
            [1381853200000 + interval, 1.26, 1.26, 1.48, 1.59, 1.59]
        ]
    }, {
        name: "2nd Series Median",
        type: "spline",
        linkedTo: ":previous",
        data: [
            [1352999200000 + interval, 1.36],
            [1355591200000 + interval, 1.27],
            [1358269600000 + interval, 1.28],
            [1360948000000 + interval, 1.39],
            [1363363600000 + interval, 1.4],
            [1366042000000 + interval, 1.37],
            [1368634000000 + interval, 1.11],
            [1371312400000 + interval, 1.22],
            [1373904400000 + interval, 1.33],
            [1376582800000 + interval, 1.36],
            [1379261200000 + interval, 1.36],
            [1381853200000 + interval, 1.48]
        ]
    }]

});

});

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top