Sorting Scatter Highstock Chart with Multiple Series

Question

I running into issues when attempting to sort a highstocks chart series. I continue to get a Highcharts Error #15. I understand why I'm getting this error but I'm looking for a way to get around it. I have a 3 element array as the following [[x],[y],[time]]

Im attempting use a stock chart to allow me to slide through time while updating x and y scatter plot. To fully understand what I'm plotting some reasoning for this plot type may be helpful. x in this case is engine load percent while y is exhaust temp.

I get the error because no matter how I sort the data because I have two x series and highstock requires that data be sorted according to the x-axis. As you can imagine, x1 and x2 are not dependent on one another and my limited programming skills have left me scratching my head here.

A js fiddle of the code I'm using is located here - jsfiddle

Thanks so much in advance for any help!

Highcharts.stockChart('container', {

  xAxis: {

    labels: {
      enabled: false
    }
  },
  rangeSelector: {
buttons: [{
      type: 'day',
      count: 1,
      text: '1 Day'
    }, {
      type: 'day',
      count: 3,
      text: '3 Day'
    }, {
      type: 'day',
      count: 6,
      text: '6 Days'
    }, {
      type: 'ytd',
      text: 'YTD'
    }, {
      type: 'year',
      count: 1,
      text: '1y'
    }, {
      type: 'all',
      text: 'All'
    }]
  },
  chart: {
    type: 'scatter',
    reflow: false,

  },
  tooltip: {
    enabled: true,
  },
  boost: {
    useGPUTranslations: true,
    usePreAllocated: true
  },

  series: [{

      //groupPixelWdith: 100000,
      //turboThreshold: 10,
      id: 'main-series',
      data: points.map(function(point) {
        return [point[0], point[1], point[2], point[1]]
      }),
      showInNavigator: false,
      xAxis: 1,

      min: 0,
      keys: ['x', 'y', 'date', 'holdY'],
      labels: {
        enabled: false
      },
    }, {
      name: 'null_Lower',
      xAxis: 1,
      labels: {
        enabled: false
      },
      type: 'area',
      showInLegend: false,
      fillOpacity: .5,
      color: 'rgba(255,0,0,0.5)',
      data: [
        [0, 257],
        [10, 276],
        [20, 286],
        [30, 290],
        [40, 290],
        [50.0, 291],
        [60.0, 294],
        [70.0, 304],
        [80.0, 323],
        [90.0, 354]
      ]
    },

    {
      xAxis: 0,
      labels: {
        enabled: false
      },
      //min:0,
      //max: 1000,
      data: points.map(function(point) {
        return [point[2]]; //, point[1]];
      }),
      showInNavigator: true,
      enableMouseTracking: false,
      color: '#FF0000',
      showInLegend: false
    }

  ],

  yAxis: {
    title: {
      enabled: true,
      text: 'Exhaust Cylinder Temperature',
    },
    opposite: false,
    labels: {
      enabled: true
    },
    min: 100,
    max: 500
  },

  xAxis: [{

    //min: 0,
    //minRange: 1000 * 3600 * 24,
    type: 'linear',
    tickLength: 0,
    //tickLength: 0,
    labels: {
      enabled: false
    },
    events: {

      setExtremes: function(e) {

        var points = this.chart.get('main-series').points;
        points.forEach(function(point) {
          point.update({
              y: e.min <= point.date && point.date <= e.max ? point.holdY : 
null
            },
            false, false);
        });
        //this.chart.redraw;

      }
    }
  }, {
    type: 'linear'
  }],
  navigator: {
    enabled: true,
    xAxis: {
      //tickInterval: 0
    },

  }
});

Answer 1

I think that you should create two separate series like this:

var seriesArr = [{
  data: []
}, {
  data: []
}];

// create new points and add them to their respective series
points.forEach(function(point) {
  seriesArr[0].data.push([point[2], point[0]]);
  seriesArr[1].data.push([point[2], point[1]]);
});

Live demo: http://jsfiddle.net/kkulig/qazkxary/

For every element from your points array take the third item (timestamp) and make it an x value for two points.

Handling data in Highcharts is explained here: https://www.highcharts.com/docs/chart-concepts/series

You may find it useful.