Creating waterfall charts
Note: Where possible, use qlik-embed and qlik/api rather than this framework.
This section describes how to create waterfall charts with the Visualization API.
Creating a basic waterfall chart
In this example, you will create a basic waterfall chart containing three measures, with a custom title and color legend switched off.
-
Create the chart.
Create the container for the chart. The visualization type is
waterfallchart.app.visualization.create( 'waterfallchart', [], {} ) -
Define the first measure.
Define the first measure as a column. The first measure is using the measure operation Add:
"valueType": "NORMAL".[ { "qDef": { "qLabel": "Expected", "qDef": "Avg(ExpPutts)", "valueType": "NORMAL" } } ] -
Define the second measure.
Define the second measure as a column. It is using the measure operation Subtract:
"valueType": "INVERSE".[ { "qDef": { "qLabel": "Expected", "qDef": "Avg(ExpPutts)", "valueType": "NORMAL" } }, { "qDef": { "qLabel": "Actual", "qDef": "Avg(Putts)", "valueType": "INVERSE" } } ] -
Define the third measure.
Define the third measure as a column. The first measure is using the measure operation Subtotals:
"valueType": "SUBTOTAL".[ { "qDef": { "qLabel": "Expected", "qDef": "Avg(ExpPutts)", "valueType": "NORMAL" } }, { "qDef": { "qLabel": "Actual", "qDef": "Avg(Putts)", "valueType": "INVERSE" } }, { "qDef": { "qLabel": "Shots gained or lost", "qDef": "Avg(ExpPutts-Putts)", "valueType": "SUBTOTAL" } } ] -
Define the title.
Then add a custom title and switch off the legend in the options.
{ "showTitles": true, "title": "Shots gained or lost putting", "legend": { "show": false } }
Result
Complete code example: Waterfall chart
-
Visualization API
const config = { host: '<TENANT_URL>', //for example, 'abc.us.example.com' prefix: '/', port: 443, isSecure: true, webIntegrationId: '<WEB_INTEGRATION_ID>' }; require.config({ baseUrl: `https://${config.host}/resources`, webIntegrationId: config.webIntegrationId }); require(["js/qlik"], (qlik) => { qlik.on('error', (error) => console.error(error)); const app = qlik.openApp('<APP_ID>', config); app.visualization.create( 'waterfallchart', [ { "qDef": { "qLabel": "Expected", "qDef": "Avg(ExpPutts)", "valueType": "NORMAL" } }, { "qDef": { "qLabel": "Actual", "qDef": "Avg(Putts)", "valueType": "INVERSE" } }, { "qDef": { "qLabel": "Shots gained or lost", "qDef": "Avg(ExpPutts-Putts)", "valueType": "SUBTOTAL" } } ], { "showTitles": true, "title": "Shots gained or lost putting", "legend": { "show": false } } ).then((vis)=>{ vis.show("QV01"); }); });
Defining number formatting and grid line spacing
In this example, the number formatting is changed to always display two decimals and the grid line spacing has been set to narrow.
-
Set the number formatting.
Change the number formatting for all three measures in the columns:
"qNumFormat": { "qType": "F", "qnDec": 2, "qUseThou": 0, "qFmt": "#,##0.00", "qDec": ".", "qThou": "," } -
Set the grid line spacing.
Then specify the grid line spacing in the options:
"gridlines": { "auto":false, "spacing": 3 }, where 3 means narrow.{ "showTitles": true, "title": "Shots gained or lost putting", "gridlines": { "auto": false, "spacing": 3 }, "legend": { "show": false } }
Result
Example waterfall chart with modified number formats and grid spacing
Complete code example: Waterfall chart with modified number formats and grid spacing
-
Visualization API
const config = { host: '<TENANT_URL>', //for example, 'abc.us.example.com' prefix: '/', port: 443, isSecure: true, webIntegrationId: '<WEB_INTEGRATION_ID>' }; require.config({ baseUrl: `https://${config.host}/resources`, webIntegrationId: config.webIntegrationId }); require(["js/qlik"], (qlik) => { qlik.on('error', (error) => console.error(error)); const app = qlik.openApp('<APP_ID>', config); app.visualization.create( 'waterfallchart', [ { "qDef": { "qLabel": "Expected", "qDef": "Avg(ExpPutts)", "valueType": "NORMAL", "qNumFormat": { "qType": "F", "qnDec": 2, "qUseThou": 0, "qFmt": "#,##0.00", "qDec": ".", "qThou": "," } } }, { "qDef": { "qLabel": "Actual", "qDef": "Avg(Putts)", "valueType": "INVERSE", "qNumFormat": { "qType": "F", "qnDec": 2, "qUseThou": 0, "qFmt": "#,##0.00", "qDec": ".", "qThou": "," } } }, { "qDef": { "qLabel": "Shots gained or lost", "qDef": "Avg(ExpPutts-Putts)", "valueType": "SUBTOTAL", "qNumFormat": { "qType": "F", "qnDec": 2, "qUseThou": 0, "qFmt": "#,##0.00", "qDec": ".", "qThou": "," } } } ], { "showTitles": true, "title": "Shots gained or lost putting", "gridlines": { "auto": false, "spacing": 3 }, "legend": { "show": false, "dock": "auto" } } ).then((vis)=>{ vis.show("QV01"); }); });
Using custom colors
You can set the presentation color for the different measure operations: Positive value color, Negative value color, and Subtotal color.
The following colors are being used in this example:
- Positive value color:
#91c26a - Negative value color:
#f8981d - Subtotal color:
#52a2cc
-
Define the colors.
The colors are defined in the color object. Switch off auto coloring:
"auto": false. Then add a definition for the positive value color:"positiveValue": { "paletteColor": { "index": -1, "color": "#91c26a" }. Add the definition for the negative value color:"negativeValue":{ "paletteColor": { "index": 9, "color": "#f8981d" } }. Finally, define the subtotal color:"subtotal": { "paletteColor": { "index": -1, "color":"#52a2cc" } }."color": { "auto": false, "positiveValue": { "paletteColor": { "index": -1, "color": "#91c26a" } }, "negativeValue": { "paletteColor": { "index": 9, "color": "#f8981d" } }, "subtotal": { "paletteColor": { "index": -1, "color": "#52a2cc" } } }
Result
Complete code example: Waterfall chart with custom color modification
-
Visualization API
const config = { host: '<TENANT_URL>', //for example, 'abc.us.example.com' prefix: '/', port: 443, isSecure: true, webIntegrationId: '<WEB_INTEGRATION_ID>' }; require.config({ baseUrl: `https://${config.host}/resources`, webIntegrationId: config.webIntegrationId }); require(["js/qlik"], (qlik) => { qlik.on('error', (error) => console.error(error)); const app = qlik.openApp('<APP_ID>', config); app.visualization.create( 'waterfallchart', [ { "qDef": { "qLabel": "Expected", "qDef": "Avg(ExpPutts)", "valueType": "NORMAL", "qNumFormat": { "qType": "F", "qnDec": 2, "qUseThou": 0, "qFmt": "#,##0.00", "qDec": ".", "qThou": "," } } }, { "qDef": { "qLabel": "Actual", "qDef": "Avg(Putts)", "valueType": "INVERSE", "qNumFormat": { "qType": "F", "qnDec": 2, "qUseThou": 0, "qFmt": "#,##0.00", "qDec": ".", "qThou": "," } } }, { "qDef": { "qLabel": "Shots gained or lost", "qDef": "Avg(ExpPutts-Putts)", "valueType": "SUBTOTAL", "qNumFormat": { "qType": "F", "qnDec": 2, "qUseThou": 0, "qFmt": "#,##0.00", "qDec": ".", "qThou": "," } } } ], { "showTitles": true, "title": "Shots gained or lost putting", "gridlines": { "auto": false, "spacing": 3 }, "color": { "auto": false, "positiveValue": { "paletteColor": { "index": -1, "color": "#91c26a" } }, "negativeValue": { "paletteColor": { "index": 9, "color": "#f8981d" } }, "subtotal": { "paletteColor": { "index": -1, "color": "#52a2cc" } } }, "legend": { "show": false, "dock": "auto" } } ).then((vis)=>{ vis.show("QV01"); }); });
Dimension and measure axis settings
In this example, you will make changes to how the X and Y axes are presented.
-
Configure X axis settings.
X-axis settings are set in the
dimensionAxisobject.Set to display labels only on the X-axis:
"show": "labels". State that the labels should always be horizontally displayed:"label": "horizontal", and positioned at the top of the visualization:"dock": "far"."dimensionAxis": { "show": "labels", "label": "horizontal", "dock": "far" } -
Configure Y axis settings.
Y-axis settings are set in the
measureAxisobject.For the Y-axis, also set to display labels only:
"show": "labels". Then set narrow scaling of the axis:"spacing": 0.5, where 0.5 means narrow. Disable auto range to define a custom value range for the Y-axis:"autoMinMax":false. Then set the range mode:"minMax": "minMax", and define the minimum and maximum values:"min": -0.5, "max": 2."measureAxis": { "show": "labels", "spacing": 0.5, "autoMinMax": false, "minMax": "minMax", "min": -0.5, "max": 2 }
Result
Note that the label of the third measure has been changed to SGLP in the following example.
Complete code example: Waterfall chart with custom dimension and axis settings
-
Visualization API
const config = { host: '<TENANT_URL>', //for example, 'abc.us.example.com' prefix: '/', port: 443, isSecure: true, webIntegrationId: '<WEB_INTEGRATION_ID>' }; require.config({ baseUrl: `https://${config.host}/resources`, webIntegrationId: config.webIntegrationId }); require(["js/qlik"], (qlik) => { qlik.on('error', (error) => console.error(error)); const app = qlik.openApp('<APP_ID>', config); app.visualization.create( 'waterfallchart', [ { "qDef": { "qLabel": "Expected", "qDef": "Avg(ExpPutts)", "valueType": "NORMAL", "qNumFormat": { "qType": "F", "qnDec": 2, "qUseThou": 0, "qFmt": "#,##0.00", "qDec": ".", "qThou": "," } } }, { "qDef": { "qLabel": "Actual", "qDef": "Avg(Putts)", "valueType": "INVERSE", "qNumFormat": { "qType": "F", "qnDec": 2, "qUseThou": 0, "qFmt": "#,##0.00", "qDec": ".", "qThou": "," } } }, { "qDef": { "qLabel": "SGLP", "qDef": "Avg(ExpPutts-Putts)", "valueType": "SUBTOTAL", "qNumFormat": { "qType": "F", "qnDec": 2, "qUseThou": 0, "qFmt": "#,##0.00", "qDec": ".", "qThou": "," } } } ], { "showTitles": true, "title": "Shots gained or lost putting", "gridlines": { "auto": false, "spacing": 3 }, "color": { "auto": false, "positiveValue": { "paletteColor": { "index": -1, "color": "#91c26a" } }, "negativeValue": { "paletteColor": { "index": 9, "color": "#f8981d" } }, "subtotal": { "paletteColor": { "index": -1, "color": "#52a2cc" } } }, "legend": { "show": false, "dock": "auto" }, "measureAxis": { "show": "labels", "spacing": 0.5, "autoMinMax": false, "minMax": "minMax", "min": -0.5, "max": 2 }, "dimensionAxis": { "show": "labels", "label": "horizontal", "dock": "far" } } ).then((vis)=>{ vis.show("QV01"); }); });