Trigger sort of stacked bar chart

[JoMer]

I am trying to add a button that will allow a user to sort a stacked bar chart that has been loaded via CSV.
I have seen other solutions that involve writing sort functions and parsing the data. However, there is an existing sort value that I can set, so I think I should be able to change that value and redraw the chart.

Here is a Fiddle of my chart: https://jsfiddle.net/v41x92c6/23/

By changing the initial value on line 1 of the JS, you can set the default sort to the name or value. Either will work.
If "value" the bars are sorted by the value in the first category of the stacked bar chart "focused". This is exactly what I want the default sort to be.
If "name", the bars are sorted alphabetically, with A at the bottom. By changing the value of the variable and rerunning, you can see the change that I want to trigger via a button.

I have three buttons showing different attempts to resort the graph.
The first 2, get the current sort value from the chart and attempt change it.
The 3rd gets the current sort value from the initially set global variable on line 1 and changes it.

None work, but I thought I'd include them all to show some of the directions I've tried.

[pawelys]

Hello, welcome to the Highcharts official forum, and thanks for contacting us with your question!
Unfortunately, I don't really understand what you are trying to achieve. Could you try to specify your goal a bit more thoroughly? Kind regards,

[JoMer]

I want to sort the bars by either the value of the first category "focused" or alphabetically by the "name" of the categories.
I can set either sort programmatically, by setting the parameter:

Code: Select all

      dataSorting: {
                 enabled: true,
                 sortKey: sortVal, // "name" or  "value"
            }

However, I want a user to trigger the sort using a button.

I can't get a button to trigger a change on the sortKey.
The example shows three attempts, which change other things such as color or title, to show the button doing something...

[JoMer]

I realize the fiddle had a CORS error (I didn't notice it previously as I use, a chrome extension to work around those). I have an updated fiddle here that uses an embedded CSV. I don't think this effects the sort.
https://jsfiddle.net/jmerson/Lj1nqkd0/1/

[pawelys]

Hi again! I think that the problem lies in a way, you want to update the sorting way. You can't just change the global variable. You have to update the chart once again with the new value. Let me know, if that works for you, and let me know, in case you have any more questions! Kind regards,

[JoMer]

Right. That is what I tried to do with the functions triggered by the buttons.

The function sortChart (the first button) gets the current value and should switch it by assigning the new value to the series options. The title and sort direction change to show that the function generally works, just not the sort value.

Code: Select all

    chart.update({
        title:{
            text: Math.round(100*Math.random()) + " Sort should be "+ sortValue
        },
        xAxis:{
            reversed: sortDirection
        },
        series:[{
             options:{
                dataSorting: {
                    sortKey: sortValue
                 }
             }
        }]
    });
}

The function sortChart2 (the second button) gets the current value and should switch it by assigning the new value. As below. You can go ahead and just put the string right in, but that does not work. I added the color change, so you can see that the function generally works, just again not the sort value see:

Code: Select all

     chart.series[0].update({
     	color:"red",
        options:{
                dataSorting: {
                    sortKey: sortValue
                 }
             }
     });

Where do I update the the `sortkey` value so it actually changes in the chart?

[pawelys]

Sorry, I took so long to reply. It seems to be a bug. You can report this as an issue on our github page: https://github.com/highcharts/highchart ... new/choose

And you can watch the topic there. Our developers will investigate the issue again, and they will post a possible workaround for this problem. Kind regards,

[JoMer]

That's disappointing. Bug reported.

[pawelys]

Great! Sorry again, we will try to fix this as soon as possible

[JoMer]

HI again. I logged the bug, and I was pointed to an existing bug report and workaround: https://github.com/highcharts/highcharts/issues/15276

The workaround helped with triggering the sort on a bar chart, unfortunately, this solution messed up the stacked values.
Here is my implementation of the workaround:
https://jsfiddle.net/jmerson/5g6p8ezr/48/

Given the example data:
var data = [
['a', 10, 12, 1],
['b', 4, 13, 2],
['c', 6, 14, 3]
];

My goal is:
- when sorted alphabetically by name (descending):
['c', 6, 14, 3]
['b', 4, 13, 2],
['a', 10, 12, 1],

- when sorted by the first value:
['a', 10, 12, 1],
['c', 6, 14, 3]
['b', 4, 13, 2]

However, the work around makes the data in the graph look like this:
- when sorted alphabetically by name (descending):
['c', 6, 6, 6]
['b', 4, 4, 4]
['a', 10, 10, 10],

- when sorted by the first value:
['a', 10, 10, 10],
['c', 6, 6, 6]
['b', 4, 4, 4]

Any further suggestions? Thanks!

[JoMer]

Follow up. If anyone else is trying to do this, see https://jsfiddle.net/jmerson/5g6p8ezr/71/
Turns out the data had to be sliced differently within each series, so that it would only return the correct columns from the 2-D array.
I used this when the chart is initialized and in the update function.

Code: Select all

  series: [{
    id: 'mainSeries',
		name: 'Series one',
    keys: ['name', 'y', 'other'],
    dataSorting: {
      enabled: true,
      sortKey: sortValue, // name, y
    },
    data: data.map(function(currArray){
      return currArray.slice(0,2);
    })
  }, {
  	name: 'Series two',
  	data: data.map(function(currArray,index) { return currArray[2]; }),
  }, {
    name: 'Series three',
    data: data.map(function(currArray,index) { return currArray[3]; }),
  }]

[pawelys]

Great! So I guess, the issue is resolved! In case of any further questions feel free to contact us again! Kind regards!