{"id":655,"date":"2025-07-15T11:17:40","date_gmt":"2025-07-15T11:17:40","guid":{"rendered":"https:\/\/documentation.iqonic.design\/graphina\/?p=655"},"modified":"2025-07-16T08:58:11","modified_gmt":"2025-07-16T08:58:11","slug":"common-filter-controls","status":"publish","type":"post","link":"https:\/\/documentation.iqonic.design\/graphina\/common-filter-controls\/","title":{"rendered":"Common Filter Controls"},"content":{"rendered":"<div class=\"nolwrap\">\n<p style=\"font-size:18px\">The <strong>Common Filter<\/strong> widget in Graphina is a powerful tool introduced to enhance data interactivity across multiple charts using a single filter control. This widget enables users to manipulate datasets across different chart types simultaneously, creating a more unified and intuitive data visualization experience.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\"><strong>Supported Chart Types<\/strong> :<\/h2>\n\n\n\n<p style=\"font-size:18px\">The Common Filter is compatible with <strong>selected charts only<\/strong>, ensuring optimal performance and integration. Currently, it supports:<\/p>\n\n\n\n<p style=\"font-size:18px\"><strong>Apex Charts Integration:<br><\/strong>Area Chart, Line Chart, Column Chart, Heatmap Chart, Radar Chart, Polar Chart, Pie Chart, Radial Chart, Distributed Column Chart, Scatter Chart<\/p>\n\n\n\n<p style=\"font-size:18px\"><strong>Google Charts Integration:<\/strong><br>Area Chart, Bar Chart, Line Chart, Column Chart<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\"><strong>Filter Control Types<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">Graphina offers <strong>two types of filter controls<\/strong> within the Common Filter widget:<\/p>\n\n\n\n<p style=\"font-size:18px\"><strong>Dropdown Control:<\/strong><br>Allows users to filter charts based on selectable values from a dropdown list. Ideal for categorical or segmented data.<\/p>\n\n\n\n<p style=\"font-size:18px\"><strong>Date Picker Control:<\/strong><br>Enables users to define a date range to dynamically filter charts based on time-sensitive or temporal data.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\"><strong>Unique Filter ID Mechanism<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">Each instance of a Common Filter generates a <strong>unique identifier (ID)<\/strong>. This ID is essential for linking the filter to multiple charts. Charts that need to respond to the filter must have this unique Common Filter ID assigned within their configuration.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\"><strong>How It Works<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">The Common Filter is configured once and embedded anywhere on the page.<\/p>\n\n\n\n<p style=\"font-size:18px\">Each supported chart is configured to <strong>listen<\/strong> to a specific Common Filter ID.<\/p>\n\n\n\n<p style=\"font-size:18px\">When the user interacts with the filter (selecting a value or date), <strong>all associated charts<\/strong> update dynamically with the filtered dataset.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1614\" height=\"767\" src=\"https:\/\/documentation.iqonic.design\/graphina\/wp-content\/uploads\/sites\/3\/2025\/07\/Screenshot2.png\" alt=\"\" class=\"wp-image-667\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1610\" height=\"832\" src=\"https:\/\/documentation.iqonic.design\/graphina\/wp-content\/uploads\/sites\/3\/2025\/07\/Screenshot3.png\" alt=\"\" class=\"wp-image-668\" \/><\/figure>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>The Common Filter widget in Graphina is a powerful tool introduced to enhance data interactivity across multiple charts using a single filter control. This widget enables users to manipulate datasets across different chart types simultaneously, creating a more unified and intuitive data visualization experience. Supported Chart Types : The Common Filter is compatible with selected [&hellip;]<\/p>\n","protected":false},"author":12,"featured_media":0,"parent":235,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-655","post","type-post","status-publish","format-standard","hentry","category-graphina"],"featured_image_src":null,"author_info":{"display_name":"wordpressadminiq","author_link":"https:\/\/documentation.iqonic.design\/graphina\/author\/wordpressadminiq\/"},"children":[],"_links":{"self":[{"href":"https:\/\/documentation.iqonic.design\/graphina\/wp-json\/wp\/v2\/posts\/655","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/documentation.iqonic.design\/graphina\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/documentation.iqonic.design\/graphina\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/graphina\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/graphina\/wp-json\/wp\/v2\/comments?post=655"}],"version-history":[{"count":3,"href":"https:\/\/documentation.iqonic.design\/graphina\/wp-json\/wp\/v2\/posts\/655\/revisions"}],"predecessor-version":[{"id":671,"href":"https:\/\/documentation.iqonic.design\/graphina\/wp-json\/wp\/v2\/posts\/655\/revisions\/671"}],"up":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/graphina\/wp-json\/wp\/v2\/posts\/235"}],"wp:attachment":[{"href":"https:\/\/documentation.iqonic.design\/graphina\/wp-json\/wp\/v2\/media?parent=655"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/documentation.iqonic.design\/graphina\/wp-json\/wp\/v2\/categories?post=655"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/documentation.iqonic.design\/graphina\/wp-json\/wp\/v2\/tags?post=655"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}