Sort the bar values in a Bar Chart of eCharts Panel from max to min numbers

[alejandroguida]

Hi everyone,

Has anyone been able to sort the values in a bar chart eCharts dashboard?

I’m using the Infinity plugin, getting information of MITRE Tactics from an API, grouping and summarizing by tactic, and when I try to sort the values obtained using a “sort by” transformation, in a table it shows fine, but in the eCharts panel the panel is empty (without sorting I can perfectly see the values in the bar chart eChart panel, but with sorting the panel turns empty).

Table view:

Bar Chart eCharts Panel without “sort by” transformation:

Bar Chart eCharts Panel with "sort by"transformation:

I tried to use the .sort function inside eCharts Panel code, but with no luck.

Does anybody know how to do it?

Thanks in advance.
Regards,
Alejandro

[mikhailvolkov]

@alejandroguida Take a look at the screenshot.

Some transformations are changing data frames. You can display the returned data using console.warn(data) and then check whats inside.

The values are in the values.order instead of values.buffer, which we provide in our examples.

[alejandroguida]

Hi @mikhailvolkov , thanks for your explanation.

My question then is how can I sort the bars of this new returned data from max to min (I tried again on the code of the plugin with sort function, on the data series and on each axis, with no luck), and additionally and more important, how can I add/obtain again the original corresponding labels (in my case the names of MITRE Tactics on X, and the total number of them on each bar on Y) in the axes,

At the end, what I need is to get exactly the same bar chart that I obtain with the original bar chart plugin of Grafana:

Thanks in advance for your help.
Regards,
Alejandro

[mikhailvolkov]

@alejandroguida I did not realize, that order returns the positions of the elements when elements are moved to source.buffer.

Here is an example:

1. Set array with order identifiers.
2. Set array with values.
3. Get ordered values for each array.

Let me know if it works for you.

let names = [];
let amounts = [];
data.series.map((s) => {
  names = s.fields.find((f) => f.name === 'Name').values.source.buffer;
  namesOrder = s.fields.find((f) => f.name === 'Name').values.order;
  amounts = s.fields.find((f) => f.name === 'Amount').values.source.buffer;
  amountsOrder = s.fields.find((f) => f.name === 'Amount').values.order;
});

const namesOrdered = namesOrder.map((i) => names[i])
const amountsOrdered = amountsOrder.map((i) => amounts[i])

return {
  grid: {
    bottom: "3%",
    containLabel: true,
    left: "3%",
    right: "4%",
    top: "4%",
  },
  tooltip: {},
  legend: {
    data: [replaceVariables('$var')]
  },
  xAxis: {
    data: namesOrdered
  },
  yAxis: {},
  toolbox: { feature: { restore: {} } },
  series: [
    {
      name: replaceVariables('$var'),
      type: 'bar',
      data: amountsOrdered
    }
  ]
};

[alejandroguida]

Amazing @mikhailvolkov , worked perfect:

Thanks for all your help.
Regards,
Alejandro

[alejandroguida]

A tip for anybody that read this post and is using Grafana 10 now:

The values.order array is not exist anymore in Grafana 10 when you use “sort” transformation. Now Grafana return directly the values sorted, so you don´t need to create namesOrder and amountsOrder series like the example, with names and amounts series is enough to get the result sorted in the Apache Echarts graph.

Regards,
Alejandro

[mikhailvolkov]

@alejandroguida That’s great! Thank you for sharing.