--- source: https://qlik.dev/embed/qlik-embed/quickstart/qlik-embed-charts-on-the-fly-tutorial/ last_updated: 2026-06-11T13:33:06+02:00 --- # Create charts on the fly with analytics/chart In this tutorial, you'll build a web page that embeds a Qlik Sense chart and lets users change the visualization type, dimension, and measure at runtime without saving the object to the app. You'll learn how to configure the qlik-embed component and wire up dropdown controls to trigger dynamic updates. This pattern is known as *charts on the fly*: the chart is defined entirely in the `` tag and exists only for the current browser session. ## Prerequisites - A Qlik Cloud tenant (not Qlik Sense Business). - A [SPA OAuth2 client](https://qlik.dev/authenticate/oauth/create/create-oauth-client-spa/) configured for your web application. - An app ID for a Qlik Sense app that contains the fields and measure expressions you want to visualize. A saved chart object is not required because the chart is created on the fly from the `` definition. However, your app must have a data model with fields and expressions matching the dropdown examples (or you must substitute your own). - Basic familiarity with HTML and JavaScript. ## Variable substitution The sample code uses these placeholder variables. Replace each one with the actual value for your environment. | Variable | Description | | ------------------------- | ------------------------------------------------------------------ | | `` | Your Qlik Cloud tenant URL, for example `tenant.us.qlikcloud.com`. | | `` | The client ID for your SPA OAuth2 client entry. | | `` | The redirect URL registered in your OAuth2 client configuration. | | `` | The unique identifier of the Qlik Sense app to use. | > **Tip:** **Placeholder conventions:** Replace values in angle brackets (``) with > your actual credentials or values. Do not replace square bracket field names like > `[Region]` — these refer to fields in your Qlik app and are part of the Qlik script > syntax. ## Set up the page Create an HTML file and add the qlik-embed script tag to the ``. This script loads the web components and handles authentication against your tenant. ```html ``` > **Note:** The `` tag is recommended. Certain chart types, including KPI, > do not render correctly without it. See the > [UTF-8 character encoding requirement](https://qlik.dev/embed/foundational-knowledge/visualizations/#utf-8-character-encoding-requirement) > for details. ## Add a chart on the fly In the ``, add a `` element configured for `analytics/chart` wrapped in a container with explicit height. Instead of providing an `object-id` that references a saved visualization, set `type`, `dimensions`, and `measures` on the element. ```html
``` Add corresponding CSS to ensure the chart container has explicit dimensions: ```css .chart-container { width: 100%; height: 400px; min-height: 400px; } .chart-container qlik-embed { width: 100%; height: 100%; } ``` - `type`: The Viz on the fly ID for the chart you want to render. See the [visualization support table](https://qlik.dev/embed/foundational-knowledge/visualizations/) for all available IDs. Only chart types that support `analytics/chart` can be used here. - `dimensions`: A JSON array of field names. Wrap each name in square brackets for Qlik script compatibility: `["[FieldName]"]`. - `measures`: A JSON array of expressions, each prefixed with `=`: `["=Sum(Sales)"]`. - Using JavaScript with `JSON.stringify()` handles character escaping automatically, making it easier to work with complex Qlik script expressions. > **Note:** When using inline dimensions and measures, the rendered chart may display the field > or expression definition as the chart label. For example, the x-axis may show > `[Region]` and the y-axis may show `=Sum(Sales)`. This is expected for this basic > on-the-fly definition. ## Add interactive controls Add a control panel preceding the chart that lets the user pick a chart type, dimension, and measure. JavaScript reads the selected values and updates the `` tag's attributes, triggering the component to re-render with the new definition. ### Add the control panel HTML ```html
``` Replace the field names and expressions in the `