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.
app.visualization.create('linechart',['Month', '=Sum([Sales Margin Amount])'])
.then(function(vis){
vis.show("QV01");
});
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!
.png "Former Employee"){kind=icon}
