In this guide, we'll walk you through creating a simple Column chart using Luzmo's Flex SDK . The Flex SDK facilitates programmatically creating Luzmo widgets directly inside your codebase, without having to create a Luzmo dashboard to contain them! This allows your application to generate and alter widgets in a flexible (😉) way, including where and how you include them in your application, how they interact with each other (and with your application), etc.
Before being able to use the Flex SDK in your application, you must install and import the frontend component as explained here .
Note: If you want to use your own data instead of the public dataset used below, it is important that the Flex SDK is included in your Luzmo license (you can reach out to your contact person at Luzmo or mail to support@luzmo.com for more info).
Besides that, you may need to set the appServer and apiHost to your Luzmo tenancy or VPC (defaults to EU VPC: https://app.luzmo.com and https://api.luzmo.com ). Last but not least, ensure the authKey and authToken properties are set to a valid Embed key and token with "can use" access to the datasets you wish to query in a Flex item. These properties are omitted in the examples below for simplicity.
To start, specify the type of widget in the type prop. All available widget types can be found here .
<luzmo-embed-viz-item
type="column-chart"
></luzmo-embed-viz-item> Use the slots prop to query data and assign specific columns from your Luzmo datasets to widget slots. For a Column chart, the x-axis slot is used to group data, and the measure slot sets up the aggregated measure to be displayed. If desired, you could also use the legend slot to group data by a second dimension.
Different widgets have different slots; a full reference can be found here .
<luzmo-embed-viz-item
type="column-chart"
slots="[...]"
></luzmo-embed-viz-item> The x-axis slot groups data based on specific columns (e.g., country) and configures data points on the horizontal axis. Depending on the column type, you can control options such as binning, datetime formatting, and number of decimals (see e.g. the Column chart slots documentation ).
{
"name": "x-axis",
"content": [
{
"label": {
"en": "Product"
},
"datasetId": "5047ccf3-b7ba-4ad7-a1d8-0c48e07eda9f",
"columnId": "0f9b5cb0-0354-4147-b73c-463d26da8c75",
"type": "hierarchy"
}
]
} A Column chart with only a x-axis slot will default to counting all rows as an aggregated result. Use the measure slot to control the aggregation performed on one or more columns. For datetime and hierarchy columns, you can use either count or distinctcount ; for numeric columns, you can also use aggregation functions like sum , average , min , etc. Here you can also control data formatting, like percentage formatting, thousands&decimal separators, number of decimals, etc. (see e.g. the Column chart slots documentation ).
A Column chart even allows for multiple measures to be displayed side-by-side, grouped by the x-axis column value(s). Note that in the case of multiple measures, you cannot use the legend slot.
{
"name": "measure",
"content": [
{
"label": {
"en": "Average Volume"
},
"datasetId": "5047ccf3-b7ba-4ad7-a1d8-0c48e07eda9f",
"columnId": "8e4d004e-8c16-44e2-995f-f5b797354efe",
"aggregationFunc": "average",
"type": "numeric",
"format": ".0f"
}
]
} A Column chart allows grouping on a second dimension, on top of the x-axis slot, by setting up the legend slot as well. Similarly to the x-axis slot, you can control options such as binning, datetime formatting, and number of decimals (see e.g. the Column chart slots documentation ).
Note that if you're using multiple measures, you cannot use the legend slot.
{
"name": "legend",
"content": [
{
"label": {
"en": "Location"
},
"datasetId": "5047ccf3-b7ba-4ad7-a1d8-0c48e07eda9f",
"columnId": "f44abf72-dfb4-4ed7-a5a2-6eb8cfc4aede",
"type": "hierarchy"
}
]
} Customize the widget further using the options prop. Configure a variety of settings based on the widget type. All available options are detailed here .
<luzmo-embed-viz-item
type="column-chart"
slots="[...]"
options="{...}"
></luzmo-embed-viz-item>{
"title": "My Column chart title"
}You can find the theme ID of a custom theme in your organization via the Theme API resource .
You can also set the theme to a custom theme object as shown in this example .
{
"theme": {
"id": "default_dark"
}
}{
"legend": {
"position": "bottom",
"type": "list"
}
}In here we're also setting the Column chart's mode to "stacked" and showing a percentage of total in each bar section. Note that these options only apply to column and bar charts; for all available options you can specify for the Column chart, take a look here .
{
"mode": "stacked",
"bars": {
"label": "percentage"
}
} To apply filters and limit the displayed data, use the filters prop. Specify combinations of "and" and "or" filter groups for desired logic. All details related to the filtering syntax can be found here .
<luzmo-embed-viz-item
type="column-chart"
slots="[...]"
options="{...}"
filters="[...]"
></luzmo-embed-viz-item>[
{
"condition": "and",
"filters": [
{
"expression": "? in ?",
"parameters": [
{
"columnId": "0f9b5cb0-0354-4147-b73c-463d26da8c75",
"datasetId": "5047ccf3-b7ba-4ad7-a1d8-0c48e07eda9f",
"level": 1
},
["High Heels", "Boat Shoes"]
]
},
{
"expression": "? in ?",
"parameters": [
{
"columnId": "f44abf72-dfb4-4ed7-a5a2-6eb8cfc4aede",
"datasetId": "5047ccf3-b7ba-4ad7-a1d8-0c48e07eda9f",
"level": 1
},
["Earth", "Mars", "Mercury", "Moon"]
]
}
]
}
] Note: To securely control access to multi-tenant data for your application users, make sure to use Embed tokens to manage this access (see here ). The filters prop should not be considered a secure implementation of multi-tenant filtering, as these filters are applied client-side (i.e. the client can change these filters) while token properties are always evaluated server-side!
Out-of-the-box, most Flex items support interactively filtering other Flex items that are querying the same or directly linked datasets. To allow interactivity filters from one Flex item to others, make sure first to assign unique contextId prop identifiers to each Luzmo element. You can then use the canFilter prop on a Flex item to control which other Flex items should be filtered by its interactivity selections:
Use "all" as value for canFilter to filter all other Flex items in the page.
<luzmo-embed-viz-item
type="column-chart"
slots="[...]"
options="{...}"
filters="[...]"
contextId="unique_id_1"
canFilter="all"
></luzmo-embed-viz-item>
<luzmo-embed-viz-item
type="number-chart"
slots="[...]"
contextId="unique_id_2"
></luzmo-embed-viz-item>
<luzmo-embed-viz-item
type="number-chart"
slots="[...]"
contextId="unique_id_3"
></luzmo-embed-viz-item> In case your Flex item should filter only a specific set of other Flex items, you can specify a list of contextIds as value for canFilter ; this ensures any interactivity filters from this widget will only filter the Flex items with those contextIds.
<luzmo-embed-viz-item
type="column-chart"
slots="[...]"
options="{...}"
filters="[...]"
contextId="unique_id_1"
canFilter="all"
></luzmo-embed-viz-item>
<luzmo-embed-viz-item
type="number-chart"
slots="[...]"
contextId="unique_id_2"
></luzmo-embed-viz-item>
<luzmo-embed-viz-item
type="number-chart"
slots="[...]"
contextId="unique_id_3"
></luzmo-embed-viz-item>