JoMer
Posts: 7
Joined: Wed Feb 24, 2021 12:42 am

Trigger sort of stacked bar chart

Wed Feb 24, 2021 1:19 am

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
Posts: 685
Joined: Wed Sep 02, 2020 10:37 am

Re: Trigger sort of stacked bar chart

Thu Feb 25, 2021 10:06 am

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,
Paweł Lysy
Highcharts Developer

JoMer
Posts: 7
Joined: Wed Feb 24, 2021 12:42 am

Re: Trigger sort of stacked bar chart

Mon Mar 01, 2021 11:00 pm

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
Posts: 7
Joined: Wed Feb 24, 2021 12:42 am

Re: Trigger sort of stacked bar chart

Mon Mar 01, 2021 11:15 pm

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
Posts: 685
Joined: Wed Sep 02, 2020 10:37 am

Re: Trigger sort of stacked bar chart

Tue Mar 02, 2021 4:30 pm

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,
Paweł Lysy
Highcharts Developer

JoMer
Posts: 7
Joined: Wed Feb 24, 2021 12:42 am

Re: Trigger sort of stacked bar chart

Tue Mar 02, 2021 6:07 pm

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
Posts: 685
Joined: Wed Sep 02, 2020 10:37 am

Re: Trigger sort of stacked bar chart

Fri Mar 05, 2021 10:06 am

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,
Paweł Lysy
Highcharts Developer

JoMer
Posts: 7
Joined: Wed Feb 24, 2021 12:42 am

Re: Trigger sort of stacked bar chart

Fri Mar 05, 2021 6:55 pm

That's disappointing. Bug reported.

pawelys
Posts: 685
Joined: Wed Sep 02, 2020 10:37 am

Re: Trigger sort of stacked bar chart

Mon Mar 08, 2021 10:23 am

Great! Sorry again, we will try to fix this as soon as possible :)
Paweł Lysy
Highcharts Developer

JoMer
Posts: 7
Joined: Wed Feb 24, 2021 12:42 am

Re: Trigger sort of stacked bar chart

Tue Mar 09, 2021 9:35 pm

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
Posts: 7
Joined: Wed Feb 24, 2021 12:42 am

Re: Trigger sort of stacked bar chart

Tue Mar 09, 2021 10:24 pm

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
Posts: 685
Joined: Wed Sep 02, 2020 10:37 am

Re: Trigger sort of stacked bar chart

Wed Mar 10, 2021 9:26 am

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

Return to “Highcharts Usage”