diff --git a/module/execution/css/cfd.css b/module/execution/css/cfd.css
index fd514e009f..b4c6fccabf 100644
--- a/module/execution/css/cfd.css
+++ b/module/execution/css/cfd.css
@@ -1,6 +1,14 @@
 .main-content > h2 {font-size: 16px;}
-#cfdWrapper {max-width: 1400px; margin: 0 auto; padding: 25px 100px 10px; position: relative;}
-#cfdYUnit {position: absolute; color: #CBD0DB; top: 27px; left: 130px;}
-#cfdXUnit {position: absolute; color: #CBD0DB; bottom: 35px; right: 60px;}
-
 .pull-left .input-control {margin-right: 10px;}
+
+@media screen and (max-width: 1920px)
+{
+#cfdWrapper {max-width: 1400px; margin: 0 auto; padding: 25px 0px 10px; position: relative}
+#cfdChart {width:1400px !important; height:600px !important}
+#cfdYUnit {position: absolute; color: #CBD0DB; top: 40px; left: 30px}
+#cfdXUnit {position: absolute; color: #CBD0DB; bottom: 20px; right: 0px}
+}
+@media screen and (max-width: 1366px)
+{
+#cfdChart {width:1150px !important; height:400px !important};
+}
diff --git a/module/execution/js/cfd.js b/module/execution/js/cfd.js
index e69de29bb2..0c037e391b 100644
--- a/module/execution/js/cfd.js
+++ b/module/execution/js/cfd.js
@@ -0,0 +1,93 @@
+$(function()
+{
+    if(chartData)
+    {
+        var i = 0;
+        var series     = [];
+        var colors     = ['#33B4DB', '#7ECF69', '#FFC73A', '#FF5A61', '#50C8D0', '#AF5AFF', '#4EA3FF', '#FF8C5A', '#6C73FF'];
+        //var background = ['#E1F4FA', '#ECF8E9', '#FFF7E2', '#FFE7E8', '#E5F7F8', '#F3E7FF', '#E5F1FF', '#FFEEE7', '#E9EAFF'];
+
+        $.each(chartData['line'], function(label, set)
+        {
+            series.push({
+              name: label,
+              type: 'line',
+              stack: 'Total',
+              color: colors[i],
+              areaStyle: {
+                color: colors[i],
+                opacity: 0.2
+              },
+              emphasis: {
+                focus: 'series'
+              },
+              data: eval(set)
+            })
+            i ++;
+        })
+
+        var chartDom = document.getElementById('cfdChart');
+        var CFD      = echarts.init(chartDom);
+        var option;
+
+        option = {
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'cross',
+              label: {
+                backgroundColor: '#6a7985'
+              }
+            }
+          },
+          legend: {
+            data: Object.keys(chartData['line'])
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+          },
+          xAxis: [
+          {
+              type: 'category',
+              boundaryGap: false,
+              data: chartData['labels'],
+              axisLine:
+              {
+                  show: true,
+                  lineStyle:
+                  {
+                      color: '#999',
+                      width:1
+                  }
+              }
+          }],
+          yAxis: [
+          {
+              type: 'value',
+              minInterval: 1,
+              axisLine:
+              {
+                  show: true,
+                  lineStyle:
+                  {
+                      color: ['#999'],
+                      width: 1
+                  }
+              }
+            }
+          ],
+          series: series,
+        };
+
+        option && CFD.setOption(option);
+        window.addEventListener('resize', CFD.resize);
+    }
+
+    $('#type').change(function()
+    {
+        location.href = createLink('execution', 'cfd', 'executionID=' + executionID + '&type=' + $(this).val());
+    });
+});
diff --git a/module/execution/view/cfd.html.php b/module/execution/view/cfd.html.php
index ee86dc4d81..2dc0232be5 100644
--- a/module/execution/view/cfd.html.php
+++ b/module/execution/view/cfd.html.php
@@ -14,6 +14,7 @@
 <?php js::import($jsRoot . 'echarts/echarts.common.min.js'); ?>
 <?php js::import($jsRoot . 'html2canvas/min.js'); ?>
 <?php js::set('executionID', $executionID); ?>
+<?php js::set('chartData', $chartData); ?>
 <div id='mainMenu' class='clearfix'>
   <div class='btn-toolbar pull-left'>
     <?php
@@ -36,94 +37,4 @@
     <div id="cfdXUnit"><?php echo $lang->execution->burnXUnit;?></div>
   </div>
 </div>
-<?php if(!empty($chartData)):?>
-<script>
-var i = 0;
-var series     = [];
-var colors     = ['#33B4DB', '#7ECF69', '#FFC73A', '#FF5A61', '#50C8D0', '#AF5AFF', '#4EA3FF', '#FF8C5A', '#6C73FF'];
-//var background = ['#E1F4FA', '#ECF8E9', '#FFF7E2', '#FFE7E8', '#E5F7F8', '#F3E7FF', '#E5F1FF', '#FFEEE7', '#E9EAFF'];
-
-<?php foreach($chartData['line'] as $label => $set):?>
-series.push({
-    name: '<?php echo $label;?>',
-    type: 'line',
-    stack: 'Total',
-    color: colors[i],
-    areaStyle: {
-        color: colors[i],
-        opacity: 0.2
-    },
-    emphasis: {
-        focus: 'series'
-    },
-    data: <?php echo $set;?>
-})
-i ++;
-<?php endforeach;?>
-
-var chartDom = document.getElementById('cfdChart');
-var CFD      = echarts.init(chartDom);
-var option;
-
-option = {
-    tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-            type: 'cross',
-            label: {
-                backgroundColor: '#6a7985'
-            }
-        }
-    },
-    legend: {
-      data: <?php echo json_encode(array_keys($chartData['line']));?>
-    },
-    grid: {
-        left: '3%',
-        right: '4%',
-        bottom: '3%',
-        containLabel: true
-    },
-    xAxis: [
-    {
-        type: 'category',
-        boundaryGap: false,
-        data: <?php echo json_encode($chartData['labels'])?>,
-        axisLine: {
-          show: true,
-          lineStyle:
-          {
-             color: '#999',
-             width:1,
-          }
-        }
-    }
-    ],
-    yAxis: [
-    {
-        type: 'value',
-        axisLine: {
-          show: true,
-          lineStyle:
-          {
-             color: '#999',
-             width:1,
-          }
-        }
-    }
-    ],
-    series: series,
-};
-
-option && CFD.setOption(option);
-window.addEventListener('resize', CFD.resize);
-</script>
-<?php endif;?>
-
-<script>
-$('#type').change(function()
-{
-    location.href = createLink('execution', 'cfd', 'executionID=' + executionID + '&type=' + $(this).val());
-});
-</script>
 <?php include '../../common/view/footer.html.php';?>