# Heatmap with ordered bucket

**URL:** <https://forum.opensearch.org/t/heatmap-with-ordered-bucket/22077>\
**Category:** OpenSearch Dashboards\
**Created:** [October 24, 2024, 12:51pm UTC](https://forum.opensearch.org/t/heatmap-with-ordered-bucket/22077 "2024-10-24T12:51:32Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![PrinceActa](https://avatars.discourse-cdn.com/v4/letter/p/59ef9b/32.png) [@PrinceActa](https://forum.opensearch.org/u/PrinceActa)\
**Post date:** [October 24, 2024, 12:51pm UTC](https://forum.opensearch.org/t/heatmap-with-ordered-bucket/22077/1 "2024-10-24T12:51:32Z")

</div>

**Versions** (relevant - OpenSearch/Dashboard/Server OS/Browser):  
2.17.1

**Describe the issue** :

Hello,

Build a heatmap chart using 2 histograms to agg the data in the buckets on X and Y-axis in order to have a fixed matrix 4x4.

By default it gives me:  
[1,4][2,4][3,4][4,4]  
[1,3][2,3][3,3][4,3]  
[1,2][2,2][3,2][4,2]  
[1,1][2,1][3,1][4,1]

However, in real life these coordinates represent the real position of hardware ([X,Y]):  
[4,1] [3,1] [2,1] [1,1]  
[4,2] [3,2] [2,2] [1,2]  
[4,3] [3,3] [2,3] [1,3]  
[4,4] [3,4] [2,4] [1,4]

So to transform the default matrix I use the advanced field json:  
{“order”": { “\_key”: “desc” } } on both x-axis and y-axis to force the transformation but only the y-axis seems to work:

[1,1][2,1][3,1][4,1]  
[1,2][2,2][3,2][4,2]  
[1,3][2,3][3,3][4,3]  
[1,4][2,4][3,4][4,4]

Any ideas?  
Thanks

---

<div class="post-metadata">

**Author:** ![pablo](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.opensearch.org/pablo/32/10363_2.png) [@pablo](https://forum.opensearch.org/u/pablo)\
**Post date:** [October 31, 2024, 10:31pm UTC](https://forum.opensearch.org/t/heatmap-with-ordered-bucket/22077/2 "2024-10-31T22:31:26Z")

</div>

@PrinceActa I’ve repro your issue in 2.17.1, 2.11.0, 2.4.0 and 7.10.2 (OpenSearch fork).  
The heatmap was always working like that.

I’ve noticed that you’ve created a GitHub issue. I’ll share the link here for traceability.

> <https://github.com/opensearch-project/OpenSearch-Dashboards/issues/8711>
>
> \*\*Describe the bug\*\*
> 
> Histogram charts doesn't respect the order asked when bu…ckets are along the X-axis
> 
> \*\*To Reproduce\*\*
> Steps to reproduce the behavior:
> 
> In real life I work with inversed coordinates that's why I'm here but I've found a simple way to reproduce the behavior on playground server. Forget the fact that the x-Axis is time in this example and timeline goes normaly from left to right. It's only to illustrate!
> 
> 1. Go to opensearch playground site (https://playground.opensearch.org/)
> 2. Go to \`(Heatmap) Source vs OS\` vizualisation 
> 3. Go to the Data-\>Buckets-\>X-axis and change:
> - sub aggregation: Histogram
> - Field: Hour\_of\_Day
> - Show empty buckets
> - Extend bounds (min: 0, max:24)
> - Advanced: \`{"order": { "\_key": "desc" }}\`
> 4. Update
> 
> \*\*Expected behavior\*\*
> The X-axis should be reversed: starting on left with 24 and ending with 0 on right
> 
> \*\*OpenSearch Version\*\*
> Last 2.17.1, I suppose
> 
> \*\*Dashboards Version\*\*
> Last 2.17.1, I suppose
> 
> \*\*Plugins\*\*
> you know better than me
> 
> \*\*Screenshots\*\*
> 
> If applicable, add screenshots to help explain your problem.
> 
> \*\*Host/Environment (please complete the following information):\*\*
> - OS: Ubuntu
> - Browser and version: firefox
> 
> \*\*Additional context\*\*
> 
> I'm not an expert in js and all the internal stuffs of opensearch code. I give it a try with my poor english :)
> 
> In the file \`src/plugins/vis\_type\_vislib/public/vislib/components/zero\_injection/ordered\_x\_keys.js\`, the X-axis seems to be re-sorted even if the histogram have an explicit orderby clause during the query:
> \`\`\`
> .sortBy(function (d) {
> if (d\[1\].isDate || d\[1\].isOrdered) {
> return +d\[0\];
> }
> return orderBucketsBySum ? -d\[1\].sum : d\[1\].index;
> })
> \`\`\`
> 
> In the file \`src/plugins/vis\_type\_vislib/public/vislib/components/zero\_injection/uniq\_keys.js\`, the isDate and isOrdered const are defined:
> \`\`\`
> const isDate = charts.every((chart) =\> {
> return chart.ordered && chart.ordered.date;
> });
> 
> const isOrdered = charts.every((chart) =\> {
> return chart.ordered;
> });
> \`\`\`
> 
> In the file \`src/plugins/discover/public/application/components/chart/utils/point\_series.ts\`:
> \`\`\`
> chart.ordered = {
> date: true,
> interval,
> intervalOpenSearchUnit,
> intervalOpenSearchValue,
> min: bounds.min,
> max: bounds.max,
> };
> \`\`\`
> If the \`date\` field is always \`true\`, the statement in the \`sortBy\` function could be only \`if d\[1\].isOrdered\` but... Why is \`date\` always \`true\`? Pure speculation, but for me it should be \`true\` for \`date histogram\` agg and \`false\` for "regular" \`histogram\` agg perhaps. So the statement should be \`if d\[1\].isDate\` only. Nevertheless I don't have all the keys to understand now but it's a bit strange this \`sortBy\`. Are the \`histogram\` and \`date histogram\` not yet sorted by default? so why we have to reorder the response? It's my first time inside the src... so... I'm missing something probably.

---

<div class="post-metadata">

**Author:** ![PrinceActa](https://avatars.discourse-cdn.com/v4/letter/p/59ef9b/32.png) [@PrinceActa](https://forum.opensearch.org/u/PrinceActa)\
**Post date:** [November 6, 2024, 9:05am UTC](https://forum.opensearch.org/t/heatmap-with-ordered-bucket/22077/3 "2024-11-06T09:05:40Z")

</div>

> [@](#):
>
> The heatmap was always working like that.

Yes but (for me) it isn’t logical so yes I’ve created a GitHub issue 😉