diff --git a/module/metric/js/preview.ui.js b/module/metric/js/preview.ui.js
index 5b6789d18c..8778e1fb1a 100644
--- a/module/metric/js/preview.ui.js
+++ b/module/metric/js/preview.ui.js
@@ -384,10 +384,16 @@ window.updateMetricBoxs = function(id, isChecked)
  */
 window.appendMetricBox = function(id, mode = 'add')
 {
-    $.get($.createLink('metric', 'ajaxGetMultipleMetricBox', 'metricID=' + id), function(resp)
-    {
-        $('.table-and-charts').append(resp);
-    });
+    var url = $.createLink('metric', 'ajaxGetMultipleMetricBox', 'metricID=' + id);
+
+    var metricDom = $('<div>');
+    var metricID  = 'metricBox' + id;
+    metricDom.attr('id', metricID);
+    metricDom.attr('metric-id', id);
+    metricDom.addClass('metricBox');
+
+    $('.table-and-charts').append(metricDom);
+    loadTarget(url, metricID);
 }
 
 window.handleQueryClick = function(id, viewType = 'single')
diff --git a/module/metric/ui/ajaxgetmultiplemetricbox.html.php b/module/metric/ui/ajaxgetmultiplemetricbox.html.php
index 06cbcc1bf0..f1c2ba97e0 100644
--- a/module/metric/ui/ajaxgetmultiplemetricbox.html.php
+++ b/module/metric/ui/ajaxgetmultiplemetricbox.html.php
@@ -130,106 +130,100 @@ $fnGenerateQueryForm = function() use($metricRecordType, $metric, $metricID, $da
 
 div
 (
-    set::id('metricBox' . $metricID),
-    set('metric-id', $metricID),
-    setClass('metricBox'),
+    setClass('metric-name metric-name-notfirst flex flex-between items-center'),
     div
     (
-        setClass('metric-name metric-name-notfirst flex flex-between items-center'),
-        div
+        span
         (
-            span
-            (
-                setClass('metric-name-weight'),
-                $metric->name
-            )
-        ),
-        div
-        (
-            setClass('flex-start'),
-            toolbar
-            (
-                haspriv('metric', 'details') ? item(set(array
-                (
-                    'text'  => $this->lang->metric->details,
-                    'class' => 'ghost details',
-                    'url'         => helper::createLink('metric', 'details', "metricID=$metricID"),
-                    'data-toggle' => 'modal'
-                ))) : null,
-                item(set(array
-                (
-                    'text'    => $this->lang->metric->remove,
-                    'class'   => 'ghost metric-remove',
-                    'onclick' => "window.handleRemoveLabel($metricID)"
-                ))),
-                haspriv('metric', 'filters') ? item(set(array
-                (
-                    'icon'  => 'menu-backend',
-                    'text'  => $this->lang->metric->filters,
-                    'class' => 'ghost hidden',
-                    'url'   => '#'
-                ))) : null,
-                haspriv('metric', 'zAnalysis') ? item(set(array
-                (
-                    'icon'  => 'chart-line',
-                    'text'  => $this->lang->metric->zAnalysis,
-                    'class' => 'ghost chart-line-margin hidden',
-                    'url'   => '#'
-                ))) : null
-            )
+            setClass('metric-name-weight'),
+            $metric->name
         )
     ),
-    $fnGenerateQueryForm(),
     div
     (
-        setClass('table-and-chart table-and-chart-multiple'),
-        div
+        setClass('flex-start'),
+        toolbar
         (
-            setClass('table-side'),
-            setStyle(array('flex-basis' => $tableWidth . 'px')),
-            div
+            haspriv('metric', 'details') ? item(set(array
             (
-                $groupData ? dtable
-                (
-                    set::height(310),
-                    set::bordered(true),
-                    set::cols($groupHeader),
-                    set::data(array_values($groupData)),
-                    ($metricRecordType == 'scope' || $metricRecordType == 'scope-date') ? set::footPager(usePager('dtablePager')) : null,
-                    $headerGroup ? set::plugins(array('header-group')) : null,
-                    set::onRenderCell(jsRaw('window.renderDTableCell'))
-                ) : null
-            )
-        ),
-        div
-        (
-            setClass('chart-side'),
-            div
+                'text'  => $this->lang->metric->details,
+                'class' => 'ghost details',
+                'url'         => helper::createLink('metric', 'details', "metricID=$metricID"),
+                'data-toggle' => 'modal'
+            ))) : null,
+            item(set(array
             (
-                setClass('chart-type'),
-                $echartOptions ? picker
-                (
-                    set::name('chartType'),
-                    set::items($chartTypeList),
-                    set::value('line'),
-                    set::required(true),
-                    set::onchange("window.handleChartTypeChange($metricID, 'multiple')")
-                ) : null
-            ),
-            div
+                'text'    => $this->lang->metric->remove,
+                'class'   => 'ghost metric-remove',
+                'onclick' => "window.handleRemoveLabel($metricID)"
+            ))),
+            haspriv('metric', 'filters') ? item(set(array
             (
-                setClass('chart chart-multiple'),
-                $echartOptions ? echarts
-                (
-                    set::xAxis($echartOptions['xAxis']),
-                    set::yAxis($echartOptions['yAxis']),
-                    set::legend($echartOptions['legend']),
-                    set::series($echartOptions['series']),
-                    set::dataZoom($echartOptions['dataZoom']),
-                    set::grid($echartOptions['grid']),
-                    set::tooltip($echartOptions['tooltip'])
-                )->size('100%', '100%') : null
-            )
+                'icon'  => 'menu-backend',
+                'text'  => $this->lang->metric->filters,
+                'class' => 'ghost hidden',
+                'url'   => '#'
+            ))) : null,
+            haspriv('metric', 'zAnalysis') ? item(set(array
+            (
+                'icon'  => 'chart-line',
+                'text'  => $this->lang->metric->zAnalysis,
+                'class' => 'ghost chart-line-margin hidden',
+                'url'   => '#'
+            ))) : null
+        )
+    )
+);
+$fnGenerateQueryForm();
+div
+(
+    setClass('table-and-chart table-and-chart-multiple'),
+    div
+    (
+        setClass('table-side'),
+        setStyle(array('flex-basis' => $tableWidth . 'px')),
+        div
+        (
+            $groupData ? dtable
+            (
+                set::height(310),
+                set::bordered(true),
+                set::cols($groupHeader),
+                set::data(array_values($groupData)),
+                ($metricRecordType == 'scope' || $metricRecordType == 'scope-date') ? set::footPager(usePager('dtablePager')) : null,
+                $headerGroup ? set::plugins(array('header-group')) : null,
+                set::onRenderCell(jsRaw('window.renderDTableCell'))
+            ) : null
+        )
+    ),
+    div
+    (
+        setClass('chart-side'),
+        div
+        (
+            setClass('chart-type'),
+            $echartOptions ? picker
+            (
+                set::name('chartType'),
+                set::items($chartTypeList),
+                set::value('line'),
+                set::required(true),
+                set::onchange("window.handleChartTypeChange($metricID, 'multiple')")
+            ) : null
+        ),
+        div
+        (
+            setClass('chart chart-multiple'),
+            $echartOptions ? echarts
+            (
+                set::xAxis($echartOptions['xAxis']),
+                set::yAxis($echartOptions['yAxis']),
+                set::legend($echartOptions['legend']),
+                set::series($echartOptions['series']),
+                set::dataZoom($echartOptions['dataZoom']),
+                set::grid($echartOptions['grid']),
+                set::tooltip($echartOptions['tooltip'])
+            )->size('100%', '100%') : null
         )
     )
 );