{"id":8425,"date":"2024-12-11T13:54:24","date_gmt":"2024-12-11T11:54:24","guid":{"rendered":"https:\/\/bitimpulse.com\/?post_type=manual&#038;p=8425"},"modified":"2024-12-11T13:54:24","modified_gmt":"2024-12-11T11:54:24","slug":"zobrazhennya-iz-pryvyazkoyu-do-danyh","status":"publish","type":"manual","link":"https:\/\/bitimpulse.com\/en\/manual\/zvit-interaktyvnyj-deshbord\/zobrazhennya\/zobrazhennya-iz-pryvyazkoyu-do-danyh\/","title":{"rendered":"Bound Image"},"content":{"rendered":"<p>To add a \u201cBound Images\u201d item, select the following sub-item:<\/p>\n<p><a href=\"http:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_1-2.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-8456\" src=\"http:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_1-2.png\" alt=\"\" width=\"154\" height=\"121\" \/><\/a><\/p>\n<p>A new element appears in the designer window:<\/p>\n<p><a href=\"http:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_2-2.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-8455\" src=\"http:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_2-2.png\" alt=\"\" width=\"782\" height=\"271\" srcset=\"https:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_2-2.png 782w, https:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_2-2-450x156.png 450w, https:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_2-2-300x104.png 300w, https:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_2-2-768x266.png 768w\" sizes=\"(max-width: 782px) 100vw, 782px\" \/><\/a><\/p>\n<p>Next, you need to choose how to bind the data to the image by clicking the \u201cOptions\u201d <a href=\"http:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_11_1_8.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-8183\" src=\"http:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_11_1_8.png\" alt=\"\" width=\"18\" height=\"17\" \/><\/a>\u00a0button next to an attribute. The following options will be available in the opened window:<\/p>\n<p><a href=\"http:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_3-2.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-8454\" src=\"http:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_3-2.png\" alt=\"\" width=\"467\" height=\"274\" srcset=\"https:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_3-2.png 467w, https:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_3-2-450x264.png 450w, https:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_3-2-300x176.png 300w\" sizes=\"(max-width: 467px) 100vw, 467px\" \/><\/a><\/p>\n<ul>\n<li>Binary Array \u2013 use this mode if images are stored in the data source as byte arrays;<\/li>\n<li>URI \u2013 use this mode to locate images accessible by a predefined In this case, the data source field should return strings that are parts of URIs to these images.<\/li>\n<\/ul>\n<p>For instance, the URI pattern in the form below specifies the path to the folder containing the required images:<\/p>\n<p><a href=\"http:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_4-2.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-8453\" src=\"http:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_4-2.png\" alt=\"\" width=\"467\" height=\"274\" srcset=\"https:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_4-2.png 467w, https:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_4-2-450x264.png 450w, https:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_4-2-300x176.png 300w\" sizes=\"(max-width: 467px) 100vw, 467px\" \/><\/a><\/p>\n<p>Data source field values will be inserted to the position of the {0} placeholder. Thus, the Bound Image maps the current dimension value with the image placed at the specified URI.<\/p>\n<p>For example, let us display flags for each country for the following table:<\/p>\n<p><a href=\"http:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_5-2.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-8452\" src=\"http:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_5-2.png\" alt=\"\" width=\"780\" height=\"477\" srcset=\"https:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_5-2.png 780w, https:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_5-2-450x275.png 450w, https:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_5-2-300x183.png 300w, https:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_5-2-768x470.png 768w\" sizes=\"(max-width: 780px) 100vw, 780px\" \/><\/a><\/p>\n<p>To start with, we will place the files with the corresponding image and name in the folder:<\/p>\n<p><a href=\"http:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_6-2.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-8451\" src=\"http:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_6-2.png\" alt=\"\" width=\"786\" height=\"320\" srcset=\"https:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_6-2.png 786w, https:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_6-2-450x183.png 450w, https:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_6-2-300x122.png 300w, https:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_6-2-768x313.png 768w\" sizes=\"(max-width: 786px) 100vw, 786px\" \/><\/a><\/p>\n<p>We will create a new \u201cBound Images\u201d element with the \u201cCountry\u201d attribute:<\/p>\n<p><a href=\"http:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_7-2.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-8450\" src=\"http:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_7-2.png\" alt=\"\" width=\"783\" height=\"557\" srcset=\"https:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_7-2.png 783w, https:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_7-2-450x320.png 450w, https:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_7-2-300x213.png 300w, https:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_7-2-768x546.png 768w\" sizes=\"(max-width: 783px) 100vw, 783px\" \/><\/a><\/p>\n<p>The form of data binding will be filled with the following data:<\/p>\n<p><a href=\"http:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_8-2.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-8449\" src=\"http:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_8-2.png\" alt=\"\" width=\"650\" height=\"283\" srcset=\"https:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_8-2.png 650w, https:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_8-2-450x196.png 450w, https:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_8-2-300x131.png 300w\" sizes=\"(max-width: 650px) 100vw, 650px\" \/><\/a><\/p>\n<p>Now, all is left is to insert the data source field values into the {0} placeholder position:<\/p>\n<p><a href=\"http:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_9-2.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-8448\" src=\"http:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_9-2.png\" alt=\"\" width=\"467\" height=\"274\" srcset=\"https:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_9-2.png 467w, https:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_9-2-450x264.png 450w, https:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_9-2-300x176.png 300w\" sizes=\"(max-width: 467px) 100vw, 467px\" \/><\/a><\/p>\n<p>As a result, we will get an interactive dashboard in which the table with the \u201cCountry\u201d hierarchy will be linked to the image:<\/p>\n<p><a href=\"http:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_10-2.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-8447\" src=\"http:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_10-2.png\" alt=\"\" width=\"545\" height=\"461\" srcset=\"https:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_10-2.png 545w, https:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_10-2-450x381.png 450w, https:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/12\/8_16_2_10-2-300x254.png 300w\" sizes=\"(max-width: 545px) 100vw, 545px\" \/><\/a><\/p>","protected":false},"featured_media":0,"parent":8403,"menu_order":258,"template":"","manuals":[17],"class_list":["post-8425","manual","type-manual","status-publish","hentry","manuals-bat-report"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/bitimpulse.com\/en\/wp-json\/wp\/v2\/manual\/8425","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bitimpulse.com\/en\/wp-json\/wp\/v2\/manual"}],"about":[{"href":"https:\/\/bitimpulse.com\/en\/wp-json\/wp\/v2\/types\/manual"}],"up":[{"embeddable":true,"href":"https:\/\/bitimpulse.com\/en\/wp-json\/wp\/v2\/manual\/8403"}],"wp:attachment":[{"href":"https:\/\/bitimpulse.com\/en\/wp-json\/wp\/v2\/media?parent=8425"}],"wp:term":[{"taxonomy":"manuals","embeddable":true,"href":"https:\/\/bitimpulse.com\/en\/wp-json\/wp\/v2\/manuals?post=8425"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}