diff --git a/static/charts.html b/static/charts.html
index 2ac6d6c..72f9063 100644
--- a/static/charts.html
+++ b/static/charts.html
@@ -8,6 +8,12 @@
 <div id="container_1" style="width: 80%; height: 400px; margin: 0 auto"></div>
 <div id="container_2" style="width: 80%; height: 400px; margin: 0 auto"></div>
 <script>
+    position_map = {
+        'landlord': '地主',
+        'landlord_down': '地主下家',
+        'landlord_front': '地主对家',
+        'landlord_up': '地主上家',
+    }
     $(document).ready(function () {
         $.ajax({
             url: "metrics?type=lite_resnet",
@@ -25,7 +31,8 @@
                             text: 'Baseline: ' + rank
                         },
                         subtitle: {
-                            text: 'WP: ' + result[rank]['baseline'].landlord_wp + '\t/\t' + result[rank]['baseline'].farmer_wp + '<br/>' +
+                            text: 'WP: ' + result[rank]['baseline'].landlord_wp + '\t/\t' + result[rank]['baseline'].farmer_wp + '&nbsp;&nbsp;&nbsp;&nbsp;' +
+                            'ADP: ' + result[rank]['baseline'].landlord_adp + '\t/\t' + result[rank]['baseline'].farmer_adp + '<br/>' +
                             result[rank]['baseline'].landlord_path + '\t/\t' +
                             result[rank]['baseline'].landlord_down_path + '\t/\t' +
                             result[rank]['baseline'].landlord_front_path + '\t/\t' +
@@ -43,34 +50,54 @@
                         if (!result[rank].hasOwnProperty(position)) {
                             return null;
                         }
-                        return {
-                            name: position,
+                        return [{
+                            name: position_map[position] + " WP",
                             type: 'spline',
                             connectNulls: true,
+                            yAxis: 0,
+                            tooltip: {
+                                pointFormat: position_map[position] + ": WP: {point.y:.2f}%<br>"
+                            },
                             data: $.map(categories, function (frame) {
                                 if (result[rank][position].hasOwnProperty(frame)) {
-                                    return [[frame, parseFloat(result[rank][position][frame].wp) * 100]]
+                                    return [[frame, (parseFloat(result[rank][position][frame].wp) * 100)]]
                                 } else {
                                     return [[frame, '-']]
                                 }
                             })
-                        }
+                        }, {
+                            name: position_map[position] + " ADP",
+                            type: 'spline',
+                            connectNulls: true,
+                            yAxis: 1,
+                            visible: false,
+                            tooltip: {
+                                pointFormat: position_map[position] + "ADP: {point.y:.2f}<br>"
+                            },
+                            data: $.map(categories, function (frame) {
+                                if (result[rank][position].hasOwnProperty(frame)) {
+                                    return [[frame, parseFloat(result[rank][position][frame].adp)]]
+                                } else {
+                                    return [[frame, '-']]
+                                }
+                            })
+                        }]
                     })
                     json.xAxis = {
                         categories: categories
                     }
-                    json.yAxis = {
+                    json.yAxis = [{
                         title: {
                             text: 'Win Rate (%)'
+                        }
+                    }, {
+                        title: {
+                            text: 'ADP'
                         },
-                        plotLines: [{
-                            value: 0,
-                            width: 1,
-                            color: '#808080'
-                        }]
-                    };
+                        opposite: true
+                    }];
                     json.tooltip = {
-                        valueSuffix: '%'
+                        shared: true
                     };
                     json.legend = {
                         layout: 'vertical',