Highcharts undefined value

Question

$.getJSON("<?php echo $chartURL; ?>", function (data) {

      var seriesData = [];

      // split the data set into crypto and volume
    for (i=0; i<data.length; i++) {
      seriesData.push({
          x: data[i].time,
          y: data[i].open,
          high: data[i].high
      });
    }

    console.log(seriesData);
    // Create the chart
    Highcharts.stockChart('container', {

        rangeSelector: {
            selected: 0
        },

        title: {
            text: 'AAPL Stock Price'
        },

        tooltip: {
            formatter: function () {
                return Highcharts.dateFormat('%d %b %Y', new Date(this.x)) + '<br/>' +
                    'Open: <b>' + this.y + '</b><br/>' +
                    'High: <b>' + this.point.high + '</b>';
            }
        },

        series: [{
              type: 'line',
              name: 'USD',
              data: seriesData,
              turboThreshold: 0
              }]
    });
});

In for loop I have defined value high and I pass the variable in tooltip, but script return error:

Cannot read property 'high' of undefined

When I change tooltip to this:

    tooltip: {
        formatter: function() {
            var s = '<b>'+ Highcharts.dateFormat('%d %b %Y', new Date(this.x)) +'</b>';

            $.each(this.points, function(i, point) {
                s += '<br/>High: ' + seriesData[i].high + '<br/>Price: ' + point.y;
            });

            return s;
        },
        shared: true
    },

the script does not return any error but the value of high is still the same, it does not change.

I try use: this.point.high, point.high, this.data.high, this.seriesData[i].high ... still I have error undefined

All values are taken from JSON:

[{"time":1347321600000,"open":11.17,"high":11.35,"low":10.88,"close":11.33,"volumeto":721708.44},{"time":1347408000000,"open":11.33,"high":11.39,"low":10.78,"close":11.36,"volumeto":657004.1},{"time":1347494400000,"open":11.36,"high":11.4,"low":11.22,"close":11.4,"volumeto":233401.71},{"time":1347580800000,"open":11.4,"high":11.8,"low":11.32,"close":11.67,"volumeto":500768.38},{"time":1347667200000,"open":11.67,"high":11.79,"low":11.6,"close":11.75,"volumeto":190511.93},{"time":1347753600000,"open":11.75,"high":11.99,"low":11.72,"close":11.87,"volumeto":359833.88}...]

Answer 1

The high key is inside this.points[0].point object, so your tooltip code will be:

    tooltip: {
        formatter: function() {
        console.log(this.points);
            return Highcharts.dateFormat('%d %b %Y', new Date(this.x)) + '<br/>' +
                'Open: <b>' + this.y + '</b><br/>' +
                'High: <b>' + this.points[0].point.high + '</b>';
        }
    },

Check the JSFIDDLE