Sorting Options for a highchart bar chart

[jstark]

Hello,

I have a bar chart with several different categories that I need users to be able to sort for better analysis. Currently, I have it set in a specific order but would love for there to be a sorting button for smallest-to-largest, largest-to-smallest, and alphabetically. Is this possible?

JSFiddle: https://jsfiddle.net/jstark/2j4qgeau/8/

Thank you in advance!
JT

[ppotaczek]

Hi jstark,

Yes, the functionality that you ask for is possible to create. You need to add buttons which right sort function. I prepared some example.

Live demo: https://jsfiddle.net/BlackLabel/u3bb6oah/

API:
https://api.highcharts.com/class-refere ... es#setData
https://api.highcharts.com/class-refere ... int#update

Best regards!

[jstark]

Wow! Thank you! This is ideal.

[jstark]

Hi again,

This has worked perfectly! I've replicated it several times. However, now I have another question.

How do I add another data series to the sortable chart? It feels like it should be easy but every time I add data it doesn't work. Taking your JSFiddle ( https://jsfiddle.net/BlackLabel/u3bb6oah/ ) how would I simply add a second bar under the existing bar for each category?

Also, with the new data point for each category, is it possible to add button to sort by that point? So, one button to sort alpha, two buttons to sort by existing data (EL) and two buttons to sort by new data (Ever EL)?

Hope this makes sense.

Existing data:

Code: Select all

series: [{
    name: 'EL',
    color: '#00619e',
    data: [35, 37, 5, 9, 27, 31, 3, 38, 5, 52, 0, 23, 9, 25, 19, 10, 26, 49, 19, 16, 0, 7, 2, 43, 4, 12, 7, 1, 9, 36, 15, 36, 24, 3, 33, 56, 46, 32, 6, 34, 15, 10, 1, 30, 11, 1, 46, 11, 18, 22, 54, 45, 4, 26, 49, 2, 5, 3, 3, 41, 17, 6, 8, 9, 0, 3, 10, 7, 3, 22, 19, 5, 15, 18, 3, 29, 6, 34, 28, 0, 0, 6, 11, 27, 11, 4, 12, 7, 3, 7, 24, 0, 21, 0, 5, 10, 0, 6, 10]
  }]

Data that needs to be added as a new bar for each category (each category would then have two pieces of data):

Code: Select all

    name: 'Ever EL',
    color: '#000000',
    data: [35, 37, 5, 9, 27, 31, 3, 38, 5, 52, 0, 23, 9, 25, 19, 10, 26, 49, 19, 16, 0, 7, 2, 43, 4, 12, 7, 1, 9, 36, 15, 36, 24, 3, 33, 56, 46, 32, 6, 34, 15, 10, 1, 30, 11, 1, 46, 11, 18, 22, 54, 45, 4, 26, 49, 2, 5, 3, 3, 41, 17, 6, 8, 9, 0, 3, 10, 7, 3, 22, 19, 5, 15, 18, 3, 29, 6, 34, 28, 0, 0, 6, 11, 27, 11, 4, 12, 7, 3, 7, 24, 0, 21, 0, 5, 10, 0, 6, 10]

Thanks in advance!
JT

[ppotaczek]

Hi jstark,

You have to adapt sort function structure to two series. I prepared a sorting example based on the value of the first series, you can adapt this solution to another cases in simple way.

Live demo: https://jsfiddle.net/BlackLabel/hwo0ayd3/

Best regards!

[jstark]

Thank you. I got it working but now an odd error has occurred. The categories are mis-aligning to the left and being cut off from the chart. JSFiddle: https://jsfiddle.net/jstark/nm3wbLo2/8/. When I click on the sorting buttons on the page, the categories then re-align appropriately.

I'm not sure why the sorting buttons are not working in the JSFiddle but if you want to see it on my live page the address is http://www.wcsddata.net/wearewcsd and the data in question is about a third of the way down the page in the tab labled "EL".

Also, why are the data labels not showing when I have them enabled?

Thank you!
JT

[ppotaczek]

Hi jstark,

It looks like there is a problem with 'chart.redraw' method, please check the corrected version: https://jsfiddle.net/BlackLabel/cz7s8vtm/

The sorting buttons are not working because you did not include jQuery to the project.
Data labels do not work with 'filter' and multiple series: https://jsfiddle.net/BlackLabel/mxcpL5aw/, please use format or formatter properties.

API:
https://api.highcharts.com/highcharts/p ... els.format
https://api.highcharts.com/highcharts/p ... .formatter

Best regards!

[dblinov]

Dear Pawel,

Is there any example to use sorting in Due, but without jQuery?

Appreciate you support and that you in advance?

BR, Dmitry

[rafalS]

Hi Dmitry,

Welcome to our forum and thanks for contacting us.

The only jQuery part there is a click listener. It will work without jQuery if you just replace:

Code: Select all

$('#sort1').on('click', 

with

Code: Select all

document.getElementById('sort1').addEventListener('click', 

Docs: https://developer.mozilla.org/en-US/doc ... ntListener

Let me know if you have any further questions.

Best regards!

[dblinov]

Dear Rafal,

Thank you for information.
May I ask maybe simple question? How code from example has to be adapted in case of usage in chart.vue component if chartOptions are located inside export default data():

Code: Select all

<template>
  <highcharts class="chart" :options="chartOptions"></highcharts>
</template>

<script>
  export default {
    data() {
      return {
        chartOptions: {
          ...
        }
      }
    }
  }
</script>

I wonder what I have to use instead of "Highchart.each .... and etc."

Thank you very much in advance!

BR, Dmitry

[rafalS]

Dmitry,

You will get your answer on our highcharts-vue issues tracker. For the future, please do not duplicate questions on different support channels

For the reference: https://github.com/highcharts/highcharts-vue/issues/96

Best regards!

[dblinov]

Thank you very much, Rafal!
Sorry, I put it initially. I will not

[jstark]

Hi there,

I'm the OP and have run into an issue. When I inject charts from everviz, the sorting functionality is lost on my charts. I've created a questions at stack overflow: https://stackoverflow.com/questions/612 ... rk-on-high

Are you able to help?

Thanks in advance!
JT

[jstark]

Bump?

[piotr.m]

Hi,

When you have requested support, a given programmer will address the issue immediately--working with other team members if needed; in the future, please do not duplicate topics on different support channels. If you asked the question on StackOverflow then you'll find the answer there: https://stackoverflow.com/questions/612 ... rk-on-high

Kind Regards