Whats the best way to dynamically update exporting values?

[puffster]

I have a grouped column chart that that drills down to one of three different data sets. I'd like to dynamically update the exporting options based on which data set is drilled into for things such as label rotation, category names, max categories, and sourceheight and sourcewidth. I think I have the exporting section set up properly:

Code: Select all

                exporting: {
                    chartOptions: {
                        xAxis: [{
                            categories: cats,
                            labels: {
                                rotation: categoryRotation
                            },
                            max: categoryCount,
                        }]
                    },
                    sourceHeight: categoryHeight,
                    sourceWidth: categoryWidth,

And I thought I would be able to change the values in the chart events section, but it does not seem to be working:

Code: Select all

                chart: {
                    backgroundColor: 'whiteSmoke',
                    events: {
                        drilldown: function () {
                            categoryHeight = 400;
                            categoryRotation = 90;

                            switch (this.ddDupes[0]) {
                                case 'elem':
                                case 'elem2':
                                    cats = categoriesElem.slice();
                                    categoryCount = categoriesElem.length - 1;
                                    categoryWidth = 6000;
                                    refChart.xAxis[0].setCategories(categoriesElem);
                                    break;
                                case 'mid':
                                case 'mid2':
                                    cats = categoriesMid.slice();
                                    categoryCount = categoriesMid.length - 1;
                                    categoryWidth = 2500;
                                    refChart.xAxis[0].setCategories(categoriesMid);
                                    break;
                                case 'high':
                                case 'high2':
                                    cats = categoriesHigh.slice();
                                    categoryCount = categoriesHigh.length - 1;
                                    categoryWidth = 2000;
                                    refChart.xAxis[0].setCategories(categoriesHigh);
                                    break;
                                default:
                                    break;
                            }

                            refChart.xAxis[0].update({ max: 5 }, true);

                            this.update({
                                scrollbar: {
                                    enabled: true,
                                }
                            }, false);
                        },
                        drillupall: function () {
                            cats = categoriesSL.slice();
                            categoryHeight = 300;
                            categoryWidth = 500;
                            categoryRotation = 0;
                            categoryCount = categoriesSL.length - 1;

                            refChart.xAxis[0].setCategories(categoriesSL);
                            refChart.xAxis[0].update({ max: categoriesSL.length - 1 }, true);

                            this.update({
                                scrollbar: {
                                    enabled: false
                                }
                            }, false);
                        }
                    },
                    type: 'column',
                },

Is there an easier or better way to do this? Can it be done at all?

[puffster]

I've added a jsFiddle so you can see exactly what's going on...what's interesting is that when I initialize the variables before building the chart, they load into the exporting method. Also, I've used console.log to verify that the chart events method is getting hit and that the variables are changing, but they just don't seem to be making it down into the exporting after the initial build.

jsFiddle https://jsfiddle.net/BigSexy/qx5uzdf6/50/

[rafalS]

puffster ,

You need to put update() method into your switch statement:

Code: Select all

drilldown: function() {
          switch (this.ddDupes[0]) {
            case 'elem':
            case 'elem2':
              refChart.xAxis[0].setCategories(categoriesElem);
              refChart.update({
              	exporting: {
                  chartOptions: {
                    xAxis: [{
                      categories: ['first', 'second']
                    }]
                  }
                },
              })
              break;
            case 'mid':
            case 'mid2':
              refChart.xAxis[0].setCategories(categoriesMid);
              refChart.update({
              	exporting: {
                  chartOptions: {
                    xAxis: [{
                      categories: ['cat', 'dog']
                    }]
                  }
                },
              })
              break;
            case 'high':
            case 'high2':
              refChart.xAxis[0].setCategories(categoriesHigh);
              refChart.update({
              	exporting: {
                  chartOptions: {
                    xAxis: [{
                      categories: ['men', 'woman']
                    }]
                  }
                },
              })
              break;
            default:
              break;
          }

          refChart.xAxis[0].update({
            max: 5
          }, true);

          console.log('scroll!');
          this.update({
            scrollbar: {
              enabled: true,
            }
          }, false);
        },

Let me know if you have any additional questions.

jsFiddle: https://jsfiddle.net/of6xvjt7/

Best regards!

[puffster]

That was it!! Thank you so much for you help -- I hope you have a terrific weekend!!

[rafalS]

You're welcome and I hope you too