Skip to main content
Announcements
Qlik Connect 2024! Seize endless possibilities! LEARN MORE
cancel
Showing results for 
Search instead for 
Did you mean: 
hkung
Contributor
Contributor

Capabilities API - barGrouping error message.

I have a bar-chart visualization that is grouped as 'stacked'. 
In qliks data exploration menu, it seems I can click on Group and the visualization will recategorize itself. 
Trying to mimic the same behaviour with `<qlik-visual-web-component>` and the Capability API.

vis.setOptions({
  barGroupings: { grouping: 'grouped' }
});


This code is working when I go from 'grouped' to 'stacked', so I don't believe there is anything wrong with how I am using the API. 

I get this error from the qlik library when selecting 'grouped'

react_devtools_backend.js:2655 TypeError: Cannot read properties of undefined (reading '0')
at sn-bar-chart.241c50021f55ee709bb1.js:2:324129
at Object.itemOffset (sn-bar-chart.241c50021f55ee709bb1.js:2:324250)
at area (sn-bar-chart.241c50021f55ee709bb1.js:2:324575)
at Object.getArea (sn-bar-chart.241c50021f55ee709bb1.js:2:327577)
at Object.initialize (sn-bar-chart.241c50021f55ee709bb1.js:2:329911)
at Object.initialize (sn-bar-chart.241c50021f55ee709bb1.js:2:333255)
at x (sn-bar-chart.241c50021f55ee709bb1.js:2:563718)
at Array.<anonymous> (sn-bar-chart.241c50021f55ee709bb1.js:2:567013)
at 5698.e8619504c5dfffdf795a.js:2:195916
at Array.forEach (<anonymous>)


Is there something else I am missing?



Labels (3)
1 Solution

Accepted Solutions
NadiaB
Support
Support

Hi @hkung 

If you create a basic mashup from dev-hub do you see the same issue?

From the code above it shows "barGroupings" instead of "barGrouping"

If you are making references to other js files or have extensions that also can cause sometimes problems in Mashups, so best option is to isolate the issue, if we beilieved that setting the property to "grouped" fails, try to recreate the issue on a basic mashup where there are no other things involved and verify the outcome. It is also suggested to create a basic chart 

We have some documentation for barGrouping and some examples:

https://help.qlik.com/en-US/sense-developer/May2021/Subsystems/Mashups/Content/Sense_Mashups/Create/...

https://help.qlik.com/en-US/sense-developer/May2022/Subsystems/APIs/Content/Sense_ClientAPIs/Capabil...

Also keep in mind to adjust the qmode accordingly if you are changing between the both, that information is also mentioned in the first link provided above. 

"qMode": "K"  for stacked 

"qMode": "S" for grouped 

 

vis.setOptions(

{"title": "Sample Chart Stacked",
"qHyperCubeDef": {
"qMode": "K"
},
barGrouping:{grouping: "stacked"}
});

vis.show("QV02");

});

 

Note that I tested with a basic bar chart.

Hope it helps!

 

 

Don't forget to mark as "Solution Accepted" the comment that resolves the question/issue. #ngm

View solution in original post

1 Reply
NadiaB
Support
Support

Hi @hkung 

If you create a basic mashup from dev-hub do you see the same issue?

From the code above it shows "barGroupings" instead of "barGrouping"

If you are making references to other js files or have extensions that also can cause sometimes problems in Mashups, so best option is to isolate the issue, if we beilieved that setting the property to "grouped" fails, try to recreate the issue on a basic mashup where there are no other things involved and verify the outcome. It is also suggested to create a basic chart 

We have some documentation for barGrouping and some examples:

https://help.qlik.com/en-US/sense-developer/May2021/Subsystems/Mashups/Content/Sense_Mashups/Create/...

https://help.qlik.com/en-US/sense-developer/May2022/Subsystems/APIs/Content/Sense_ClientAPIs/Capabil...

Also keep in mind to adjust the qmode accordingly if you are changing between the both, that information is also mentioned in the first link provided above. 

"qMode": "K"  for stacked 

"qMode": "S" for grouped 

 

vis.setOptions(

{"title": "Sample Chart Stacked",
"qHyperCubeDef": {
"qMode": "K"
},
barGrouping:{grouping: "stacked"}
});

vis.show("QV02");

});

 

Note that I tested with a basic bar chart.

Hope it helps!

 

 

Don't forget to mark as "Solution Accepted" the comment that resolves the question/issue. #ngm