# Hoe ik dit heb gemaakt: Dynamische analyse met de lay-out container

Dit voorbeeld laat zien hoe u dynamische, interactieve werkbladinhoud kunt maken met de lay-out container.De lay-out container ondersteunt rasterloos ontwerp en gestapelde visualisaties, waardoor uitgebreide controle over de rangschikking van uw analyse-inhoud mogelijk is. Bovendien kunt u, net als bij andere containerobjecten, dynamisch verschillende informatie presenteren, afhankelijk van diverse voorwaarden, zoals variabele- en selectiestatussen.

Dit voorbeeld laat zien hoe u een lay-out container kunt bouwen om informatie van meerdere diagrammen als een enkel object te presenteren. Enkele algemene ontwerpaanpakken zijn:

* Vergelijkbare objecten symmetrisch rangschikken, en styling gebruiken om verschillende secties van gegevens te onderscheiden.

* Randen verwijderen van individuele objecten binnen de lay-out container, en vervolgens een rand toevoegen rond het gehele object wanneer voltooid.

* Verschillende objecten of gegevens voorwaardelijk weergeven, afhankelijk van gebruikersinteractie—in dit voorbeeld, een staafdiagram waarin de gebruiker details kan tonen of verbergen.

* Samengestelde elementen bouwen die bestaan uit meerdere verschillende objecten die naast elkaar zijn geplaatst—in dit voorbeeld, een interactieve knop die een aan/uit-schakelaar nabootst.

* Meerdere manieren toestaan voor gebruikers om gegevens te selecteren en te filteren wanneer ze deze nader willen bekijken.

Eindresultaat

Eindresultaat

Eindresultaat ![Voltooide lay-out container voor het voorbeeld](https://help.qlik.com/nl-NL/cloud-services/Subsystems/Hub/Content/Resources/Images/ui_example-layout-container-final.png)

## Voorbereidingen

Maak een nieuwe applicatie en plak de [Example load script](https://help.qlik.com/nl-NL/cloud-services/Subsystems/Hub/Content/Sense_Hub/Visualizations/DashboardBundle/layout-container-example.htm#ExampleData) in een nieuwe sectie in de Editor voor laden van gegevens. Laad vervolgens de gegevens.

After loading the data, switch to sheet view.

### Example load script

[](https://help.qlik.com/en-US/cloud-services/Subsystems/Hub/Content/Sense_Hub/Visualizations/DashboardBundle/layout-container-example.htm)

#### Gegevens voor voorbeeld

```
SET DateFormat='M/D/YYYY';

Sales:

Load 

date(Now()-Offset,'MM/DD/YYYY') as [Order Date],

* Inline [

Order ID,Offset,Product Type,Shipment Status,Fulfillment Center,Sales,Late Status,Days Late
1,30,Electronics,Delivered,10036,9950,Not Late,
2,30,Office Supplies,Delivered,10036,4412,Not Late,
3,30,Office Supplies,Delivered,10038,7480,Late,3
4,30,Home Improvement,Delivered,10035,665,Late,4
5,30,Home Improvement,Delivered,10038,594,Not Late,
6,30,Home Improvement,Stalled,10038,8267,Not Late,
7,30,Clothing,Delivered,10035,1014,Not Late,
8,30,Cleaning Products,Delivered,10036,6999,Late,1
9,30,Electronics,Delivered,10036,733,Not Late,
10,29,Office Supplies,Delivered,10036,3487,Not Late,
11,29,Office Supplies,Delivered,10035,7343,Not Late,
12,29,Office Supplies,Delivered,10036,9239,Late,14
13,27,Cleaning Products,Delivered,10037,1463,Not Late,
14,27,Cleaning Products,Stalled,10035,4688,Not Late,
15,27,Home Improvement,Delivered,10038,5539,Late,2
16,27,Clothing,Delivered,10035,8388,Not Late,
17,27,Office Supplies,Delivered,10035,7560,Not Late,
18,27,Office Supplies,Delivered,10035,5738,Not Late,
19,27,Office Supplies,Delivered,10035,5469,Not Late,
20,26,Home Improvement,Delivered,10037,1435,Not Late,
21,26,Office Supplies,Delivered,10036,5962,Late,1
22,26,Clothing,Delivered,10035,4020,Late,7
23,26,Electronics,Delivered,10036,3888,Late,5
24,25,Office Supplies,Delivered,10037,6496,Not Late,
25,25,Clothing,Delivered,10038,4215,Late,11
26,25,Home Improvement,Delivered,10036,1801,Not Late,
27,25,Grocery,Delivered,10036,6471,Not Late,
28,24,Home Improvement,In Transit,10036,4578,Not Late,
29,24,Office Supplies,Cancelled,10037,3493,Not Late,
30,24,Office Supplies,Cancelled,10035,6572,Not Late,
31,24,Electronics,In Transit,10037,6691,Not Late,
32,24,Office Supplies,In Transit,10038,2721,Late,9
33,24,Grocery,In Transit,10035,8300,Not Late,
34,23,Grocery,In Transit,10035,840,Not Late,
35,23,Office Supplies,In Transit,10036,8972,Not Late,
36,23,Cleaning Products,Stalled,10036,9474,Not Late,
37,23,Home Improvement,In Transit,10038,1935,Not Late,
38,23,Office Supplies,In Transit,10036,1748,Not Late,
39,23,Seasonal,In Transit,10037,1948,Not Late,
40,22,Office Supplies,In Transit,10035,3121,Not Late,
41,22,Electronics,In Transit,10036,7377,Not Late,
42,22,Cleaning Products,In Transit,10037,1492,Not Late,
43,22,Office Supplies,Stalled,10037,7801,Late,6
44,22,Office Supplies,In Transit,10035,4663,Not Late,
45,22,Grocery,In Transit,10035,4649,Not Late,
46,21,Seasonal,In Transit,10038,2612,Not Late,
47,20,Clothing,In Transit,10036,8880,Late,4
48,20,Office Supplies,In Transit,10036,1391,Late,8
49,20,Cleaning Products,Cancelled,10037,1307,Not Late,
50,20,Home Improvement,In Transit,10037,6424,Not Late,
51,20,Grocery,In Transit,10035,5051,Not Late,
52,20,Cleaning Products,In Transit,10035,1286,Not Late,
53,19,Cleaning Products,In Transit,10038,8719,Not Late,
54,19,Office Supplies,In Transit,10037,8576,Not Late,
55,19,Seasonal,In Transit,10038,2866,Not Late,
56,19,Electronics,Stalled,10035,5186,Late,3
57,19,Clothing,In Transit,10038,4079,Not Late,
58,19,Office Supplies,In Transit,10038,706,Not Late,
59,19,Seasonal,In Transit,10036,6111,Not Late,
60,19,Clothing,In Transit,10036,5677,Not Late,
61,19,Home Improvement,In Transit,10037,3993,Not Late,
62,19,Office Supplies,In Transit,10037,1625,Not Late,
63,19,Seasonal,In Transit,10035,5805,Not Late,
64,19,Home Improvement,In Transit,10035,4453,Not Late,
65,19,Office Supplies,In Transit,10038,2252,Not Late,
66,18,Electronics,In Transit,10038,8362,Not Late,
67,18,Clothing,In Transit,10037,4182,Not Late,
68,18,Cleaning Products,In Transit,10038,9044,Not Late,
69,18,Clothing,In Transit,10035,6531,Not Late,
70,18,Office Supplies,In Transit,10035,8408,Not Late,
71,17,Home Improvement,Stalled,10038,9629,Not Late,
72,17,Seasonal,Preparation,10035,2128,Not Late,
73,17,Home Improvement,Cancelled,10038,1024,Not Late,
74,17,Office Supplies,Preparation,10037,9684,Late,2
75,17,Electronics,Preparation,10036,6753,Late,2
76,16,Clothing,Preparation,10036,3192,Not Late,
77,16,Office Supplies,Preparation,10038,3954,Not Late,
78,16,Office Supplies,Preparation,10035,8377,Not Late,
79,16,Office Supplies,Preparation,10038,2334,Not Late,
80,15,Grocery,Preparation,10037,7178,Not Late,
81,15,Office Supplies,Preparation,10037,1188,Not Late,
82,15,Electronics,Preparation,10035,4908,Not Late,
83,15,Electronics,Preparation,10035,3552,Not Late,
84,15,Clothing,Preparation,10037,875,Not Late,
85,14,Office Supplies,Preparation,10038,7886,Late,4
86,14,Home Improvement,Cancelled,10036,2358,Late,1
87,14,Clothing,Preparation,10037,8368,Not Late,
88,14,Grocery,Preparation,10037,142,Not Late,
89,14,Office Supplies,Preparation,10037,5537,Not Late,
90,14,Home Improvement,Preparation,10035,3231,Not Late,
91,14,Clothing,Preparation,10036,2283,Not Late,
92,14,Office Supplies,Preparation,10038,5952,Not Late,
93,13,Office Supplies,Preparation,10038,5513,Not Late,
94,13,Home Improvement,Preparation,10036,5871,Not Late,
95,13,Grocery,Preparation,10038,4425,Not Late,
96,13,Clothing,Preparation,10037,500,Late,1
97,13,Electronics,Preparation,10037,9792,Not Late,
98,13,Seasonal,Preparation,10035,4576,Not Late,
99,13,Office Supplies,Preparation,10038,228,Not Late,
100,13,Cleaning Products,Preparation,10037,3086,Late,1
101,13,Office Supplies,Preparation,10038,2329,Not Late,
102,12,Home Improvement,Preparation,10036,8862,Not Late,
103,12,Office Supplies,Preparation,10037,3991,Not Late,
104,12,Office Supplies,Preparation,10037,5435,Not Late,
105,12,Grocery,Preparation,10038,2476,Not Late,
106,12,Clothing,Preparation,10037,8362,Not Late,
107,12,Seasonal,Preparation,10035,1496,Not Late,
108,12,Electronics,Preparation,10038,3210,Not Late,
109,11,Clothing,Preparation,10038,7692,Not Late,
110,11,Cleaning Products,Preparation,10037,1585,Not Late,
111,11,Home Improvement,Cancelled,10037,1874,Not Late,
112,11,Office Supplies,Preparation,10037,869,Not Late,
113,11,Office Supplies,Preparation,10036,8578,Not Late,
114,10,Office Supplies,Preparation,10036,684,Not Late,
115,10,Electronics,Preparation,10036,9889,Not Late,
116,10,Office Supplies,Preparation,10036,4256,Not Late,
117,8,Seasonal,Preparation,10038,9288,Late,7
118,8,Office Supplies,Cancelled,10038,1534,Not Late,
119,8,Seasonal,Preparation,10038,7496,Not Late,
120,8,Electronics,Preparation,10036,8454,Late,3
121,8,Office Supplies,Stalled,10038,1063,Late,
122,8,Office Supplies,Preparation,10037,5958,Not Late,
123,8,Seasonal,Preparation,10036,686,Not Late,
124,8,Grocery,Preparation,10036,1799,Not Late,
125,8,Clothing,Stalled,10036,8485,Not Late,
126,7,Office Supplies,Preparation,10036,6451,Not Late,
127,7,Office Supplies,Pending,10036,1212,Not Late,
128,7,Electronics,Pending,10037,9037,Not Late,
129,7,Electronics,Pending,10037,6522,Late,20
130,7,Electronics,Pending,10038,8865,Late,4
131,7,Clothing,Cancelled,10036,7929,Not Late,
132,6,Seasonal,Pending,10038,9082,Not Late,
133,6,Office Supplies,Pending,10037,6563,Not Late,
134,6,Seasonal,Pending,10038,3513,Not Late,
135,5,Office Supplies,Pending,10035,2340,Not Late,
136,5,Cleaning Products,Pending,10035,590,Not Late,
137,5,Office Supplies,Pending,10035,542,Not Late,
138,5,Cleaning Products,Pending,10035,4809,Not Late,
139,5,Grocery,Cancelled,10035,1743,Not Late,
140,5,Office Supplies,Pending,10035,8312,Not Late,
141,4,Clothing,Pending,10035,5895,Not Late,
142,4,Clothing,Pending,10037,4882,Not Late,
143,4,Clothing,Pending,10037,9106,Not Late,
144,3,Office Supplies,Pending,10036,7422,Late,1
145,3,Clothing,Pending,10038,2686,Not Late,
146,3,Office Supplies,Pending,10037,698,Late,3
147,3,Office Supplies,Pending,10035,9514,Not Late,
148,2,Home Improvement,Pending,10037,6206,Late,2
149,2,Office Supplies,Pending,10035,9158,Not Late,
150,1,Electronics,Cancelled,10036,3204,Not Late,

];

drop field Offset;
```

## Deel 1: Maak de variabele aan

Maak eerst de variabele aan. Deze variabele is het onderwerp van voorwaarden die later zullen worden toegevoegd. De waarden van de variabele worden tijdens de analyse gewijzigd door interacties met knopobjecten.

Maak de volgende variabele. Stel de Definitie in op `=false()`.

* vViewChartValues

[Een variabele maken](https://help.qlik.com/nl-NL/cloud-services/Subsystems/Hub/Content/Sense_Hub/Variables/create-variable-using-dialog.htm)

## Deel 2: De lay-outcontainer maken

Doe het volgende:

1. Open in het bedrijfsmiddelenvenster Grafieken en sleep onder Dashboardobjecten een Indelingscontainer naar het werkblad.

2. Wijzig het formaat van de container zodat deze 17 bij 10 vakjes is op het werkbladraster.

## Deel 3: Visualisaties toevoegen aan de lay-outcontainer

Voeg vervolgens visualisaties toe aan de lay-outcontainer.

[](https://help.qlik.com/en-US/cloud-services/Subsystems/Hub/Content/Sense_Hub/Visualizations/DashboardBundle/layout-container-example.htm)

#### Not Late knoptitel

Doe het volgende:

1. Selecteer de lay-outcontainer.

2. In het eigenschappenvenster, onder Inhoud > Grafieken, klik op Toevoegen. Selecteer Knop.

3. Vouw het item uit. Stel het Label in op Button\_NotLateTitle.

4. Onder Grootte stelt u het volgende in:

   * Breedte (%): 48

   * Hoogte (%): 9

5. Onder Positie stelt u het volgende in:

   * X-as (%): 1

   * Y-as (%): 1

6. Klik op Eigenschappen bewerken.

7. Vouw Acties en navigatie uit.

8. Klik op Actie toevoegen.

9. Voor de Actie selecteert u Waarden in een veld selecteren.

10. Voor het Veld selecteert u Late Status.

11. Voor Waarde klikt u op the Uitdrukkingseditor openen icon.

12. Voeg het volgende toe:

    ```
    ='Not Late'
    ```

13. Klik op Toepassen.

14. Vouw Uiterlijk > Algemeen uit.

15. Stel Not Late in als het Label.

16. Vouw Uiterlijk > Presentatie uit.

17. Klik op the Stijl icon .

18. Stel onder Rand de Omtrek in op 0 px.

19. Ga naar het tabblad Diagrammen. Stel de volgende eigenschappen in:

    * Lay-outgedrag: Responsief

    * Lettergrootte: Maximale waarde

    * Letterkleur > Kleur: #006580

    * Achtergrondopties > Gebruikte kleur: #ffffff

20. Klik op the Pijl links icon om het stijlpaneel te verlaten.

21. Klik op de bovenste staaf in het paneel om terug te keren naar de lay-outcontainer.

[](https://help.qlik.com/en-US/cloud-services/Subsystems/Hub/Content/Sense_Hub/Visualizations/DashboardBundle/layout-container-example.htm)

#### Late knoptitel

Doe het volgende:

1. Onder Content > Charts, klik op Add. Selecteer Knop.

2. Vouw het item uit. Stel het Label in op Button\_LateTitle.

3. Onder Grootte stelt u het volgende in:

   * Breedte (%): 48

   * Hoogte (%): 9

4. Onder Positie stelt u het volgende in:

   * X-as (%): 51

   * Y-as (%): 1

5. Klik op Eigenschappen bewerken.

6. Vouw Acties en navigatie uit.

7. Klik op Actie toevoegen.

8. Voor de Actie selecteert u Waarden in een veld selecteren.

9. Voor het Veld selecteert u Late Status.

10. Voor Waarde klikt u op the Uitdrukkingseditor openen icon.

11. Voeg het volgende toe:

    ```
    ='Late'
    ```

12. Klik op Toepassen.

13. Vouw Uiterlijk > Algemeen uit.

14. Stel Late in als het Label.

15. Vouw Uiterlijk > Presentatie uit.

16. Klik op the Stijl icon .

17. Stel onder Rand de Omtrek in op 0 px.

18. Ga naar het tabblad Diagrammen. Stel de volgende eigenschappen in:

    * Lay-outgedrag: Responsief

    * Lettergrootte: Maximale waarde

    * Letterkleur > Kleur: #87205d

    * Achtergrondopties > Gebruikte kleur: #ffffff

19. Klik op the Pijl links icon om het stijlpaneel te verlaten.

20. Klik op de bovenste staaf in het paneel om terug te keren naar de lay-outcontainer.

[](https://help.qlik.com/en-US/cloud-services/Subsystems/Hub/Content/Sense_Hub/Visualizations/DashboardBundle/layout-container-example.htm)

#### Not Late meter

Doe het volgende:

1. Onder Inhoud > Grafieken, klik op Toevoegen. Selecteer Meter.

2. Vouw het item uit. Stel het Label in op Gauge\_NotLate.

3. Onder Grootte stelt u het volgende in:

   * Breedte (%): 48

   * Hoogte (%): 15

4. Onder Positie stelt u het volgende in:

   * X-as (%): 1

   * Y-as (%): 11

5. Klik op Eigenschappen bewerken.

6. Voeg Sum(Sales) toe als een meting.

7. Klik in het eigenschappenvenster, onder Gegevens > Filters, op Toevoegen.

8. Selecteer Late Status. Vouw het filter uit.

9. Behoud het standaard filtertype Waarden en schakel het selectievakje Not Late in. Dit filtert visualisatiegegevens tot alleen records die een Late Status-waarde van Not Late bevatten.

10. Vouw Uiterlijk > Algemeen uit.

11. Stel Titels weergeven in op Uit.

12. Vouw Uiterlijk > Presentatie uit.

13. Onder Bereiklimieten stelt u Max in op het volgende:

    ```
    =Sum({1} Sales)
    ```

14. Wijzig de diagramconfiguratie van Radiaal naar Staaf.

15. Wijzig de Oriëntatie van Auto naar Aangepast, en zorg ervoor dat Horizontaal is geselecteerd.

16. Schakel Bibliotheek gebruiken uit, en stel de Kleur in op #006580.

17. Klik op the Stijl icon .

18. Stel onder Rand de Omtrek in op 0 px.

19. Ga naar het tabblad Diagrammen. Stel de kleur in voor het Waardelabel op #ffffff.

20. Klik op the Pijl links icon om het stijlpaneel te verlaten.

21. Vouw Uiterlijk > Meetwaarde-as: Sum(Sales) uit.

22. Stel Labels en titel in op Geen.

23. Klik op de bovenste staaf in het paneel om terug te keren naar de lay-outcontainer.

[](https://help.qlik.com/en-US/cloud-services/Subsystems/Hub/Content/Sense_Hub/Visualizations/DashboardBundle/layout-container-example.htm)

#### Late meter

Doe het volgende:

1. Onder Inhoud > Grafieken, klik op Toevoegen. Selecteer Meter.

2. Vouw het item uit. Stel het Label in op Gauge\_Late.

3. Onder Grootte stelt u het volgende in:

   * Breedte (%): 48

   * Hoogte (%): 15

4. Onder Positie stelt u het volgende in:

   * X-as (%): 51

   * Y-as (%): 11

5. Klik op Eigenschappen bewerken.

6. Voeg Sum(Sales) toe als een meting.

7. Klik in het eigenschappenvenster, onder Gegevens > Filters, op Toevoegen.

8. Selecteer Late Status. Vouw het filter uit.

9. Behoud het standaard filtertype Waarden en schakel het selectievakje Late in. Dit filtert visualisatiegegevens tot alleen records die een Late Status-waarde van Late bevatten.

10. Vouw Uiterlijk > Algemeen uit.

11. Stel Titels weergeven in op Uit.

12. Vouw Uiterlijk > Presentatie uit.

13. Onder Bereiklimieten stelt u Max in op het volgende:

    ```
    =Sum({1} Sales)
    ```

14. Wijzig de diagramconfiguratie van Radiaal naar Staaf.

15. Wijzig de Oriëntatie van Automatisch naar Aangepast, en zorg ervoor dat Horizontaal is geselecteerd.

16. Schakel Bibliotheek gebruiken uit en stel de Kleur in op #87205d.

17. Klik op the Stijl icon .

18. Stel onder Rand de Omtrek in op 0 px.

19. Ga naar het tabblad Diagrammen. Stel de kleur in voor het Waardelabel op #ffffff.

20. Klik op the Pijl links icon om het stijlpaneel te verlaten.

21. Vouw Uiterlijk > Meetwaarde-as: Sum(Sales) uit.

22. Stel Labels en titel in op Geen.

23. Klik op de bovenste staaf in het paneel om terug te keren naar de lay-outcontainer.

[](https://help.qlik.com/en-US/cloud-services/Subsystems/Hub/Content/Sense_Hub/Visualizations/DashboardBundle/layout-container-example.htm)

#### Not Late KPI

Doe het volgende:

1. Klik onder Inhoud > Grafieken op Toevoegen. Selecteer KPI.

2. Vouw het item uit. Stel het Label in op KPI\_NotLate.

3. Onder Grootte stelt u het volgende in:

   * Breedte (%): 48

   * Hoogte (%): 9

4. Onder Positie stelt u het volgende in:

   * X-as (%): 1

   * Y-as (%): 27

5. Klik op Eigenschappen bewerken.

6. Voeg Sum(Sales) toe als een meting.

7. Stel in de eigenschappen voor de meting de Getalnotatie in op Valuta.

8. Wijzig het Opmaakpatroon in:

   ```
   $ #,##0.00;-$ #,##0.00
   ```

9. Klik in het eigenschappenvenster, onder Gegevens > Filters, op Toevoegen.

10. Selecteer Late Status. Vouw het filter uit.

11. Behoud het standaard filtertype Waarden en schakel het selectievakje Not Late in. Dit filtert visualisatiegegevens tot alleen records die een Late Status-waarde van Not Late bevatten.

12. Vouw Uiterlijk > Algemeen uit.

13. Stel Titels weergeven in op Uit.

14. Vouw Uiterlijk > Presentatie uit.

15. Klik op the Stijl icon .

16. Stel onder Rand de Omtrek in op 0 px.

17. Ga naar het tabblad Diagrammen. Stel de volgende eigenschappen in:

    * Lay-outgedrag: Responsief

    * Lettergrootte: Maximale waarde

    * Schakel Eerste KPI-titel weergeven uit

18. Klik op the Pijl links icon om het stijlpaneel te verlaten.

19. Vouw Uiterlijk > Kleur uit.

20. Schakel Bibliotheekkleuren uit. Verander de kleur naar #006580.

21. Klik op de bovenste staaf in het paneel om terug te keren naar de lay-outcontainer.

[](https://help.qlik.com/en-US/cloud-services/Subsystems/Hub/Content/Sense_Hub/Visualizations/DashboardBundle/layout-container-example.htm)

#### Late KPI

Doe het volgende:

1. Klik onder Inhoud > Grafieken op Toevoegen. Selecteer KPI.

2. Vouw het item uit. Stel het Label in op KPI\_Late.

3. Onder Grootte stelt u het volgende in:

   * Breedte (%): 48

   * Hoogte (%): 9

4. Onder Positie stelt u het volgende in:

   * X-as (%): 51

   * Y-as (%): 27

5. Klik op Eigenschappen bewerken.

6. Voeg Sum(Sales) toe als een meting.

7. Stel in de eigenschappen voor de meting de Getalnotatie in op Valuta.

8. Wijzig het Opmaakpatroon in:

   ```
   $ #,##0.00;-$ #,##0.00
   ```

9. Klik in het eigenschappenvenster, onder Gegevens > Filters, op Toevoegen.

10. Selecteer Late Status. Vouw het filter uit.

11. Behoud het standaard filtertype Waarden en schakel het selectievakje Late in. Dit filtert visualisatiegegevens tot alleen records die een Late Status-waarde van Late bevatten.

12. Vouw Uiterlijk > Algemeen uit.

13. Stel Titels weergeven in op Uit.

14. Vouw Uiterlijk > Presentatie uit.

15. Klik op the Stijl icon .

16. Stel onder Rand de Omtrek in op 0 px.

17. Ga naar het tabblad Diagrammen. Stel de volgende eigenschappen in:

    * Lay-outgedrag: Responsief

    * Lettergrootte: Maximale waarde

    * Schakel Eerste KPI-titel weergeven uit

18. Klik op the Pijl links icon om het stijlpaneel te verlaten.

19. Vouw Uiterlijk > Kleur uit.

20. Schakel Bibliotheekkleuren uit. Stel de kleur in op #87205d.

21. Klik op de bovenste staaf in het paneel om terug te keren naar de lay-outcontainer.

[](https://help.qlik.com/en-US/cloud-services/Subsystems/Hub/Content/Sense_Hub/Visualizations/DashboardBundle/layout-container-example.htm)

#### Staafdiagram zonder waardelabels

Doe het volgende:

1. Klik onder Inhoud > Diagrammen op Toevoegen. Selecteer Staafdiagram.

2. Vouw het item uit. Stel het Label in op BarChart\_Simple.

3. Voor Weergavevoorwaarde, klik op the Uitdrukkingseditor openen icon.

4. Voeg het volgende toe:

   ```
   =vViewChartValues=false()
   ```

5. Klik op Toepassen.

6. Onder Size, stel het volgende in:

   * Breedte (%): 81

   * Hoogte (%): 62

7. Onder Positie stelt u het volgende in:

   * X-as (%): 1

   * Y-as (%): 37

8. Klik op Eigenschappen bewerken.

9. Voeg Product Type toe als een dimensie.

10. Voeg nog een dimensie toe: Late Status.

    Product Type moet nu worden vermeld als de Groep en Late Status als de Staven.

11. Voeg Sum(Sales) toe als een meting.

12. Stel in de eigenschappen voor de meting de Getalnotatie in op Valuta.

13. Wijzig het Opmaakpatroon in:

    ```
    $ #,##0.00;-$ #,##0.00
    ```

14. Vouw Uiterlijk > Algemeen uit.

15. Stel Titels weergeven in op Uit.

16. Vouw Uiterlijk > Presentatie uit.

17. Schakel over van de Gegroepeerde naar de Gestapelde presentatie.

18. Stel Rasterlijnafstand in op Aangepast. Selecteer in de vervolgkeuzelijst Geen lijnen.

19. Klik op the Stijl icon .

20. Stel onder Rand de Omtrek in op 0 px.

21. Ga naar het tabblad Diagrammen. Stel de volgende eigenschappen in:

    * Aslabel lettergrootte: 16 px

22. Klik op the Pijl links icon om het stijlpaneel te sluiten.

23. Vouw Uiterlijk > Kleuren en legenda uit.

24. Stel Kleuren in op Aangepast > Op uitdrukking. Gebruik de volgende uitdrukking:

    ```
    =if([Late Status]='Not Late','#006580', if([Late Status]='Late','#87205d'))
    ```

25. Stel Legenda tonen in op Uit.

26. Vouw Uiterlijk > x-as: Product Type, Late Status uit.

27. Stel Labels en titel in op Alleen labels.

28. Vouw Uiterlijk > Y-as: Sum(Sales) uit.

29. Stel Labels en titel in op Alleen labels.

30. Klik op de bovenste staaf in het paneel om terug te keren naar de lay-outcontainer.

[](https://help.qlik.com/en-US/cloud-services/Subsystems/Hub/Content/Sense_Hub/Visualizations/DashboardBundle/layout-container-example.htm)

#### Staafdiagram met waardelabels

Doe het volgende:

1. Onder Inhoud > Diagrammen klikt u met de rechtermuisknop op BarChart\_Simple en klikt u op Dupliceren.

2. Vouw het item uit. Stel het Label in op BarChart\_Detailed.

3. Voor Weergavevoorwaarde, klik op the Uitdrukkingseditor openen icon.

4. Voeg het volgende toe:

   ```
   =vViewChartValues=true()
   ```

5. Klik op Toepassen.

6. Klik op Eigenschappen bewerken.

7. Vouw Uiterlijk > Presentatie uit.

8. Schakel Waardelabels in.

9. Schakel Segmentlabels in en zorg ervoor dat Totale labels zijn ingeschakeld.

10. Klik op the Stijl icon .

11. Ga naar het tabblad Diagrammen. Stel de volgende eigenschappen in:

    * Aslabel lettergrootte: 16 px

    * Waardelabels lettergrootte: 14 px

12. Klik op the Pijl links icon om het stijlpaneel te sluiten.

13. Vouw Uiterlijk > Kleuren en legenda uit.

14. Vouw Uiterlijk > x-as: Product Type, Late Status uit.

15. Stel Labels en titel in op Alleen labels.

16. Vouw Uiterlijk > Y-as: Sum(Sales) uit.

17. Stel Labels en titel in op Alleen labels.

18. Klik op de bovenste staaf in het paneel om terug te keren naar de lay-outcontainer.

[](https://help.qlik.com/en-US/cloud-services/Subsystems/Hub/Content/Sense_Hub/Visualizations/DashboardBundle/layout-container-example.htm)

#### Schakelaar voor waardelabels

Maak drie mastervisualisaties die zullen worden gebruikt om een samengestelde schakelknop te bouwen in de lay-outcontainer. Deze tuimelschakelaar stelt gebruikers in staat om waardelabels in het staafdiagram aan en uit te zetten.

Item 1: Basis van de tuimelschakelaar

Doe het volgende:

1. Klik onder Inhoud > Grafieken op Toevoegen. Selecteer Knop.

2. Vouw het item uit. Stel het Label in op ToggleSwitch\_Base.

3. Onder Grootte stelt u het volgende in:

   * Breedte (%): 16

   * Hoogte (%): 7

4. Onder Positie stelt u het volgende in:

   * X-as (%): 83

   * Y-as (%): 90

5. Klik op Eigenschappen bewerken.

6. Vouw Acties en navigatie uit.

7. Klik op Actie toevoegen.

8. Selecteer voor de Actie de optie Variabelewaarde instellen.

9. Selecteer voor Variabele de optie vViewChartValues.

10. Voor Waarde, klik op the Uitdrukkingseditor openen icon.

11. Voeg de volgende uitdrukking toe:

    ```
    =if(vViewChartValues=false(),true(),if(vViewChartValues=true(),false()))
    ```

12. Klik op Toepassen.

13. Vouw Uiterlijk > Algemeen uit.

14. Stel Show Values in als het Label.

15. Vouw Uiterlijk > Presentatie uit.

16. Klik op the Stijl icon .

17. Onder Rand, stel Omtrek in op 2 px.

18. Stel de Rand kleur in op #000000.

19. Stel de Hoekradius voor de Rand in op 0 px.

20. Ga naar het tabblad Diagrammen. Stel de volgende eigenschappen in:

    * Gedrag van de lay-out: Responsief

    * Tekengrootte: 0.5

    * Letterkleur > Kleur: #000000

    * Achtergrondopties > Gebruikte kleur: #ffffff

21. Klik op the Pijl links icon om het stijlpaneel te verlaten.

22. Klik op de bovenste staaf in het paneel om terug te keren naar de lay-outcontainer.

Item 2: Knopgedeelte dat de AAN-status vertegenwoordigt

Doe het volgende:

1. Klik onder Inhoud > Grafieken op Toevoegen. Selecteer Knop.

2. Vouw het item uit. Stel het Label in op ToggleSwitch\_ON.

3. Voor Weergavevoorwaarde, klik op the Uitdrukkingseditor openen icon.

4. Voeg het volgende toe:

   ```
   =vViewChartValues=true()
   ```

5. Klik op Toepassen.

6. Onder Grootte stelt u het volgende in:

   * Breedte (%): 4

   * Hoogte (%): 7

7. Onder Positie stelt u het volgende in:

   * X-as (%): 95

   * Y-as (%): 90

8. Klik op Eigenschappen bewerken.

9. Vouw Acties en navigatie uit.

10. Klik op Actie toevoegen.

11. Selecteer voor de Actie de optie Variabelewaarde instellen.

12. Selecteer voor Variabele de optie vViewChartValues.

13. Voor Waarde, klik op the Uitdrukkingseditor openen icon.

14. Voeg de volgende uitdrukking toe:

    ```
    =false()
    ```

15. Klik op Toepassen.

16. Vouw Uiterlijk > Algemeen uit.

17. Stel On in als het Label.

18. Vouw Uiterlijk > Presentatie uit.

19. Klik op the Stijl icon .

20. Onder Rand, stel Omtrek in op 2 px.

21. Stel de Rand kleur in op #000000.

22. Stel de Hoekradius voor de Rand in op 0 px.

23. Ga naar het tabblad Diagrammen. Stel de volgende eigenschappen in:

    * Gedrag van de lay-out: Responsief

    * Tekengrootte: 0.5

    * Tekstkleur > Kleur: #ffffff

    * Achtergrondopties > Gebruikte kleur: #109600

24. Klik op the Pijl links icon om het stijlpaneel te verlaten.

25. Klik op de bovenste staaf in het paneel om terug te keren naar de lay-outcontainer.

Item 3: Knopgedeelte dat de UIT-status vertegenwoordigt

Doe het volgende:

1. Onder Inhoud > Grafieken, klik op Toevoegen. Selecteer Knop.

2. Vouw het item uit. Stel het Label in op ToggleSwitch\_ON.

3. Voor Weergavevoorwaarde, klik op the Uitdrukkingseditor openen icon.

4. Voeg het volgende toe:

   ```
   =vViewChartValues=false()
   ```

5. Klik op Toepassen.

6. Onder Grootte stelt u het volgende in:

   * Breedte (%): 4

   * Hoogte (%): 7

7. Onder Positie stelt u het volgende in:

   * X-as (%): 83

   * Y-as (%): 90

8. Klik op Eigenschappen bewerken.

9. Vouw Acties en navigatie uit.

10. Klik op Actie toevoegen.

11. Selecteer voor de Actie de optie Variabelewaarde instellen.

12. Selecteer voor Variabele de optie vViewChartValues.

13. Voor Waarde, klik op the Uitdrukkingseditor openen icon.

14. Voeg de volgende uitdrukking toe:

    ```
    =true()
    ```

15. Klik op Toepassen.

16. Vouw Uiterlijk > Algemeen uit.

17. Stel Off in als het Label.

18. Vouw Uiterlijk > Presentatie uit.

19. Klik op the Stijl icon .

20. Onder Rand, stel Omtrek in op 2 px.

21. Stel de Rand kleur in op #000000.

22. Stel de Hoekradius voor de Rand in op 0 px.

23. Ga naar het tabblad Diagrammen. Stel de volgende eigenschappen in:

    * Gedrag van de lay-out: Responsief

    * Tekengrootte: 0.5

    * Tekstkleur > Kleur: #ffffff

    * Achtergrondopties > Gebruikte kleur: #ff001e

24. Klik op the Pijl links icon om het stijlpaneel te sluiten.

25. Klik op de bovenste staaf in het paneel om terug te keren naar de lay-outcontainer.

## Deel 4: Presentatie afronden

Rond de lay-out container af door een titel en rand toe te voegen.

Doe het volgende:

1. Vouw in het eigenschappenvenster Uiterlijk > Algemeen uit.

2. Stel de titel in op Te laat vs. Niet-te-late orders - Impact op de verkoop.

3. Vouw Uiterlijk > Presentatie uit.

4. Schakel Diagram in bord houden in.

5. Klik op the Stijl icon .

6. Stel de volgende eigenschappen in voor Rand:

   * Omtrek: 2 px

   * Kleur: #7b7a78

7. Stel de volgende eigenschappen in voor Schaduw:

   * Gemiddelde grootte

   * Kleur: #7b7a78

## Resultaten

Sluit de bewerkingsmodus van het werkblad. Klik op de schakelknop om te wisselen tussen het eenvoudige en gedetailleerde staafdiagram.

Layout-container met Waarden weergeven uitgeschakeld

Layout-container met Waarden weergeven uitgeschakeld

Layout-container met Waarden weergevenWaarden weergeven uitgeschakeld ![Layout-container met 'Waarden weergeven' uitgeschakeld, waarbij het staafdiagram wordt gepresenteerd zonder waardelabels](https://help.qlik.com/nl-NL/cloud-services/Subsystems/Hub/Content/Resources/Images/ui_example-layout-container-final-simple-view.png)

Layout-container met Waarden weergeven ingeschakeld

Layout-container met Waarden weergeven ingeschakeld

Layout-container met Waarden weergevenWaarden weergeven ingeschakeld ![Layout-container met 'Waarden weergeven' ingeschakeld, waarbij het staafdiagram wordt gepresenteerd met waardelabels](https://help.qlik.com/nl-NL/cloud-services/Subsystems/Hub/Content/Resources/Images/ui_example-layout-container-final.png)

Klik op de Not Late en Late titels bovenaan het diagram. Merk op dat het klikken op deze elementen de overeenkomstige waarden in de applicatie selecteert.

Lay-outcontainer met selectie Not Late in veld Late Status.

Lay-outcontainer met selectie Not Late in veld Late Status.

Lay-outcontainer met selectie Not LateNot Late in veld Late StatusLate Status. ![Lay-outcontainer met selectie gemaakt in het veld 'Late Status'.](https://help.qlik.com/nl-NL/cloud-services/Subsystems/Hub/Content/Resources/Images/ui_example-layout-container-final_selections.png)