CODEWITHSUNDEEP
javascriptjqueryhighcharts
ArielSh
ArielSh

Reputation: 83

Can't display extra tooltip data in price history chart

Im trying to display extra data in the tooltip of price-history chart (stockChart),

jsfiddle example: http://jsfiddle.net/z10dLcj8/1/

$(function(){        
var priceHistoryObjArray = [
[1379883600000,47.19,'extra data'],
[1379970000000,48.45,'extra data1'],
[1380056400000,49.46,'extra data2'],
[1380142800000,50.39,'extra data3']
];



$('#container').highcharts('StockChart', {
        tooltip:{
          formatter: function(){
              //how to return 'extra data'??
            //return this.points[2]??
            return this.y; //return price


          }
        },
        series : [{          
          name : 'Price',        
          data : priceHistoryObjArray,
          id: 'dataseries'
        }]
      });
});

I pass the chart array of arrays which looks like this:

var dataArray = [[date, price, 'some extra data1'],[date, price, 'some extra data2'],[date, price, 'some extra data3']];

I tried using the tooltip formatter function to return the extra string but didn't succeed accessing the string. I tried:

this.z, this.point[2]

without success too I tried converting the array to JSON and trying to do something like this.MyExtraData and again failed

If anyone has a solution that might work please help me, thank you.

I already tried to change to array of object and calling the name but without succses! http://jsfiddle.net/z10dLcj8/3/

function prepare(dataArray) {
          return dataArray.map(function (item, index) {
              return {x: item[0], y: item[1], extra: item[2]};
          });
      };


$(function(){

var priceHistoryObjArray = [
[1379883600000,47.19,'extra data'],
[1379970000000,48.45,'extra data1'],
[1380056400000,49.46,'extra data2'],
[1380142800000,50.39,'extra data3']
];

    priceHistoryObjArray = prepare(priceHistoryObjArray);




$('#container').highcharts('StockChart', {
        tooltip:{
          formatter: function(){
              //how to return 'extra data'??
              this.points[0].point.extra;


          }
        },
        series : [{          
          name : 'Price',        
          data : priceHistoryObjArray,
          id: 'dataseries'
        }]
      });
});

Upvotes: 1

Views: 289

Answers (2)

Sebastian Bochan
Sebastian Bochan

Reputation: 37588

Try to replace this.points[0].point.extra; with this.points[0].point.options.extra; Second solution is use tooltip formatter to extract this field.

Upvotes: 0

SteveP
SteveP

Reputation: 19103

You can define your points slightly differently:

var priceHistoryObjArray = [{
    x: 1379883600000,
    y: 47.19,
    name: 'extra data'
},

and then refer to: this.point.name http://jsfiddle.net/dz11ty8v/.

although I had to switch to highcharts to get it working rather than highstock although it should work in highstock (http://api.highcharts.com/highstock#tooltip.formatter).

Upvotes: 1

Related Questions