CODEWITHSUNDEEP
javascripthighcharts
Ankit Doshi
Ankit Doshi

Reputation: 1174

How to fetch value from another series or data

I am looking for customized tooltip for specific series. in which I have tried multiple ways to make it working but can't get success. I am getting data using AJAX in CodeIgniter PHP framework.

Currently I have multiple series. but I don't want to show test1 and test2 in graph. Please consider X-axis value 10 to get exact idea about problem.

Test Series data :

[["01",0],["02",0],["03",0],["04",0],["05",0],["06",0],["07",0],["08",0],["09",0],["10",2068]

Test1 Series data : 

[["01",0],["02",0],["03",0],["04",0],["05",0],["06",0],["07",0],["08",0],["09",0],["10",1510.2568],["11",0]]

Test2 Series data: 

[["01",0],["02",0],["03",0],["04",0],["05",0],["06",0],["07",0],["08",0],["09",0],["10",4097],["11",0]]

For highcharts series test,test1,test2 my code looks like below response_data is a variable in which I am getting all above series in AJAX response.

Response from my php page 

{"test":[["01",0],["02",0],["03",0],["04",0],["05",0],["06",0],["07",0],["08",0],["09",0],["10",2068],["11",0],["12",0]],"test1":[["01",0],["02",0],["03",0],["04",0],["05",0],["06",0],["07",0],["08",0],["09",0],["10",1510.2568],["11",0],["12",0]],"test2":[["01",0],["02",0],["03",0],["04",0],["05",0],["06",0],["07",0],["08",0],["09",0],["10",4097],["11",0],["12",0]]}

Chart :

tooltip: {
           formatter: function() {
            if(this.series.name=='Test'){
              var current_point=this.point.name;
              var test1=response_data.test1.current_point;
              var test2=response_data.test2.current_point;
              return "Test :"+this.y+"<br/>Test1 : "+test1+"test2 :+test2;
            }else{
             return this.series.name+': <b>'+this.y+'</b>';
            }  
           }            
          },
          series: [
              {
                name: 'Test',
                type: 'column',
                data: response_data.test
              },
              {
               name: 'test1',
               data: response_data['test1'],
               visible: false
              },
              {
               name: 'test2',
               visible: false,
               data: response_data['test2']
               }
          ]

Output for point/X-axis 10:

Test:2068
Test1:1510.2568
Test2:4097

Upvotes: 1

Views: 57

Answers (1)

jlbriggs
jlbriggs

Reputation: 17791

You have the data in arrays - you just have to reference them using the this.x value from inside the tooltip formatter:

tooltip: {
  formatter: function() {
    return '<b>Category: </b>'+this.key
          +'<br/><b>Test: </b>'+ this.y
          +'<br/><b>Test1: </b>'+ test1[this.x][1]
          +'<br/><b>Test2: </b>'+ test2[this.x][1];
  }
}

Fiddle example:

Upvotes: 2

Related Questions