highchart How to make xaxis label clickable when there is two chart

Question

I have two chart and both are clickable with drilldown issue

following function:

$.each(chartC.xAxis[0].ticks, function(i, tick) {

    $(tick.label).on('click', function() {
        var drilldown = chartC.series[0].data[i].drilldown;
        if (drilldown) { // drill down
            alert(drilldown.id);

        } 
    });
});

the above function work but only on one graph but the other one doesn't work.

as you can see I have defined chartC and another one I have is chartP

chartC label works but chartP doesn't work

chartC = new Highcharts.Chart({


});


chartP = new Highcharts.Chart({


});


<script type="text/javascript">

var chartC;

draw_main_chart();

function draw_main_chart()
{
   Highcharts.setOptions({ colors:['#8BC3E8'] });

   var colors = '#8BC3E8',
      categories = [ 'Specialteam & Winback', 'Inbound Salg & Service 2', 'SP Nord', 'Inbound Nysalg', 'SP Sjælland', 'Outbound Nysalg', 'Inbound Gruppe & Nordea', 'Inbound Salg & Service 1', 'SP Syd', 'Outbound Mail & Chat', 'Service & Holdback', 'RoS', 'Outbound Mersalg', 'Outbound Nordea', 'Strategisk Salgsstyring', 'Outbound Auto', 'Onboarding', 'Partner', ],      name = 'Tryg',
      level = 0,
      data = [ { y:14.50,color: '#8BC3E8',drilldown:{ id:57, name:'Specialteam & Winback',color: '#8BC3E8' } }, { y:11.24,color: '#8BC3E8',drilldown:{ id:62, name:'Inbound Salg & Service 2',color: '#8BC3E8' } }, { y:8.15,color: '#8BC3E8',drilldown:{ id:56, name:'SP Nord',color: '#8BC3E8' } }, { y:8.03,color: '#8BC3E8',drilldown:{ id:59, name:'Inbound Nysalg',color: '#8BC3E8' } }, { y:7.56,color: '#8BC3E8',drilldown:{ id:54, name:'SP Sjælland',color: '#8BC3E8' } }, { y:6.49,color: '#8BC3E8',drilldown:{ id:63, name:'Outbound Nysalg',color: '#8BC3E8' } }, { y:6.43,color: '#8BC3E8',drilldown:{ id:60, name:'Inbound Gruppe & Nordea',color: '#8BC3E8' } }, { y:6.36,color: '#8BC3E8',drilldown:{ id:61, name:'Inbound Salg & Service 1',color: '#8BC3E8' } }, { y:6.16,color: '#8BC3E8',drilldown:{ id:55, name:'SP Syd',color: '#8BC3E8' } }, { y:6.14,color: '#8BC3E8',drilldown:{ id:67, name:'Outbound Mail & Chat',color: '#8BC3E8' } }, { y:5.58,color: '#8BC3E8',drilldown:{ id:58, name:'Service & Holdback',color: '#8BC3E8' } }, { y:4.28,color: '#8BC3E8',drilldown:{ id:86, name:'RoS',color: '#8BC3E8' } }, { y:3.69,color: '#8BC3E8',drilldown:{ id:64, name:'Outbound Mersalg',color: '#8BC3E8' } }, { y:2.76,color: '#8BC3E8',drilldown:{ id:66, name:'Outbound Nordea',color: '#8BC3E8' } }, { y:1.81,color: '#8BC3E8',drilldown:{ id:68, name:'Strategisk Salgsstyring',color: '#8BC3E8' } }, { y:0.82,color: '#8BC3E8',drilldown:{ id:65, name:'Outbound Auto',color: '#8BC3E8' } }, { y:0,color: '#8BC3E8',drilldown:{ id:88, name:'Onboarding',color: '#8BC3E8' } }, { y:0,color: '#8BC3E8',drilldown:{ id:89, name:'Partner',color: '#8BC3E8' } }, ];

  chartC = new Highcharts.Chart({
      chart: {
         renderTo: 'DepartmentStat', 
         type: 'column',
         events: {

        }
      },
      title: {
         text: 'TOTAL STATISTICS OF TRYG',
         style: {
                fontSize: '15px',
                fontWeight: 'bold',                
                color: '#000000'
            },
            align: 'center'
      },   
      subtitle: {
         text: '<div style="font-size: 14px; color:#000000;">Total amount of clicks department (%)</div><br><br><div style="font-size: 10px; color:#000000;">22-12-2015 to 15-02-2016</div><br><br><div style="font-size: 10px; color:#33c570;">Click each department to view details</div>',
         style: {
                fontWeight: 'bold'
            }
      },
      xAxis: {
         categories: categories,
         style: {
                    fontWeight: 'bold',
                    fontSize: '11px',                    
                    color: '#000000'
                }
      },
      yAxis: {
         title: {
            text: 'Total percent %',
                style: {
                    fontWeight: 'bold',
                    fontSize: '11px',                    
                    color: '#000000'
                }
         }
      },
      credits: {
        enabled: false
      },
      plotOptions: {
         column: {
            cursor: 'pointer',
            point: {
               events: {
                  click: function(e)
                  {
                      var drilldown = this.drilldown;

                      if (drilldown)
                      {
                          window.location.href = 'userlogs/departments/' + drilldown.id;
                      }
                  },
                  mouseOver: function() {                                    
                    $(this.series.chart.xAxis[0].labelGroup.element.childNodes[this.x]).css('fill', '#33c570');
                  },
                  mouseOut: function() {                       
                    $(this.series.chart.xAxis[0].labelGroup.element.childNodes[this.x]).css('fill', 'black');
                  }
               }
            },
            dataLabels: {
               enabled: true,
                crop: false,
                overflow: 'none',
               formatter: function() {
                  return this.y;
               }
            }             
         }
      },
      tooltip: {
         enabled: false
      },
      series: [{
         name: name,
         level: level,
         data: data,
         showInLegend: false
      }],
      exporting: {
         enabled: true
      }
   });

    draw_product_chart();

$.each(chartC.xAxis[0].ticks, function(i, tick) {
  $('.highcharts-xaxis-labels text').on('click', function () {
    var drilldown = chartC.series[0].data[i].drilldown;
    if (drilldown) { // drill down
        //window.location.href = 'userlogs/departments/' + drilldown.id;
        alert(drilldown.id);

    } 
  });

    $('.highcharts-drilldown-axis-label').hover(function () {
        $(this).css('fill', '#33c570');
    },
    function () {
        $(this).css('fill', 'black');
    });
});


}

var chartP;



function draw_product_chart()
{
   Highcharts.setOptions({ colors:['#8BC3E8'] });

   var colors = '#8BC3E8',
      categories = [ 'Bil', 'Hus', 'Indbo', 'Ulykke', 'Rejse - Verden', 'Hund', 'Børneforsikring', ];      name = 'Tryg',
      level = 0,
      data = [ { y:55.33,color: '#8BC3E8',drilldown:{ id:23, name:'Bil',color: '#8BC3E8' } }, { y:20.35,color: '#8BC3E8',drilldown:{ id:22, name:'Hus',color: '#8BC3E8' } }, { y:9.90,color: '#8BC3E8',drilldown:{ id:15, name:'Indbo',color: '#8BC3E8' } }, { y:9.23,color: '#8BC3E8',drilldown:{ id:25, name:'Ulykke',color: '#8BC3E8' } }, { y:3.03,color: '#8BC3E8',drilldown:{ id:36, name:'Rejse - Verden',color: '#8BC3E8' } }, { y:1.73,color: '#8BC3E8',drilldown:{ id:24, name:'Hund',color: '#8BC3E8' } }, { y:0.43,color: '#8BC3E8',drilldown:{ id:43, name:'Børneforsikring',color: '#8BC3E8' } }, ];

  chartP = new Highcharts.Chart({
      chart: {
         renderTo: 'ProductStat', 
         type: 'column',
         events: {

        }
      },
      title: {
         text: 'TOTAL STATISTICS OF TRYG',
         style: {
                fontSize: '15px',
                fontWeight: 'bold',                
                color: '#000000'
            },
            align: 'center'
      },   
      subtitle: {
         text: '<div style="font-size: 14px; color:#000000;">Total amount of clicks divided into products (%)</div><br><br> <div style="font-size: 10px; color:#000000;">22-12-2015 to 15-02-2016</div><br><br><div style="font-size: 10px; color:#33c570;">Click each product to view details</div>',
         style: {
                fontWeight: 'bold'
            }
      },
      xAxis: {
         categories: categories
      },
      yAxis: {
         title: {
            text: 'Total percent %',
                style: {
                    fontWeight: 'bold',
                    fontSize: '11px',                    
                    color: '#000000'
                }
         }
      },
      credits: {
        enabled: false
      },
      plotOptions: {
         column: {
            cursor: 'pointer',
            point: {
               events: {
                  click: function(e)
                  {
                      var drilldown = this.drilldown;

                      if (drilldown)
                      {
                          window.location.href = 'userlogs/products/' + drilldown.id;
                      }
                  },
                  mouseOver: function() {                                    
                    $(this.series.chart.xAxis[0].labelGroup.element.childNodes[this.x]).css('fill', '#33c570');
                  },
                  mouseOut: function() {                       
                    $(this.series.chart.xAxis[0].labelGroup.element.childNodes[this.x]).css('fill', 'black');
                  }
               }
            },
            dataLabels: {
               enabled: true,
                crop: false,
                overflow: 'none',
               formatter: function() {
                  return this.y;
               }
            }             
         }
      },
      tooltip: {
         enabled: false
      },
      series: [{
         name: name,
         level: level,
         data: data,
         showInLegend: false
      }],
      exporting: {
         enabled: true
      }
   });


    $.each(chartP.xAxis[0].ticks, function(i, tick) {
      tick.label.on('click', function() {
        var drilldown = chartP.series[0].data[i].drilldown;
        if (drilldown) { // drill down
            //window.location.href = 'userlogs/products/' + drilldown.id;
            alert(drilldown.id);
        } 
      });

        $('.highcharts-drilldown-axis-label').hover(function () {
            $(this).css('fill', '#33c570');
        },
        function () {
            $(this).css('fill', 'black');
        });
    });
}

</script>

what am I doing wrong?

Why not using `drilldown.js`? I think I asked you that question many times. You are trying to reinvent the wheel. Anyway, your code doesn't work because of **closures**. In fact your first chart doesn't work too. Search for `closures` + `js`. For example [this topic](http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example). — Paweł Fus, Feb 16 '16 at 09:49
@pawel I am using drilldown but instead calling Ajax way, I am using route. — Malarivtan, Feb 16 '16 at 10:13
Ok, I see! Still, I think this is issue with the **closures**. And make sure you are not messing up `chartC` and `chartP` variables ;) — Paweł Fus, Feb 16 '16 at 10:16
@PawełFus kindly have a look at my entire code, just put it there — Malarivtan, Feb 16 '16 at 10:19

highchart How to make xaxis label clickable when there is two chart

0 Answers0