Highchart: add href to each segment of stacked bar chart

Question

I want to put specific link on each segment of stacked 100% bar chart..

Demo of stacked bar chart : http://www.highcharts.com/demo/bar-stacked

In details what I am doing and what I am looking for is : Please go to http://barchart.worddss.com/new/ and fill data in left table and submit.

After submit, As you can see each different color segment have a different url but url is like : http://barchart.worddss.com/new/url2&value=2

i.e. I can give fixed url to every fixed color segment and behind value of label..

But I want is, different urls to every segment.. like yellow to google.com , green to fb.com etc..

Code I am using is :

function show () { var m1=document.getElementById('m1').value;
  var m2=document.getElementById('m2').value;
  var m3=document.getElementById('m3').value;
  var m4=document.getElementById('m4').value;
  var m5=document.getElementById('m5').value;
  var m6=document.getElementById('m6').value;
  var m7=document.getElementById('m7').value;
  var c1=document.getElementById('c1').value;
  var c2=document.getElementById('c2').value;
  var c3=document.getElementById('c3').value;
  var c4=document.getElementById('c4').value;
  var c5=document.getElementById('c5').value;
  var c6=document.getElementById('c6').value;
  var c7=document.getElementById('c7').value;
  var e1=document.getElementById('e1').value;
  var e2=document.getElementById('e2').value;
  var e3=document.getElementById('e3').value;
  var e4=document.getElementById('e4').value;
  var e5=document.getElementById('e5').value;
  var e6=document.getElementById('e6').value;
  var e7=document.getElementById('e7').value;


var seriesData = [];
seriesData.push({
    name: "Por cursar",
    data: [parseFloat(e7),parseFloat(c7),parseFloat(m7)],
   url: ["url1","egg","gfhf"]
});
seriesData.push({
    name: "Acreditados",
    data: [parseFloat(e6),parseFloat(c6),parseFloat(m6)],
    url: "url1"
});
seriesData.push({
    name: "Nivel 4",
    data: [parseFloat(e5),parseFloat(c5),parseFloat(m5)],
    url: "url1"
});
seriesData.push({
    name: "Nivel 3",
    data: [parseFloat(e4),parseFloat(c4),parseFloat(m4)],
    url: "url1"
});
seriesData.push({
    name: "Nivel 2",
    data: [parseFloat(e3),parseFloat(c3),parseFloat(m3)],
    url: "url1"
});
seriesData.push({
    name: "Nivel 1",
    data: [parseFloat(e2),parseFloat(c2),parseFloat(m2)],
    url: "url1"
});
seriesData.push({
    name: "Por acreditar",
    data: [parseFloat(e1),parseFloat(c1),parseFloat(m1)],
    url: "url2"
});
$('#container').highcharts({
    chart: {
        type: 'bar'
    },
    credits: {
        enabled: false
    },
    title: {
        text: "CURSO ACTUAL"
    },
    xAxis: {

        allowDecimals: false,
         categories: ['Español', 'Ciencias', 'Matematicas']
    },
    yAxis: {
        min: 0,
        allowDecimals: false,
        title: {
            text: ""
        }
    },
    legend: {
        backgroundColor: '#FFFFFF',
        reversed: true
    },
    plotOptions: {
        series: {
            cursor: 'pointer',
            stacking: 'percent',
             dataLabels: {
                enabled: true,
                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                style: {
                    textShadow: '0 0 3px black'
                }
            },
            point: {
                events: {
                    click: function () {
                    window.location =(this.series.options.url + "&value=" + this.y); 
                       // alert(this.series.options.url + "&y=" + this.y);         
                    }
                }
            }

        }

    },
    series: seriesData
});}

Answer 1

I am not completely sure if you want a url per color (serie) or per true segment (point). Thus I made a hybrid one.

Let's say for some series you need to have link per serie and for another link per point. The former looks more natural if URL is provided together with point value.

seriesData.push({
    name: "Por cursar",
    data: [{y:1, url:'http://facebook.com'}, {y:2, url:'http://google.com'}, {y:3, url: 'http://amazon.com'}]
});
seriesData.push({
    name: "Acreditados",
    data: [1, 2, 3],
    url: "http://cnn.com"
});

This case you click handler must be

 point: {
   events: {
     click: function () {
       var point = this;

       if (point.url) { //if url is per point as in Por cursar
         window.open(point.url);
       } else if (point.series.userOptions.url){ //if url is per serie as in Acreditados
         window.open(point.series.userOptions.url);
       }
     }
   }
 }

Conplete sample can be found here http://plnkr.co/edit/j3NgoNWa6rwPgBGIJDwm