diff --git a/module/chart/control.php b/module/chart/control.php
index 71e3d63bf9..02aee8bcde 100644
--- a/module/chart/control.php
+++ b/module/chart/control.php
@@ -65,6 +65,7 @@ class chart extends control
         $filters       = $this->post->filters;
         $fieldSettings = $this->post->fieldSettings;
         $langs         = $this->post->langs;
+        $sql           = $this->post->sql;
         $clientLang    = $this->app->getClientLang();
 
         $fieldPairs = array();
@@ -91,7 +92,7 @@ class chart extends control
             if($type == 'select')
             {
                 $fieldSetting = $fieldSettings[$field];
-                $options      = $this->chart->getSysOptions(zget($fieldSetting, 'type', ''), zget($fieldSetting, 'object', ''), zget($fieldSetting, 'field', ''));
+                $options      = $this->chart->getSysOptions(zget($fieldSetting, 'type', ''), zget($fieldSetting, 'object', ''), zget($fieldSetting, 'field', ''), $sql);
             }
 
             $filterHtml = array();
diff --git a/module/chart/js/common.js b/module/chart/js/common.js
index fccf9656d0..f7d9bf587c 100644
--- a/module/chart/js/common.js
+++ b/module/chart/js/common.js
@@ -36,19 +36,28 @@ function resizeChart()
     }
 }
 
+function waitForRepaint(callback)
+{
+    window.requestAnimationFrame(function()
+    {
+        window.requestAnimationFrame(callback);
+    });
+}
+
 /**
  * Init picker.
  *
  * @access public
  * @return void
  */
-function initPicker($row, pickerName = 'picker-select')
+function initPicker($row, pickerName = 'picker-select', onready = false)
 {
     $row.find('.' + pickerName).picker(
     {
         maxDropHeight: pickerHeight,
         onReady: function()
         {
+            if(!onready) return;
             if(!$row.find('.picker')) return;
             if(window.getComputedStyle($row.find('.picker').find('.picker-selections')[0]).getPropertyValue('width') !== 'auto')
             {
diff --git a/module/chart/js/preview.js b/module/chart/js/preview.js
index c4f4682008..8a6a3e503e 100644
--- a/module/chart/js/preview.js
+++ b/module/chart/js/preview.js
@@ -159,14 +159,15 @@ function calcPreviewGrowFilter(resize = false)
         chart.filters.forEach(function(filter, index)
         {
             var nowItem      = '.filter-item-' + index;
-            var leftPadding  = parseInt($filterItems.find(nowItem).css('padding-left'));
-            var rightPadding = parseInt($filterItems.find(nowItem).css('padding-right'));
-            var spanWidth    = $filterItems.find(nowItem).find('.input-group-addon').first()[0].getBoundingClientRect().width;
+            var $nowDom      = $filterItems.find(nowItem);
+            var leftPadding  = parseInt($nowDom.css('padding-left'));
+            var rightPadding = parseInt($nowDom.css('padding-right'));
+            var spanWidth    = $nowDom.find('.input-group-addon').first()[0].getBoundingClientRect().width;
             var filterWidth  = ((filter.type == 'input' || filter.type == 'select') ? WIDTH_INPUT : WIDTH_DATE) + (spanWidth + leftPadding + rightPadding);
 
             /* Clear the flex-basis and set flex-basic again. */
-            $filterItems.find(nowItem).css('flex-basis', '');
-            $filterItems.find(nowItem).css('flex-basis', filterWidth);
+            $nowDom.css('flex-basis', '');
+            $nowDom.css('flex-basis', filterWidth);
             if(nowWidth - filterWidth >= 0)
             {
                 nowWidth -= filterWidth;
@@ -185,12 +186,27 @@ function calcPreviewGrowFilter(resize = false)
         $filterItems.children().removeClass('filter-item-grow');
         chart.filters.forEach(function(filter, index)
         {
-            var nowItem = '.filter-item-' + index;
-            if(canGrowTotal >= index + 1) $filterItems.find(nowItem).addClass('filter-item-grow');
+            var $nowDom = $filterItems.find('.filter-item-' + index);
+            if(canGrowTotal >= index + 1) $nowDom.addClass('filter-item-grow');
+            if(filter.type == 'select' && $nowDom.find('.picker').length) $nowDom.find('.picker').find('.picker-selections').css('width', WIDTH_INPUT);
         });
 
         var queryType =(!lineWrap && nowWidth >= 60) ? '.query-inside' : '.query-outside';
         $filterBox.find(queryType).removeClass('hidden');
+
+        /* Set picker-selection width, default 128px. */
+        waitForRepaint(function()
+        {
+            chart.filters.forEach(function(filter, index)
+            {
+                var $nowDom = $filterItems.find('.filter-item-' + index);
+                if(filter.type == 'select' && $nowDom.find('.picker').length)
+                {
+                    var pickerWidth = $nowDom.hasClass('filter-item-grow') ? $nowDom.find('.picker')[0].getBoundingClientRect().width : WIDTH_INPUT;
+                    $nowDom.find('.picker').find('.picker-selections').css('width', pickerWidth);
+                }
+            });
+        });
     });
 }
 
@@ -206,7 +222,7 @@ function renderFilters(chart)
 
         var fieldNames = {};
         Object.keys(chart.fieldSettings).forEach(function(key){fieldNames[key] = chart.fieldSettings[key].name;});
-        $.post(createLink('chart', 'ajaxGetFilterForm', 'chartID=' + chart.id), {fieldList: fieldNames, fieldSettings: chart.fieldSettings, filters: chart.filters, langs: chart.langs}, function(resp)
+        $.post(createLink('chart', 'ajaxGetFilterForm', 'chartID=' + chart.id), {fieldList: fieldNames, fieldSettings: chart.fieldSettings, filters: chart.filters, langs: chart.langs, sql: chart.sql}, function(resp)
         {
             resp = JSON.parse(resp);
             var $filterItems = $('#filterItems' + chart.currentGroup + '_' + chart.id + ' .filter-items');
@@ -230,7 +246,7 @@ function renderFilterItem(filter, resp, index, step)
         search: resp[index].item
     };
     var html = $($.zui.formatString(tpl, data))
-    initPicker(html);
+    initPicker(html, 'picker-select', true);
     initDatepicker(html);
     return html;
 }