CODEWITHSUNDEEP
javascriptjqueryhighcharts
user813813
user813813

Reputation: 355

Can hidden values be passed between a highcharts drilldown?

I want to pass a hidden value between a HighCharts drill down. When a user clicks on an item (Item 1), they them have 3 selections. On clicking any of these selections, I would like to have a hidden id passed from Item 1 in order to use this ID to perform an action using another PHP script. Is this possible?

$(function() {
    // Create the chart
    Highcharts.chart('container', {
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Overall Status'
        },
        xAxis: {
            type: 'category',
            labels: {
                style: {
                    fontSize: '15px'
                }
            }
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    style: {
                        fontSize: '20px'
                    }
                },
                cursor: 'pointer',
                point: {
                    events: {
                        click: function() {
                            if (this.options && this.options.url) {
                                location.href = this.options.url;
                            }
                        }
                    }
                }
            }
        },
        series: [{
            name: 'Status',
            colorByPoint: true,
            data: [{
                name: 'Item 1',
                y: 80,
                drilldown: 'item1'
            }, {
                name: 'Item 2',
                y: 33,
                drilldown: 'item2'
            }]
        }],
        drilldown: {
            series: [{
                id: 'item1',
                data: [{
                    name: 'Condition 1',
                    url: 'http://myurl?id=item 1',
                    y: 7
                }, {
                    name: 'Condition 2',
                    url: 'http://myurl?id=item 1',
                    y: 2,
                }, {
                    name: 'Condition 3',
                    url: 'http://myurl?id=item 1',
                    y: 1,
                }]
            }, {
                id: 'item2',
                data: [{
                    name: 'Condition 1',
                    url: 'http://myurl?id=item 2',
                    y: 3
                }, {
                    name: 'Condition 2',
                    url: 'http://myurl?id=item 2',
                    y: 2,
                }, {
                    name: 'Condition 3',
                    url: 'http://myurl?id=item 2',
                    y: 9,
                }]

            }]
        }
    });
});

Have a jsfiddle here https://jsfiddle.net/mark2017/bd1v6tew/2/

Upvotes: 1

Views: 253

Answers (1)

morganfree
morganfree

Reputation: 12472

You can do it dynamically on a drilldown event.

Define a hidden property for a point.

series: [{
  name: 'Status',
  colorByPoint: true,
  data: [{
    name: 'Item 1',
    y: 80,
    drilldown: 'item1',
    hiddenValue: 'hidden 1',
  }, {
    name: 'Item 2',
    y: 33,
    drilldown: 'item2',
    hiddenValue: 'hidden 2'
  }]
}],

Save a parent hiddent property to the new series on the drilldown event:

chart: {
  type: 'bar',
  events: {
    drilldown: function (e) {
      e.seriesOptions.hiddenValue = e.point.options.hiddenValue;
    }
  }
},

Read it on the point click event:

click: function() {
  var seriesOptions = this.series && this.series.options;
  var hiddenValue = seriesOptions && seriesOptions.hiddenValue;

  console.log(hiddenValue);

example: https://jsfiddle.net/enjk7w1r/

Upvotes: 1

Related Questions