The Visualization API is a cool new API introduced in Qlik Sense 2.2 that allows you to create visualizations right in javascript, removing the need to create visualizations in the Qlik Sense client before they can be used in a mashup.
Here's a simple example, using the "Consumer Goods Sales" app.
This will create a line chart with the one dimension, the "Month" field, and one measure, the expression "=Sum([Sales Margin Amount])". If you try this though, you'll notice that the y-axis label is equal to the expression, and you may want to name the label instead. In this case, we need to use the third, optional, parameter to the Visualization API create() method, which is an options object.
In the options object we can specify a qHyperCubeDef instead of using the second, optional, column parameter to the create() method. We also have to do it this way if we wish to use a custom Dimension or Measure created in the Qlik Sense client, as the column parameter will only accept field names and expressions. Here's an example
app.visualization.create('linechart',[],
{
qHyperCubeDef: {
qDimensions: [
{
qDef: {
qFieldDefs: [
"Month"
]
}
}
],
qMeasures: [
{
qDef: {
qDef: "Sum([Sales Margin Amount])",
qLabel: "Sales Margin"
}
}
],
qInitialDataFetch: [
{
qHeight: 12,
qWidth: 2
}
]
}
})
.then(function(vis){
vis.show("QV01");
});
Notice, we left the column parameter as a blank array. If you try to enter text into the column parameter array in addition to the including the qHyperCubeDef option, you may end up with an error.
You can set quite a few options like above, or you can use the Visualization API setOptions() method, which lets you change options on an already existing object. For instance, if we wanted the chart above to display sales over time instead of sales margin over time, we could update the hypercube with the setOptions() method, like below.
visRef.setOptions({
qHyperCubeDef: {
qDimensions: [
{
qDef: {
qFieldDefs: [
"Month"
]
}
}
],
qMeasures: [
{
qDef: {
qDef: "Sum([Sales Margin Amount])",
qLabel: "Sales Marginffff"
}
}
],
qInitialDataFetch: [
{
qHeight: 12,
qWidth: 2
}
]
}
})
Notice we called the setOptions() method on visRef, which is a reference to the vis object returned in the create() method callback.
This is really just scratching the surface of the possibilities of the Visualization API. Be sure to check it out!
I'm trying to use it as a sample. If I just copy and paste you code that use `create` function and `options` `qHyperCubeDef` parameter it works just fine. But now I want to change type of my chart to straight table with one dimension and one measure (using `table` instead of `linechart`) and it does not work for me.
It says something like: Error, can not show visualization.
Should it work?
When I add same dimension and measure definition into array and pass it as a second parameter of `create` method though - it works just fine again. With `linechart`, 'table'` and 'pivot-table' types.
Ahhh, you bring up an interesting point Vadim, something I hadn't noticed before. Seems that for a table viz, if the second parameter of the create() method (the array of columns) is left blank, then when creating a table there is an error thrown, seemingly related to calculating widths of columns. So it seems if you want to create a table with the viz api, then that second parameter is required, so you'll have to make use of that instead of a hypercube def in the options parameter.
Good to know. I've got to the same conclusion. Important thing is that apparently in that second parameter we can use not only extended (normal) syntax for measures, but extended/normal syntax (based on NxMeasure struct) for dimensions too. So we are probably not constrained with just field names for dimensions in dynamically created tables, but can define Labels, Dimension limits and so on.
Unfortunately it is not in the docs at the moment and examples are too simlpistic to show some semblance of real life scenario (Why would I dynamically create staight table without label on a measure? That would be strange indeed)
The one limit of defining the columns in the column parameter is that updating the hypercube with the setOptions() method doesn't work.
Could still use QS variables for dimension and measure defs to update a column, but not quite as flexible as simply being able to change the entire cube.
But I've tried sequence of setting up the cube with `columns` parameter and consequently updating it with `setOptions` and `qHyperCubeDef` and it worked for me. Maybe by chance.
.png "Former Employee"){kind=icon}