Closed dselgo closed 4 years ago
Hello @dselgo
Here is an example https://webapps.qlik.com/qdt-components/react/index.html#/session-object
Hello @yianni-ververis
I think you misunderstood. I know how to define a QdtViz this way. The following line chart was created by defining a hypercube in options
and passing it as a prop:
The issue is that I am unable to get the table to show when chartType='table'
hey @dselgo did you ever resolve this? QdtViz is just a wrapper around the Qlik Sense Visualization API and just passes the params along, so if it's working with other chart types but not with chart type table, that's kind of odd. Let me know more please.
That is correct. I have been unsuccessful in creating a visualization with chartType='table'
It does however work when creating visualizations of chartType='pivot-table'
. After figuring this out I decided to just use pivot tables instead.
Just an update on this, I did try to make a regular table again and it is still failing. In the Qlik Sense hub the table works fine, but when I copy the chart's properties and pass them as a param to QdtViz, the chart fails. What is different now though is that I am receiving an error message: "Invalid Sort Order in Properties".
I've tried adjusting the qColumnOrder
, columnOrder
, and qInterColumnSortOrder
, but nothing seems to fix it. I don't know why I suddenly started receiving an error rather than a blank table.
Update: I have successfully created a regular table using QdtViz. Not entirely sure what changed, but everything seems to be working fine now.
I'm defining a QdtViz with
chartType = 'table'
in a React app. Instead of using thecols
prop, I'm opting to define my visualization hypercubes usingqHyperCubeDef
in theoptions
prop.The problem is that no matter what I try, I'm unable to get the table to show. All that I get is the following:![image](https://user-images.githubusercontent.com/23660205/39478693-2410e3d4-4d31-11e8-97cd-7749cd7754b3.png)
It is also worth noting that I am able to successfully display other visualizations using
qHyperCubeDef
inoptions
. In fact I am using the exact same hypercube definition in a line chart and it works fine.I am fairly certain there is nothing wrong with my
qHyperCubeDef
object because I have checked it multiple times against the api. I even downloaded a QlikSense extension that allows me to view the properties (inluding the hypercube definition) of an object created in QlikSense, and I copied that exact definition into my app.If I use
cols
instead, the table does show, so I am not without a solution. But it would be helpful to have this functionality so that I can have more control over my visualizations.Below is what I am passing into the
options
prop:{ "qHyperCubeDef": { "qDimensions": [ { "qDef": { "qGrouping": "N", "qFieldDefs": [ "STUDENT.YEAR" ], "qFieldLabels": [ "Year" ], "qSortCriterias": [ { "qSortByNumeric": 1, "qSortByLoadOrder": 1, "qExpression": {} } ], "qNumberPresentations": [], "qActiveField": 0, "autoSort": true, "othersLabel": "Others", "textAlign": { "auto": true, "align": "left" }, "representation": { "type": "text", "urlLabel": "" } }, "qNullSuppression": true, "qOtherTotalSpec": { "qOtherMode": "OTHER_OFF", "qOtherCounted": { "qv": "10" }, "qOtherLimit": { "qv": "0" }, "qOtherLimitMode": "OTHER_GE_LIMIT", "qForceBadValueKeeping": true, "qApplyEvenWhenPossiblyWrongResult": true, "qOtherSortMode": "OTHER_SORT_DESCENDING", "qTotalMode": "TOTAL_OFF", "qReferencedExpression": {} }, "qOtherLabel": { "qv": "Others" }, "qTotalLabel": {}, "qCalcCond": {}, "qAttributeExpressions": [], "qAttributeDimensions": [], "qCalcCondition": { "qCond": {}, "qMsg": {} } }, { "qDef": { "qGrouping": "N", "qFieldDefs": [ "STUDENT.ETHNICITY" ], "qFieldLabels": [ "Ethnicity" ], "qSortCriterias": [ { "qSortByAscii": 1, "qSortByLoadOrder": 1, "qExpression": {} } ], "qNumberPresentations": [], "qActiveField": 0, "autoSort": true, "othersLabel": "Others", "textAlign": { "auto": true, "align": "left" }, "representation": { "type": "text", "urlLabel": "" } }, "qNullSuppression": true, "qOtherTotalSpec": { "qOtherMode": "OTHER_OFF", "qOtherCounted": { "qv": "10" }, "qOtherLimit": { "qv": "0" }, "qOtherLimitMode": "OTHER_GE_LIMIT", "qForceBadValueKeeping": true, "qApplyEvenWhenPossiblyWrongResult": true, "qOtherSortMode": "OTHER_SORT_DESCENDING", "qTotalMode": "TOTAL_OFF", "qReferencedExpression": {} }, "qOtherLabel": { "qv": "Others" }, "qTotalLabel": {}, "qCalcCond": {}, "qAttributeExpressions": [], "qAttributeDimensions": [], "qCalcCondition": { "qCond": {}, "qMsg": {} } }], "qMeasures": [ { "qDef": { "qLabel": "% Met", "qTags": [], "qGrouping": "N", "qDef": "Count({$}STATE_ASSESSMENT.PERFORMANCE_LEVEL_MET_FLAG)/\nCount({$}STATE_ASSESSMENT.PERFORMANCE_LEVEL_MET_FLAG)", "qNumFormat": { "qType": "F", "qnDec": 2, "qUseThou": 0, "qFmt": "0.0%", "qDec": ".", "qThou": "," }, "qAggrFunc": "Expr", "qAccumulate": 0, "qActiveExpression": 0, "qExpressions": [], "autoSort": true, "numFormatFromTemplate": true, "textAlign": { "auto": true, "align": "left" }, "isCustomFormatted": false }, "qSortBy": { "qSortByNumeric": -1, "qSortByLoadOrder": 1, "qExpressions": {} }, "qAttributeExpressions": [], "qAttributeDimensions": [], "qCalcCond": {}, "qCalcCondition": { "qCond": {}, "qMsg": {} } }], "qInterColumnSortOrder": [0,1,2], "qSuppressMissing": true, "qInitialDataFetch": [], "qReductionMode": "N", "qMode": "S", "qPseudoDimPos": -1, "qNoOfLeftDims": -1, "qMaxStackedCells": 5000, "qCalcCond": {}, "qTitle": {}, "qCalcCondition": { "qCond": {}, "qMsg": {} }, "columnOrder": [0,1,2], "columnWidths": [-1,-1,-1], "qLayoutExclude": { "qHyperCubeDef": { "qDimensions": [], "qMeasures": [], "qInterColumnSortOrder": [], "qInitialDataFetch": [], "qReductionMode": "N", "qMode": "S", "qPseudoDimPos": -1, "qNoOfLeftDims": -1, "qMaxStackedCells": 5000, "qCalcCond": {}, "qTitle": {}, "qCalcCondition": { "qCond": {}, "qMsg": {} } } } }, "showTitles": true, "title": "", "subtitle": "", "footnote": "", "showDetails": false, "totals": { "show": true, "position": "noTotals", "label": "Totals" }, "scrolling": { "keepFirstColumnInView": false }, "multiline": { "wrapTextInHeaders": true, "wrapTextInCells": true } }