# Bunu nasıl yaptım: Düzen kapsayıcısı ile dinamik analiz

Bu örnek, düzen kapsayıcısı ile dinamik, etkileşimli sayfa içeriği oluşturmayı nasıl yapabileceğinizi gösterir.Düzen kapsayıcısı, kılavuz çizgisiz tasarımı ve yığın görselleştirmeleri destekleyerek analiz içeriğinizin düzenlenmesi üzerinde kapsamlı kontrol sağlar. Ek olarak, diğer kapsayıcı nesnelerde olduğu gibi, değişken ve seçim durumları gibi çeşitli koşullara bağlı olarak farklı bilgileri dinamik olarak sunabilirsiniz.

Bu örnek, birden çok grafikten gelen bilgileri tek nesne olarak sunmak için bir düzen kapsayıcısı oluşturabileceğinizi gösterir. Bazı genel tasarım yaklaşımları şunlardır:

* Benzer nesneleri simetrik bir şekilde düzenlemek, farklı veri bölümlerini ayırt etmek için stil kullanmak.

* Düzen kapsayıcısının içindeki tek tek nesnelerden kenarlıkları kaldırmak ve ardından işlem bittiğinde tüm nesnenin etrafına bir kenarlık eklemek.

* Kullanıcı etkileşimine bağlı olarak farklı nesneleri veya verileri koşullu olarak görüntülemek; bu örnekte, kullanıcının ayrıntıları gösterebileceği veya gizleyebileceği bir sütun grafik.

* Birden çok farklı nesnenin yan yana yerleştirildiği bileşik öğeler oluşturmak; bu örnekte, açma/kapama anahtarını taklit eden etkileşimli bir düğme.

* Kullanıcıların daha yakından incelemeleri gerektiğinde verileri seçmeleri ve filtrelemeleri için birden fazla yol sunma.

Nihai sonuç

Nihai sonuç

Nihai sonuç ![Örnek için bitmiş düzen kapsayıcısı](https://help.qlik.com/tr-TR/cloud-services/Subsystems/Hub/Content/Resources/Images/ui_example-layout-container-final.png)

## Hazırlıklar

Yeni bir uygulama oluşturun ve [Örnek komut dosyası](https://help.qlik.com/tr-TR/cloud-services/Subsystems/Hub/Content/Sense_Hub/Visualizations/DashboardBundle/layout-container-example.htm#ExampleData) öğesini Veri yükleme düzenleyicisi içindeki yeni bir bölüme yapıştırın. Ardından verileri yükleyin.

Verileri yükledikten sonra sayfa görünümüne geçin.

### Örnek komut dosyası

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

#### Örnek verileri

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

## Bölüm 1: Değişkeni oluşturma

İlk olarak, değişkeni oluşturun. Bu değişken, daha sonra eklenecek koşulların konusudur. Değişkenin değerleri, analiz sırasında düğme nesneleriyle etkileşimler yoluyla değiştirilecektir.

Aşağıdaki değişkeni oluşturun. Tanım öğesini `=false()` olarak ayarlayın.

* vViewChartValues

[Değişken oluşturma](https://help.qlik.com/tr-TR/cloud-services/Subsystems/Hub/Content/Sense_Hub/Variables/create-variable-using-dialog.htm)

## Bölüm 2: Düzen kapsayıcısını oluşturun

Aşağıdakileri yapın:

1. Varlık panelinde, Grafikler'i açın ve Pano nesneleri altında, bir Düzen kapsayıcısı'nı sayfaya sürükleyin.

2. Kapsayıcıyı sayfa kılavuz çizgisinde 17'ye 10 kare olacak şekilde yeniden boyutlandırın.

## Bölüm 3: Düzen kapsayıcısına görselleştirmeler ekleme

Ardından, düzen kapsayıcısına görselleştirmeler ekleyin.

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

#### Not Late düğme başlığı

Aşağıdakileri yapın:

1. Düzen kapsayıcısını seçin.

2. Özellikler panelinde, İçerik > Grafikler altında, Ekle'ye tıklayın. Düğme'yi seçin.

3. Öğeyi genişletin. Etiket değerini Button\_NotLateTitle olarak ayarlayın.

4. Boyut altında, aşağıdakileri ayarlayın:

   * Genişlik (%): 48

   * Yükseklik (%): 9

5. Konum altında aşağıdakileri ayarlayın:

   * X ekseni (%): 1

   * Y ekseni (%): 1

6. Özellikleri düzenle'ye tıklayın.

7. Genişlet Eylemler ve navigasyon.

8. İşlem ekle'ye tıklayın.

9. Eylem için Bir alandaki değerleri seç öğesini seçin.

10. Alan için Late Status öğesini seçin.

11. Değer için the İfade düzenleyicisini aç icon öğesine tıklayın.

12. Aşağıdakileri ekleyin:

    ```
    ='Not Late'
    ```

13. Uygula'ya tıklayın.

14. Görünüş > Genel öğesini genişletin.

15. Not Late öğesini Etiket olarak ayarlayın.

16. Görünüm > Sunum bölümünü genişletin.

17. the Stil icon 'e tıklayın.

18. Kenarlık altında, Dış Çizgi'yi 0 piksel olarak ayarlayın.

19. Grafik sekmesine geçiş yapın. Aşağıdaki özellikleri ayarlayın:

    * Düzen davranışı: Uyumlu

    * Yazı tipi boyutu: Maksimum değer

    * Yazı tipi rengi > Renk: #006580

    * Arka plan seçenekleri > Kullanılan renk: #ffffff

20. Stil panelinden çıkmak için the Sol ok icon öğesine tıklayın.

21. Düzen kapsayıcısına dönmek için paneldeki üst sütuna tıklayın.

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

#### Late düğme başlığı

Aşağıdakileri yapın:

1. İçerik > Grafikler altında, Ekle öğesine tıklayın. Düğme'yi seçin.

2. Öğeyi genişletin. Etiket değerini Button\_LateTitle olarak ayarlayın.

3. Boyut altında, aşağıdakileri ayarlayın:

   * Genişlik (%): 48

   * Yükseklik (%): 9

4. Konum altında, aşağıdakileri ayarlayın:

   * X ekseni (%): 51

   * Y ekseni (%): 1

5. Özellikleri düzenle'ye tıklayın.

6. Genişlet Eylemler ve navigasyon.

7. İşlem ekle'ye tıklayın.

8. Eylem için Bir alandaki değerleri seç öğesini seçin.

9. Alan için Late Status öğesini seçin.

10. Değer için the İfade düzenleyicisini aç icon öğesine tıklayın.

11. Aşağıdakileri ekleyin:

    ```
    ='Late'
    ```

12. Uygula'ya tıklayın.

13. Görünüş > Genel öğesini genişletin.

14. Late öğesini Etiket olarak ayarlayın.

15. Görünüm > Sunum bölümünü genişletin.

16. the Stil icon 'e tıklayın.

17. Kenarlık altında, Dış Çizgi'yi 0 piksel olarak ayarlayın.

18. Grafik sekmesine geçiş yapın. Aşağıdaki özellikleri ayarlayın:

    * Düzen davranışı: Uyumlu

    * Yazı tipi boyutu: Maksimum değer

    * Yazı tipi rengi > Renk: #87205d

    * Arka plan seçenekleri > Kullanılan renk: #ffffff

19. Stil panelinden çıkmak için the Sol ok icon öğesine tıklayın.

20. Düzen kapsayıcısına dönmek için paneldeki üst sütuna tıklayın.

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

#### Not Late gösterge

Aşağıdakileri yapın:

1. İçerik > Grafikler altında, Ekle'ye tıklayın. Gösterge'yi seçin.

2. Öğeyi genişlet. Etiket değerini Gauge\_NotLate olarak ayarlayın.

3. Boyut altında, aşağıdakileri ayarlayın:

   * Genişlik (%): 48

   * Yükseklik (%): 15

4. Konum altında, aşağıdakileri ayarlayın:

   * X ekseni (%): 1

   * Y ekseni (%): 11

5. Özellikleri düzenle'ye tıklayın.

6. Hesaplama olarak Sum(Sales) öğesini ekleyin.

7. Özellikler panelinde, Veri > Filtreler altında, Ekle'ye tıklayın.

8. Late Status öğesini seçin. Filtreyi genişletin.

9. Varsayılan Değerler filtre türünü koruyun ve Not Late onay kutusunu işaretleyin. Bu, görselleştirme verilerini yalnızca Late Status değeri Not Late içeren kayıtlara göre filtreler.

10. Görünüş > Genel öğesini genişletin.

11. Başlıkları göster'i Kapalı olarak ayarlayın.

12. Görünüm > Sunum bölümünü genişletin.

13. Aralık sınırları altında, Maks değerini aşağıdaki değere ayarlayın:

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

14. Grafik yapılandırmasını Radyal'dan Çubuk'a değiştirin.

15. Yönlendirme'yi Otomatik'ten Özel'e değiştirin ve Yatay'ın seçili olduğundan emin olun.

16. Kitaplığı kullan seçeneğini kapatın ve Renk'i #006580 olarak ayarlayın.

17. the Stil icon 'e tıklayın.

18. Kenarlık altında, Dış Çizgi'yi 0 piksel olarak ayarlayın.

19. Grafik sekmesine geçiş yapın. Değer etiketi için rengi #ffffff olarak ayarlayın.

20. Stil panelinden çıkmak için the Sol ok icon'e tıklayın.

21. Görünüş > Hesaplama ekseni: Sum(Sales)'ni genişletin.

22. Etiketler ve başlık değerini Yok olarak ayarlayın.

23. Düzen kapsayıcısına dönmek için paneldeki üst sütuna tıklayın.

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

#### Late gösterge

Aşağıdakileri yapın:

1. İçerik > Grafikler altında, Ekle'ye tıklayın. Gösterge'yi seçin.

2. Öğeyi genişlet. Etiket değerini Gauge\_Late olarak ayarlayın.

3. Boyut altında, aşağıdakileri ayarlayın:

   * Genişlik (%): 48

   * Yükseklik (%): 15

4. Konum altında, aşağıdakileri ayarlayın:

   * X ekseni (%): 51

   * Y ekseni (%): 11

5. Özellikleri düzenle'ye tıklayın.

6. Hesaplama olarak Sum(Sales) öğesini ekleyin.

7. Özellikler panelinde, Veri > Filtreler altında, Ekle'ye tıklayın.

8. Late Status öğesini seçin. Filtreyi genişletin.

9. Varsayılan Değerler filtre türünü koruyun ve Late onay kutusunu işaretleyin. Bu, görselleştirme verilerini yalnızca Late Status değeri Late içeren kayıtlara göre filtreler.

10. Görünüş > Genel öğesini genişletin.

11. Başlıkları göster'i Kapalı olarak ayarlayın.

12. Görünüm > Sunum bölümünü genişletin.

13. Aralık sınırları altında, Maks değerini aşağıdaki değere ayarlayın:

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

14. Grafik yapılandırmasını Radyal'dan Çubuk'a değiştirin.

15. Yön'ü Otomatik'ten Özel'e değiştirin ve Yatay'ın seçili olduğundan emin olun.

16. Kitaplığı kullan'ı kapatın ve Renk'i #87205d olarak ayarlayın.

17. the Stil icon 'e tıklayın.

18. Kenarlık altında, Dış Çizgi'yi 0 piksel olarak ayarlayın.

19. Grafik sekmesine geçiş yapın. Değer etiketi için rengi #ffffff olarak ayarlayın.

20. Stil panelinden çıkmak için the Sol ok icon'e tıklayın.

21. Görünüş > Hesaplama ekseni: Sum(Sales)'ni genişletin.

22. Etiketler ve başlık değerini Yok olarak ayarlayın.

23. Düzen kapsayıcısına geri dönmek için paneldeki üst sütuna tıklayın.

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

#### Not Late KPI

Aşağıdakileri yapın:

1. İçerik > Grafikler altında, Ekle'ye tıklayın. KPI'ı seçin.

2. Öğeyi genişletin. Etiket değerini KPI\_NotLate olarak ayarlayın.

3. Boyut altında, aşağıdakileri ayarlayın:

   * Genişlik (%): 48

   * Yükseklik (%): 9

4. Konum altında aşağıdakileri ayarlayın:

   * X ekseni (%): 1

   * Y ekseni (%): 27

5. Özellikleri düzenle'ye tıklayın.

6. Hesaplama olarak Sum(Sales) öğesini ekleyin.

7. Ölçüme ilişkin özelliklerde, Sayı biçimlendirme ayarını Para Birimi olarak belirleyin.

8. Biçim desenini şuna değiştirin:

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

9. Özellikler panelinde, Veri > Filtreler altında, Ekle'ye tıklayın.

10. Late Status öğesini seçin. Filtreyi genişletin.

11. Varsayılan Değerler filtre türünü koruyun ve Not Late onay kutusunu işaretleyin. Bu, görselleştirme verilerini yalnızca Late Status değeri Not Late içeren kayıtlara göre filtreler.

12. Görünüş > Genel öğesini genişletin.

13. Başlıkları göster'i Kapalı olarak ayarlayın.

14. Görünüm > Sunum bölümünü genişletin.

15. the Stil icon 'e tıklayın.

16. Kenarlık altında, Dış Çizgi'yi 0 piksel olarak ayarlayın.

17. Grafik sekmesine geçiş yapın. Aşağıdaki özellikleri ayarlayın:

    * Düzen davranışı: Uyumlu

    * Yazı tipi boyutu: Maksimum değer

    * İlk KPI başlığını göster seçeneğini kapatın.

18. Stil panelinden çıkmak için the Sol ok icon öğesine tıklayın.

19. Görünüş > Renk öğesini genişletin.

20. Kitaplık renkleri geçişli düğmesini kapatın. Renk değerini #006580 yapın.

21. Düzen kapsayıcısına dönmek için paneldeki üst sütuna tıklayın.

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

#### Late KPI

Aşağıdakileri yapın:

1. İçerik > Grafikler altında, Ekle'ye tıklayın. KPI'ı seçin.

2. Öğeyi genişletin. Etiket değerini KPI\_Late olarak ayarlayın.

3. Boyut altında, aşağıdakileri ayarlayın:

   * Genişlik (%): 48

   * Yükseklik (%): 9

4. Konum altında, aşağıdakileri ayarlayın:

   * X ekseni (%): 51

   * Y ekseni (%): 27

5. Özellikleri düzenle'ye tıklayın.

6. Hesaplama olarak Sum(Sales) öğesini ekleyin.

7. Ölçüme ilişkin özelliklerde, Sayı biçimlendirme ayarını Para Birimi olarak belirleyin.

8. Biçim desenini şuna değiştirin:

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

9. Özellikler panelinde, Veri > Filtreler altında, Ekle'ye tıklayın.

10. Late Status öğesini seçin. Filtreyi genişletin.

11. Varsayılan Değerler filtre türünü koruyun ve Late onay kutusunu işaretleyin. Bu, görselleştirme verilerini yalnızca Late Status değeri Late içeren kayıtlara göre filtreler.

12. Görünüş > Genel öğesini genişletin.

13. Başlıkları göster'i Kapalı olarak ayarlayın.

14. Görünüm > Sunum bölümünü genişletin.

15. the Stil icon 'e tıklayın.

16. Kenarlık altında, Dış Çizgi'yi 0 piksel olarak ayarlayın.

17. Grafik sekmesine geçiş yapın. Aşağıdaki özellikleri ayarlayın:

    * Düzen davranışı: Uyumlu

    * Yazı tipi boyutu: Maksimum değer

    * İlk KPI başlığını göster seçeneğini kapatın.

18. Stil panelinden çıkmak için the Sol ok icon öğesine tıklayın.

19. Görünüş > Renk öğesini genişletin.

20. Kitaplık renkleri seçeneğini kapatın. Rengi #87205d olarak ayarlayın.

21. Paneldeki üst sütuna tıklayarak düzen kapsayıcısına geri dönün.

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

#### Değer etiketleri olmayan sütun grafik

Aşağıdakileri yapın:

1. İçerik > Grafikler altında, Ekle'ye tıklayın. Sütun grafiği seçin.

2. Öğeyi genişletin. Etiket'i BarChart\_Simple olarak ayarlayın.

3. Gösterim koşulu için the İfade düzenleyicisini aç icon'e tıklayın.

4. Aşağıdakileri ekleyin:

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

5. Uygula'ya tıklayın.

6. Boyut altında aşağıdakileri ayarlayın:

   * Genişlik (%): 81

   * Yükseklik (%): 62

7. Konum altında, aşağıdakileri ayarlayın:

   * X ekseni (%): 1

   * Y ekseni (%): 37

8. Özellikleri düzenle'ye tıklayın.

9. Boyut olarak Product Type öğesini ekleyin.

10. Başka bir boyut ekle: Late Status.

    Product Type şimdi Grup olarak ve Late Status Çubuklar olarak listelenmelidir.

11. Hesaplama olarak Sum(Sales) öğesini ekleyin.

12. Ölçüme ilişkin özelliklerde, Sayı biçimlendirme ayarını Para Birimi olarak belirleyin.

13. Biçim deseni öğesini şuna değiştirin:

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

14. Görünüş > Genel öğesini genişletin.

15. Başlıkları göster'i Kapalı olarak ayarlayın.

16. Görünüm > Sunum bölümünü genişletin.

17. Gruplandırılmış sunumdan Yığılmış sunuma geçin.

18. Kılavuz çizgisi aralığı'nı Özel olarak ayarlayın. Açılır menüden Çizgi yok seçeneğini belirleyin.

19. the Stil icon 'e tıklayın.

20. Kenarlık altında, Dış Çizgi'yi 0 piksel olarak ayarlayın.

21. Grafik sekmesine geçiş yapın. Aşağıdaki özellikleri ayarlayın:

    * Eksen etiketi yazı tipi boyutu: 16 piksel

22. Stil panelinden çıkmak için the Sol ok icon öğesine tıklayın.

23. Genişlet Görünüm > Renkler ve gösterge.

24. Renkler'i Özel > İfadeye göre olarak ayarlayın. Aşağıdaki ifadeyi kullanın:

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

25. Gösterge göster seçeneğini Kapalı olarak ayarlayın.

26. Genişlet Görünüm > X ekseni: Product Type, Late Status.

27. Etiketler ve başlık'ı Yalnızca etiketler olarak ayarlayın.

28. Görünüş > Y ekseni: Sum(Sales) öğesini genişletin.

29. Etiketler ve başlık'ı Yalnızca etiketler olarak ayarlayın.

30. Düzen kapsayıcısına geri dönmek için paneldeki üst sütuna tıklayın.

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

#### Değer etiketli çubuk grafik

Aşağıdakileri yapın:

1. İçerik > Grafikler altında, BarChart\_Simple öğesine sağ tıklayın ve Çoğalt'a tıklayın.

2. Öğeyi genişlet. Etiket'i BarChart\_Detailed olarak ayarlayın.

3. Gösterim koşulu için the İfade düzenleyicisini aç icon'e tıklayın.

4. Aşağıdakileri ekleyin:

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

5. Uygula'ya tıklayın.

6. Özellikleri düzenle'ye tıklayın.

7. Görünüm > Sunum bölümünü genişletin.

8. Değer etiketlerini açın.

9. Segment etiketlerini açın ve Toplam etiketlerinin açık olduğundan emin olun.

10. the Stil icon 'e tıklayın.

11. Grafik sekmesine geçiş yapın. Aşağıdaki özellikleri ayarlayın:

    * Eksen etiketi yazı tipi boyutu: 16 px

    * Değer etiketleri yazı tipi boyutu: 14 px

12. the Sol ok icon öğesine tıklayarak stil panelinden çıkın.

13. Görünüm > Renkler ve gösterge öğesini genişletin.

14. Görünüm > X ekseni: Product Type, Late Status öğesini genişletin.

15. Etiketler ve başlık'ı Yalnızca etiketler olarak ayarlayın.

16. Görünüş > Y ekseni: Sum(Sales) öğesini genişletin.

17. Etiketler ve başlık'ı Yalnızca etiketler olarak ayarlayın.

18. Düzen kapsayıcısına dönmek için paneldeki üst sütuna tıklayın.

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

#### Değer etiketleri için geçiş anahtarı

Düzen kapsayıcısında bir bileşik anahtar düğmesi oluşturmak için kullanılacak üç ana görselleştirme oluşturun. Bu geçiş anahtarı, kullanıcıların sütun grafikteki değer etiketlerini açıp kapatmasına olanak tanır.

Öğe 1: Geçiş anahtarı tabanı

Aşağıdakileri yapın:

1. İçerik > Grafikler altında, Ekle'ye tıklayın. Düğme'yi seçin.

2. Öğeyi genişletin. Etiket değerini ToggleSwitch\_Base olarak ayarlayın.

3. Boyut altında, aşağıdakileri ayarlayın:

   * Genişlik (%): 16

   * Yükseklik (%): 7

4. Konum altında aşağıdakileri ayarlayın:

   * X ekseni (%): 83

   * Y ekseni (%): 90

5. Özellikleri düzenle'ye tıklayın.

6. Genişlet Eylemler ve navigasyon.

7. İşlem ekle'ye tıklayın.

8. Eylem için Değişken değerini ayarla seçin.

9. Değişken için vViewChartValues seçin.

10. Değer için the İfade düzenleyicisini aç icon tıklayın.

11. Şu ifadeyi ekleyin:

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

12. Uygula'ya tıklayın.

13. Görünüş > Genel öğesini genişletin.

14. Show Values öğesini Etiket olarak ayarlayın.

15. Görünüm > Sunum bölümünü genişletin.

16. the Stil icon 'e tıklayın.

17. Kenarlık altında, Dış Çizgi'yi 2 piksel olarak ayarlayın.

18. Kenarlık rengini #000000 olarak ayarlayın.

19. Kenarlık için Köşe yarıçapını 0 piksel olarak ayarlayın.

20. Grafik sekmesine geçiş yapın. Aşağıdaki özellikleri ayarlayın:

    * Düzen davranışı: Uyumlu

    * Yazı tipi boyutu: 0.5

    * Yazı tipi rengi > Renk: #000000

    * Arka plan seçenekleri > Kullanılan renk: #ffffff

21. Stil panelinden çıkmak için the Sol ok icon öğesine tıklayın.

22. Düzen kapsayıcısına dönmek için paneldeki üst sütuna tıklayın.

Öğe 2: AÇIK durumunu temsil eden düğme kısmı

Aşağıdakileri yapın:

1. İçerik > Grafikler altında, Ekle öğesine tıklayın. Düğme'yi seçin.

2. Öğeyi genişletin. Etiket'i ToggleSwitch\_ON olarak ayarlayın.

3. Gösterim koşulu için the İfade düzenleyicisini aç icon'e tıklayın.

4. Aşağıdakileri ekleyin:

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

5. Uygula'ya tıklayın.

6. Boyut altında aşağıdakileri ayarlayın:

   * Genişlik (%): 4

   * Yükseklik (%): 7

7. Konum altında aşağıdakileri ayarlayın:

   * X ekseni (%): 95}] ⏎

   * Y ekseni (%): 90

8. Özellikleri düzenle'ye tıklayın.

9. Genişlet Eylemler ve navigasyon.

10. İşlem ekle'ye tıklayın.

11. Eylem için Değişken değerini ayarla seçin.

12. Değişken için vViewChartValues seçin.

13. Değer için the İfade düzenleyicisini aç icon tıklayın.

14. Şu ifadeyi ekleyin:

    ```
    =false()
    ```

15. Uygula'ya tıklayın.

16. Görünüş > Genel öğesini genişletin.

17. On öğesini Etiket olarak ayarlayın.

18. Görünüm > Sunum bölümünü genişletin.

19. the Stil icon 'e tıklayın.

20. Kenarlık altında, Dış Çizgi'yi 2 piksel olarak ayarlayın.

21. Kenarlık rengini #000000 olarak ayarlayın.

22. Kenarlık için Köşe yarıçapını 0 piksel olarak ayarlayın.

23. Grafik sekmesine geçiş yapın. Aşağıdaki özellikleri ayarlayın:

    * Düzen davranışı: Uyumlu

    * Yazı tipi boyutu: 0.5

    * Yazı tipi rengi > Renk: #ffffff

    * Arka plan seçenekleri > Kullanılan renk: #109600

24. Stil panelinden çıkmak için the Sol ok icon öğesine tıklayın.

25. Paneldeki üst sütuna tıklayarak düzen kapsayıcısına geri dönün.

Öğe 3: KAPALI durumunu temsil eden düğme kısmı

Aşağıdakileri yapın:

1. İçerik > Grafikler altında, Ekle'ye tıklayın. Düğme'yi seçin.

2. Öğeyi genişletin. Etiket'i ToggleSwitch\_ON olarak ayarlayın.

3. Gösterim koşulu için the İfade düzenleyicisini aç icon'e tıklayın.

4. Aşağıdakileri ekleyin:

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

5. Uygula'ya tıklayın.

6. Boyut altında aşağıdakileri ayarlayın:

   * Genişlik (%): 4

   * Yükseklik (%): 7

7. Konum altında aşağıdakileri ayarlayın:

   * X ekseni (%): 83

   * Y ekseni (%): 90

8. Özellikleri düzenle'ye tıklayın.

9. Genişlet Eylemler ve navigasyon.

10. İşlem ekle'ye tıklayın.

11. Eylem için Değişken değerini ayarla seçin.

12. Değişken için vViewChartValues seçin.

13. Değer için the İfade düzenleyicisini aç icon tıklayın.

14. Şu ifadeyi ekleyin:

    ```
    =true()
    ```

15. Uygula'ya tıklayın.

16. Görünüş > Genel öğesini genişletin.

17. Off öğesini Etiket olarak ayarlayın.

18. Görünüm > Sunum bölümünü genişletin.

19. the Stil icon 'e tıklayın.

20. Kenarlık altında, Dış Çizgi'yi 2 piksel olarak ayarlayın.

21. Kenarlık rengini #000000 olarak ayarlayın.

22. Kenarlık için Köşe yarıçapını 0 piksel olarak ayarlayın.

23. Grafik sekmesine geçiş yapın. Aşağıdaki özellikleri ayarlayın:

    * Düzen davranışı: Uyumlu

    * Yazı tipi boyutu: 0.5

    * Yazı tipi rengi > Renk: #ffffff

    * Arka plan seçenekleri > Kullanılan renk: #ff001e

24. Stil panelinden çıkmak için the Sol ok icon öğesine tıklayın.

25. Düzen kapsayıcısına dönmek için paneldeki üst sütuna tıklayın.

## Bölüm 4: Sunumu sonlandırın

Başlık ve kenarlık ekleyerek düzen kapsayıcısını sonlandırın.

Aşağıdakileri yapın:

1. Özellikler panelinde Görünüm > Genel bölümünü genişletin.

2. Başlığı Geç vs. olarak ayarlayın. Geç Olmayan Siparişler - Satış Etkisi.

3. Görünüm > Sunum bölümünü genişletin.

4. Açın Grafikleri içeride tut.

5. Tıklayın the Stil icon .

6. Kenarlık için aşağıdaki özellikleri ayarlayın:

   * Anahat: 2 px

   * Renk: #7b7a78

7. Gölge için aşağıdaki özellikleri ayarlayın:

   * Orta boyut

   * Renk: #7b7a78

## Sonuçlar

Sayfa düzenleme modundan çıkın. Basit ve ayrıntılı sütun grafik arasında geçiş yapmak için geçiş düğmesine tıklayın.

Düzen kapsayıcısı, Değerleri göster kapalıyken

Düzen kapsayıcısı, Değerleri göster kapalıyken

Düzen kapsayıcısı, Değerleri gösterDeğerleri göster kapalıyken ![Layout container with 'Show values' switched off, presenting the bar chart without value labels](https://help.qlik.com/tr-TR/cloud-services/Subsystems/Hub/Content/Resources/Images/ui_example-layout-container-final-simple-view.png)

Layout container with Show values switched on

Layout container with Show values switched on

Layout container with Show valuesShow values switched on ![Layout container with 'Show values' switched on, presenting the bar chart with value labels](https://help.qlik.com/tr-TR/cloud-services/Subsystems/Hub/Content/Resources/Images/ui_example-layout-container-final.png)

Click on the Not Late and Late titles at the top of the chart. Bu öğelere tıklamanın uygulamadaki ilgili değerleri seçtiğini unutmayın.

Alanında Late Status seçim Not Late içeren düzen kapsayıcı.

Alanında Late Status seçim Not Late içeren düzen kapsayıcı.

Alanında Late StatusLate Status seçim Not LateNot Late içeren düzen kapsayıcı. ![Düzen kapsayıcı, 'Geç Durum' alanında yapılan seçimle.](https://help.qlik.com/tr-TR/cloud-services/Subsystems/Hub/Content/Resources/Images/ui_example-layout-container-final_selections.png)