Creating a PixelPerfect chart with automated series splitting

With series templates, you can create native PixelPerfect charts where the app data is automatically split into different series. This method is useful when you do not need to manually split the series yourself.

Requirements

Before you start creating a native PixelPerfect chart, you need to have a chart in your Qlik Sense app with a source table that adapts well to what you want to visualize. In the Qlik Sense chart, select the appropriate dimensions and measures to filter the data sufficiently from the app's data model.

The data you use for a native PixelPerfect chart has to be added as a table data binding. To create this type of data binding, use the Field List menu and add an item under Tables.

Creating a detailed PixelPerfect chart

This process is similar to creating a chart with a user-defined series, but there are key differences. Notably, you use the same types of data bindings, but these are connected using a series template rather than by adding a series manually.

Do the following:

1. Open the Field List menu available from the right-side panel in the designer.

2. Click the plus icon next to Tables.

3. From the available sheets, select the Qlik Sense chart you want to add as a table. Click the icon next to it.

   The data binding is added.

4. From the toolbox panel on the right side of the designer, drag a Chart onto the design surface.

5. Select the blank chart and then open the Properties menu from the right side of the designer.

6. Under Chart Tasks > Data Member in the menu, select the table you added as a data binding.

7. Inside the chart, click Run Designer....

   The Properties for the chart are shown on the right side.

8. Select a field for Series Data Member. This sets the primary grouping for the chart. PixelPerfect automatically creates a new series for each distinct value in the field.

9. Expand Series Template.

10. To choose a chart type, select a value for View. The default is Bar.

11. For Argument Data Member, use the drop down menu to select a field containing the secondary data groupings.

12. Expand Value Data Members. For Value, select a field containing the variable metrics you want to visualize. For certain advanced chart types (for example, Candle Stick chart), you might need to select more than one Value field.

    Tip noteIn this context, selecting the Value is similar to selecting a measure in Qlik Sense.

13. When using a series template, it is often required to add summary functions to fulfill the aggregations specified in the chart. You need to set the summary options. Depending on the type of data you are using for your groupings, this might be labeled as one of the following:

    • Qualitative Summary Options

    • Numeric Summary Options

    • Date-Time Summary Options

    Expand the section.

14. Expand Summary Function.

15. Select a Function to use (for example, SUM).

16. Select an Argument. This is usually the variable metric your chart is meant to visualize (for example, sales).

Additional tips for configuring the chart

The above workflow shows you how to create a native chart with automatically generated series, and connect it to Qlik Sense data sources. Here are some extra tips to help you make the most out of these charts.

Labels and legends

You might need to configure labels and legends so that they appear correctly.

Changing the text

You can change the text shown in the labels and legend. You can do this by entering specific placeholders for the following properties:

• Labels: Open the Properties for the series, and add a placeholder to Label > Text Pattern.

• Legend: Open the Properties for the series, and add a placeholder to Legend Text Pattern.

The placeholders instruct PixelPerfect to generate dynamic text with commonly needed values. For a chart with autogenerated series, the following are commonly used placeholders:

• {S}

• {A}

For a full list of placeholders you can use, see Text definition placeholders for native PixelPerfect charts.

Turning labels and legends off

If your chart has a lot of data, it is often preferred to turn labels off (they are turned on by default). To turn off labels for the chart, change the Labels Visibility setting in the Properties to False.

With auto-generated series, the chart legend can play a key role to help distinguish each series in the chart. However, if you want to turn the legend off, expand Legend and set Visibility to False.

Example - Creating a multi-bar chart with auto-split series

Refer to the example app sources here: Example materials - In-app reporting. Upload the app and data files into a space, and then reload the app. You are ready to complete the example.

This example shows you how to create a bar chart with automatically generated series for each value in a specific dimension.

Part 1: Add data binding and chart

Do the following:

1. Create a new PixelPerfect template.

2. Open the Field List menu available from the right-side panel in the designer.

   

3. Click the plus icon next to Tables.

4. Expand the Sales Tables sheet, and click the icon next to the Sales Details 2021-2023 chart.

   The data binding is added.

5. From the toolbox panel on the right side of the designer, drag a Chart onto the Detail1 band.

   

Part 2: Connect the chart to data binding

Do the following:

1. Select the blank chart and then open the Properties menu from the right side of the designer.

2. Under Chart Tasks > Data Member in the menu, select the Sales Details 2021-2023 table.

3. Inside the chart, click Run Designer....

   The Properties for the chart are shown on the right side.

4. In the left panel in the Chart Designer, hover over Series and click the plus icon. In the menu, select Bar to create a bar chart series.

   The Properties for the new series are shown on the right side.

5. For Series Data Member, select the Year field.

6. Expand Series Template if not already expanded.

7. For View, leave the chart type as Bar.

8. For Argument Data Member, select Region field.

9. Expand Value Data Members. For Value, select the Sales field.

10. Next ,define the summary function to use. Expand Qualitative Summary Options.

11. Expand Summary Function.

12. For Function, select SUM.

13. For Argument, select the Sales field.

Part 3: Refine the appearance

Finally, we want to hide the labels and arrange the data in descending order along the total sales for each dimension.

Do the following:

1. Still in the Properties in Chart Designer, set Labels Visibility to False.

2. Set Series Points Sorting to Descending.

3. Set Series Points Sorting Key to Value.

4. Add a title to the chart. In the left panel in the Chart Designer, hover over Titles and click the plus icon. Select a title position using the popup menu.

5. In the Properties for the title, enter Yearly Sales By Region for the Text property.

6. Click OK to exit the Chart Designer.

7. Increase the size of the chart and the Detail1 band.

8. In the top right corner, click Save template.

9. Click Preview report. Download the report and open it.