# Hur jag gjorde detta: Dynamisk analys med layoutbehållaren

Det här exemplet visar hur du kan skapa dynamiskt, interaktivt arkinnehåll med layoutbehållaren.Layoutbehållaren stöder rutnätlös design och flervärdesvisualiseringar, vilket ger omfattande kontroll över arrangemanget av ditt analysinnehåll. Dessutom, precis som med andra behållarobjekt, kan du dynamiskt presentera olika information beroende på en mängd olika förhållanden, såsom variabel- och urvalstillstånd.

Det här exemplet visar hur du kan bygga en layoutbehållare för att presentera information från flera diagram som ett enda objekt. Några allmänna designmetoder inkluderar:

* Att arrangera liknande objekt på ett symmetriskt sätt, med hjälp av stilmallar för att skilja olika delavsnitt av data.

* Att ta bort ramar från enskilda objekt inuti layoutbehållaren och sedan lägga till en ram runt hela objektet när det är klart.

* Att visa olika objekt eller data villkorligt beroende på användarinteraktion – i det här exemplet ett stapeldiagram där användaren kan visa eller dölja detaljer.

* Att bygga sammansatta element som består av flera olika objekt placerade bredvid varandra – i det här exemplet en interaktiv knapp som efterliknar en på/av-brytare.

* Tillåter flera sätt för användare att välja och filtrera data när de behöver titta närmare.

Slutresultat

Slutresultat

Slutresultat ![Färdig layoutbehållare för exemplet](https://help.qlik.com/sv-SE/cloud-services/Subsystems/Hub/Content/Resources/Images/ui_example-layout-container-final.png)

## Förberedelser

Skapa en ny applikation och klistra in [Exempel på laddningsskript](https://help.qlik.com/sv-SE/cloud-services/Subsystems/Hub/Content/Sense_Hub/Visualizations/DashboardBundle/layout-container-example.htm#ExampleData) i ett nytt delavsnitt i Skriptredigeraren. Ladda sedan data.

När du har laddat data växlar du till arkvyn.

### Exempel på laddningsskript

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

#### Data för exempel

```
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;
```

## Del 1: Skapa variabeln

Skapa först variabeln. Denna variabel är föremål för villkor som kommer att läggas till senare. Värdena för variabeln kommer att ändras under analysen genom interaktioner med knappobjekt.

Skapa följande variabel. Ställ in Definition på `=false()`.

* vViewChartValues

[Skapa en variabel](https://help.qlik.com/sv-SE/cloud-services/Subsystems/Hub/Content/Sense_Hub/Variables/create-variable-using-dialog.htm)

## Del 2: Skapa layoutbehållaren

Gör följande:

1. I resurspanelen öppnar du Diagram och under Instrumentpanelobjekt drar du en Layoutbehållare till arket.

2. Ändra storlek på behållaren så att den är 17 gånger 10 rutor på arkets rutnät.

## Del 3: Lägg till visualiseringar i layoutbehållaren

Därefter, lägg till visualiseringar i layoutbehållaren.

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

#### Not Late knapprubrik

Gör följande:

1. Välj layoutbehållaren.

2. I egenskapsfönstret, under Innehåll > Diagram, klicka på Lägg till. Välj Knapp.

3. Expandera objektet. Ange Etikett till Button\_NotLateTitle.

4. Under Storlek anger du följande:

   * Bredd (%): 48

   * Höjd (%): 9

5. Under Position anger du följande:

   * X-axel (%): 1

   * Y-axel (%): 1

6. Klicka på Redigera egenskaper.

7. Expandera Åtgärder och navigering.

8. Klicka på Lägg till åtgärd.

9. För Åtgärd väljer du Välj värden i ett fält.

10. För Fält väljer du Late Status.

11. För Värde klickar du på the Öppna uttrycksredigeraren icon.

12. Lägg till följande:

    ```
    ='Not Late'
    ```

13. Klicka på Tillämpa.

14. Expandera Utseende > Allmänt.

15. Ange Not Late som Etikett.

16. Expandera Utseende > Presentation.

17. Klicka på the Stil icon .

18. Under Kantlinje ställer du in Kontur till 0 px.

19. Växla till fliken Diagram. Ställ in följande egenskaper:

    * Layoutbeteende: Responsivt

    * Teckenstorlek: Maximalt värde

    * Teckenfärg > Färg: #006580

    * Bakgrundsalternativ > Använd färg: #ffffff

20. Klicka på the Vänsterpil icon för att avsluta stilpanelen.

21. Klicka på den övre stapeln i panelen för att återgå till layoutbehållaren.

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

#### Late knapprubrik

Gör följande:

1. Under Innehåll > Diagram, klicka på Lägg till. Välj Knapp.

2. Expandera objektet. Ange Etikett till Button\_LateTitle.

3. Under Storlek anger du följande:

   * Bredd (%): 48

   * Höjd (%): 9

4. Under Position anger du följande:

   * X-axel (%): 51

   * Y-axel (%): 1

5. Klicka på Redigera egenskaper.

6. Expandera Åtgärder och navigering.

7. Klicka på Lägg till åtgärd.

8. För Åtgärd väljer du Välj värden i ett fält.

9. För Fält väljer du Late Status.

10. För Värde klickar du på the Öppna uttrycksredigeraren icon.

11. Lägg till följande:

    ```
    ='Late'
    ```

12. Klicka på Tillämpa.

13. Expandera Utseende > Allmänt.

14. Ange Late som Etikett.

15. Expandera Utseende > Presentation.

16. Klicka på the Stil icon .

17. Under Kantlinje ställer du in Kontur till 0 px.

18. Växla till fliken Diagram. Ställ in följande egenskaper:

    * Layoutbeteende: Responsivt

    * Teckenstorlek: Maximalt värde

    * Teckenfärg > Färg: #87205d

    * Bakgrundsalternativ > Använd färg: #ffffff

19. Klicka på the Vänsterpil icon för att avsluta stilpanelen.

20. Klicka på den övre stapeln i panelen för att återgå till layoutbehållaren.

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

#### Not Late mätare

Gör följande:

1. Under Innehåll > Diagram, klicka på Lägg till. Välj Mätare.

2. Expandera objektet. Ange Etikett till Gauge\_NotLate.

3. Under Storlek anger du följande:

   * Bredd (%): 48

   * Höjd (%): 15

4. Under Position, ange följande:

   * X-axel (%): 1

   * Y-axel (%): 11

5. Klicka på Redigera egenskaper.

6. Lägg till Sum(Sales) som ett mått.

7. I egenskapspanelen, under Data > Filter, klickar du på Lägg till.

8. Välj Late Status. Expandera filtret.

9. Behåll standardfiltertypen Värden, och markera kryssrutan Not Late. Detta filtrerar visualiseringsdata till endast poster som innehåller ett Late Status-värde av Not Late.

10. Expandera Utseende > Allmänt.

11. Ställ in Visa rubriker på Av.

12. Expandera Utseende > Presentation.

13. Under Intervallgränser, ställ in Max på följande:

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

14. Ändra diagramkonfigurationen från Radiell till Stapel.

15. Ändra Orientation från Auto till Custom, och se till att Horizontal är valt.

16. Stäng av Use bibliotek, och ställ in Color till #006580.

17. Klicka på the Styling icon .

18. Under Kantlinje ställer du in Kontur till 0 px.

19. Växla till fliken Diagram. Ange färgen för värdeetiketten till #ffffff.

20. Klicka på the Vänsterpil icon för att avsluta stilpanelen.

21. Expandera Utseende > Mät axel: Sum(Sales).

22. Ange Etiketter och rubrik till Ingen.

23. Klicka på den översta stapeln i panelen för att återgå till layoutbehållaren.

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

#### Late mätare

Gör följande:

1. Under Innehåll > Diagram, klicka på Lägg till. Välj Mätare.

2. Expandera objektet. Ange Etikett till Gauge\_Late.

3. Under Storlek anger du följande:

   * Bredd (%): 48

   * Höjd (%): 15

4. Under Position, ange följande:

   * X-axel (%): 51

   * Y-axel (%): 11

5. Klicka på Redigera egenskaper.

6. Lägg till Sum(Sales) som ett mått.

7. I egenskapspanelen, under Data > Filter, klickar du på Lägg till.

8. Välj Late Status. Expandera filtret.

9. Behåll standardfiltertypen Värden, och markera kryssrutan Late. Detta filtrerar visualiseringsdata till endast poster som innehåller ett Late Status-värde av Late.

10. Expandera Utseende > Allmänt.

11. Ställ in Visa rubriker på Av.

12. Expandera Utseende > Presentation.

13. Under Intervallgränser, ställ in Max på följande:

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

14. Ändra diagramkonfigurationen från Radiell till Stapel.

15. Ändra Orientering från Auto till Anpassad, och se till att Horisontell är markerad.

16. Stäng av Använd bibliotek, och ställ in Färg till #87205d.

17. Klicka på the Stil icon .

18. Under Kantlinje ställer du in Kontur till 0 px.

19. Växla till fliken Diagram. Ange färgen för värdeetiketten till #ffffff.

20. Klicka på the Vänsterpil icon för att avsluta stilpanelen.

21. Expandera Utseende > Mät axel: Sum(Sales).

22. Ange Etiketter och rubrik till Ingen.

23. Klicka på den övre stapeln i panelen för att återgå till layoutbehållaren.

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

#### Not Late KPI (nyckeltal)

Gör följande:

1. Under Innehåll > Diagram klickar du på Lägg till. Välj KPI (nyckeltal).

2. Expandera objektet. Ange Etikett till KPI\_NotLate.

3. Under Storlek anger du följande:

   * Bredd (%): 48

   * Höjd (%): 9

4. Under Position anger du följande:

   * X-axel (%): 1

   * Y-axel (%): 27

5. Klicka på Redigera egenskaper.

6. Lägg till Sum(Sales) som ett mått.

7. I egenskaperna för måttet ställer du in Talformatering till Pengar.

8. Ändra Formatmönster till:

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

9. I egenskapspanelen, under Data > Filter, klickar du på Lägg till.

10. Välj Late Status. Expandera filtret.

11. Behåll standardfiltertypen Värden, och markera kryssrutan Not Late. Detta filtrerar visualiseringsdata till endast poster som innehåller ett Late Status-värde av Not Late.

12. Expandera Utseende > Allmänt.

13. Ställ in Visa rubriker på Av.

14. Expandera Utseende > Presentation.

15. Klicka på the Stil icon .

16. Under Kantlinje ställer du in Kontur till 0 px.

17. Växla till fliken Diagram. Ställ in följande egenskaper:

    * Layoutbeteende: Responsivt

    * Teckenstorlek: Maximalt värde

    * Stäng av Visa första KPI-namnet

18. Klicka på the Vänsterpil icon för att avsluta stilpanelen.

19. Expandera Utseende > Färg.

20. Avaktivera Bilbioteksfärger. Ändra färgen till #006580.

21. Klicka på den övre stapeln i panelen för att återgå till layoutbehållaren.

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

#### Late KPI (nyckeltal)

Gör följande:

1. Under Innehåll > Diagram klickar du på Lägg till. Välj KPI (nyckeltal).

2. Expandera objektet. Ange Etikett till KPI\_Late.

3. Under Storlek anger du följande:

   * Bredd (%): 48

   * Höjd (%): 9

4. Under Position anger du följande:

   * X-axel (%): 51

   * Y-axel (%): 27

5. Klicka på Redigera egenskaper.

6. Lägg till Sum(Sales) som ett mått.

7. I egenskaperna för måttet ställer du in Talformatering till Pengar.

8. Ändra Formatmönster till:

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

9. I egenskapspanelen, under Data > Filter, klickar du på Lägg till.

10. Välj Late Status. Expandera filtret.

11. Behåll standardfiltertypen Värden, och markera kryssrutan Late. Detta filtrerar visualiseringsdata till endast poster som innehåller ett Late Status-värde av Late.

12. Expandera Utseende > Allmänt.

13. Ställ in Visa rubriker på Av.

14. Expandera Utseende > Presentation.

15. Klicka på the Stil icon .

16. Under Kantlinje ställer du in Kontur till 0 px.

17. Växla till fliken Diagram. Ställ in följande egenskaper:

    * Layoutbeteende: Responsivt

    * Teckenstorlek: Maximalt värde

    * Stäng av Visa första KPI-namnet

18. Klicka på the Vänsterpil icon för att avsluta stilpanelen.

19. Expandera Utseende > Färg.

20. Avaktivera Biblioteksfärger. Ställ in färgen till #87205d.

21. Klicka på den övre stapeln i panelen för att återgå till layoutbehållaren.

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

#### Stapeldiagram utan värdeetiketter

Gör följande:

1. Under Innehåll > Diagram, klicka på Lägg till. Välj stapeldiagram.

2. Expandera objektet. Ange Etikett till BarChart\_Simple.

3. För Visa villkor, klicka på the Öppna uttrycksredigeraren icon.

4. Lägg till följande:

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

5. Klicka på Tillämpa.

6. Under Storlek, ange följande:

   * Bredd (%): 81

   * Höjd (%): 62

7. Under Position anger du följande:

   * X-axel (%): 1

   * Y-axel (%): 37

8. Klicka på Redigera egenskaper.

9. Lägg till Product Type som en dimension.

10. Lägg till en annan dimension: Late Status.

    Product Type bör nu listas som Grupp och Late Status som Staplar.

11. Lägg till Sum(Sales) som ett mått.

12. I egenskaperna för måttet ställer du in Talformatering till Pengar.

13. Ändra Formatmönster till:

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

14. Expandera Utseende > Allmänt.

15. Ställ in Visa rubriker på Av.

16. Expandera Utseende > Presentation.

17. Växla från den grupperade till den staplade presentationen.

18. Ställ in Rutnätsavstånd på Anpassad. I rullgardinsmenyn väljer du Inga linjer.

19. Klicka på the Stil icon .

20. Under Kantlinje ställer du in Kontur till 0 px.

21. Växla till fliken Diagram. Ställ in följande egenskaper:

    * Axelrubrik teckenstorlek: 16 px

22. Klicka på the Vänsterpil icon för att stänga stilpanelen.

23. Expandera Utseende > Färger och teckenförklaring.

24. Ställ in Färger på Anpassad > Per uttryck. Använd följande uttryck:

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

25. Ange Visa teckenförklaring till Av.

26. Expandera Utseende > X-axel: Product Type, Late Status.

27. Ange Etiketter och rubrik till Endast etiketter.

28. Expandera Utseende > Y-axel: Sum(Sales).

29. Ställ in Etiketter och rubrik på Endast etiketter.

30. Klicka på den övre stapeln i panelen för att återgå till layoutbehållaren.

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

#### Stapeldiagram med värdeetiketter

Gör följande:

1. Under Innehåll > Diagram, högerklicka på BarChart\_Simple och klicka på Duplicera.

2. Expandera objektet. Ange Etikett till BarChart\_Detailed.

3. För Visa villkor, klicka på the Öppna uttrycksredigeraren icon.

4. Lägg till följande:

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

5. Klicka på Tillämpa.

6. Klicka på Redigera egenskaper.

7. Expandera Utseende > Presentation.

8. Aktivera Värdeetiketter.

9. Aktivera Segmentetiketter, och se till att Totaletiketter är aktiverade.

10. Klicka på the Stil icon .

11. Växla till fliken Diagram. Ställ in följande egenskaper:

    * Axelrubrik teckenstorlek: 16 px

    * Värdeetiketter teckenstorlek: 14 px

12. Klicka på the Vänsterpil icon för att avsluta stilpanelen.

13. Expandera Utseende > Färger och teckenförklaring.

14. Expandera Utseende > X-axel: Product Type, Late Status.

15. Ange Etiketter och rubrik till Endast etiketter.

16. Expandera Utseende > Y-axel: Sum(Sales).

17. Ställ in Etiketter och rubrik på Endast etiketter.

18. Klicka på den övre stapeln i panelen för att återgå till layoutbehållaren.

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

#### Växlingsknapp för värdeetiketter

Skapa tre originalvisualiseringar som kommer att användas för att bygga en sammansatt växlingsknapp i layoutbehållaren. Denna växlingsknapp gör att användare kan slå på och av värdeetiketter i stapeldiagrammet.

Objekt 1: Växlingsknappens bas

Gör följande:

1. Under Innehåll > Diagram, klicka på Lägg till. Välj Knapp.

2. Expandera objektet. Ange Etikett till ToggleSwitch\_Base.

3. Under Storlek anger du följande:

   * Bredd (%): 16

   * Höjd (%): 7

4. Under Position anger du följande:

   * X-axel (%): 83

   * Y-axel (%): 90

5. Klicka på Redigera egenskaper.

6. Expandera Åtgärder och navigering.

7. Klicka på Lägg till åtgärd.

8. För Åtgärd väljer du Ange variabelvärde.

9. För Variabel väljer du vViewChartValues.

10. För Värde, klicka på the Öppna uttrycksredigeraren icon.

11. Lägg till följande uttryck:

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

12. Klicka på Tillämpa.

13. Expandera Utseende > Allmänt.

14. Ange Show Values som Etikett.

15. Expandera Utseende > Presentation.

16. Klicka på the Stil icon .

17. Under Kantlinje ställer du in Kontur till 2 px.

18. Ställ in kantlinjefärgen till #000000.

19. Ställ in hörnradien för kantlinjen till 0 px.

20. Växla till fliken Diagram. Ställ in följande egenskaper:

    * Layoutbeteende: Responsivt

    * Teckenstorlek: 0.5

    * Teckenfärg > Färg: #000000

    * Bakgrundsalternativ > Använd färg: #ffffff

21. Klicka på the Vänsterpil icon för att avsluta stilpanelen.

22. Klicka på den övre stapeln i panelen för att återgå till layoutbehållaren.

Objekt 2: Knappdel som representerar PÅ-läge

Gör följande:

1. Under Innehåll > Diagram, klicka på Lägg till. Välj Knapp.

2. Expandera objektet. Ange Etikett till ToggleSwitch\_ON.

3. För Visa villkor, klicka på the Öppna uttrycksredigeraren icon.

4. Lägg till följande:

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

5. Klicka på Tillämpa.

6. Under Storlek anger du följande:

   * Bredd (%): 4

   * Höjd (%): 7

7. Under Position, ange följande:

   * X-axel (%): 95

   * Y-axel (%): 90

8. Klicka på Redigera egenskaper.

9. Expandera Åtgärder och navigering.

10. Klicka på Lägg till åtgärd.

11. För Åtgärd väljer du Ange variabelvärde.

12. För Variabel väljer du vViewChartValues.

13. För Värde, klicka på the Öppna uttrycksredigeraren icon.

14. Lägg till följande uttryck:

    ```
    =false()
    ```

15. Klicka på Tillämpa.

16. Expandera Utseende > Allmänt.

17. Ange On som Etikett.

18. Expandera Utseende > Presentation.

19. Klicka på the Stil icon .

20. Under Kantlinje ställer du in Kontur till 2 px.

21. Ställ in kantlinjefärgen till #000000.

22. Ställ in hörnradien för kantlinjen till 0 px.

23. Växla till fliken Diagram. Ställ in följande egenskaper:

    * Layoutbeteende: Responsivt

    * Teckenstorlek: 0.5

    * Teckenfärg > Färg: #ffffff

    * Bakgrundsalternativ > Färg som används: #109600

24. Klicka på the Vänsterpil icon för att avsluta stilpanelen.

25. Klicka på den övre stapeln i panelen för att återgå till layoutbehållaren.

Objekt 3: Knappdel som representerar AV-läge

Gör följande:

1. Under Innehåll > Diagram, klicka på Lägg till. Välj Knapp.

2. Expandera objektet. Ange Etikett till ToggleSwitch\_ON.

3. För Visa villkor, klicka på the Öppna uttrycksredigeraren icon.

4. Lägg till följande:

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

5. Klicka på Tillämpa.

6. Under Storlek anger du följande:

   * Bredd (%): 4

   * Höjd (%): 7

7. Under Position anger du följande:

   * X-axel (%): 83

   * Y-axel (%): 90

8. Klicka på Redigera egenskaper.

9. Expandera Åtgärder och navigering.

10. Klicka på Lägg till åtgärd.

11. För Åtgärd väljer du Ange variabelvärde.

12. För Variabel väljer du vViewChartValues.

13. För Värde, klicka på the Öppna uttrycksredigeraren icon.

14. Lägg till följande uttryck:

    ```
    =true()
    ```

15. Klicka på Tillämpa.

16. Expandera Utseende > Allmänt.

17. Ange Off som Etikett.

18. Expandera Utseende > Presentation.

19. Klicka på the Stil icon .

20. Under Kantlinje ställer du in Kontur till 2 px.

21. Ställ in kantlinjefärgen till #000000.

22. Ställ in hörnradien för kantlinjen till 0 px.

23. Växla till fliken Diagram. Ställ in följande egenskaper:

    * Layoutbeteende: Responsivt

    * Teckenstorlek: 0.5

    * Teckenfärg > Färg: #ffffff

    * Bakgrundsalternativ > Använd färg: #ff001e

24. Klicka på the Vänsterpil icon för att avsluta stilpanelen.

25. Klicka på den övre stapeln i panelen för att återgå till layoutbehållaren.

## Del 4: Slutför presentationen

Slutför layoutbehållaren genom att lägga till en rubrik och en kantlinje.

Gör följande:

1. I egenskapspanelen, expandera Utseende > Allmänt.

2. Ange rubriken till Sena vs. Icke-sena beställningar - Försäljningspåverkan.

3. Expandera Utseende > Presentation.

4. Aktivera Håll diagram på insidan.

5. Klicka på the Styling icon .

6. Ställ in följande egenskaper för Kantlinje:

   * Kontur: 2 px

   * Färg: #7b7a78

7. Ställ in följande egenskaper för Skugga:

   * Medelstor storlek

   * Färg: #7b7a78

## Resultat

Lämna arkredigeringsläge. Klicka på växlingsknappen för att växla mellan det enkla och detaljerade stapeldiagrammet.

Layoutbehållare med Visa värden avstängd

Layoutbehållare med Visa värden avstängd

Layoutbehållare med Visa värdenVisa värden avstängd ![Layoutbehållare med 'Visa värden' avstängd, som visar stapeldiagrammet utan värdeetiketter](https://help.qlik.com/sv-SE/cloud-services/Subsystems/Hub/Content/Resources/Images/ui_example-layout-container-final-simple-view.png)

Layoutbehållare med Visa värden påslagen

Layoutbehållare med Visa värden påslagen

Layoutbehållare med Visa värdenVisa värden påslagen ![Layoutbehållare med 'Visa värden' påslagen, som visar stapeldiagrammet med värdeetiketter](https://help.qlik.com/sv-SE/cloud-services/Subsystems/Hub/Content/Resources/Images/ui_example-layout-container-final.png)

Klicka på Not Late och Late rubrikerna överst i diagrammet. Observera att om du klickar på dessa element väljs motsvarande värden i applikationen.

Layoutbehållare med val Not Late i fältet Late Status.

Layoutbehållare med val Not Late i fältet Late Status.

Layoutbehållare med val Not LateNot Late i fältet Late StatusLate Status. ![Layoutbehållare med val gjort i fältet 'Sen status'.](https://help.qlik.com/sv-SE/cloud-services/Subsystems/Hub/Content/Resources/Images/ui_example-layout-container-final_selections.png)