diff --git a/app/index.html b/app/index.html
index 5192d1b..46fec53 100644
--- a/app/index.html
+++ b/app/index.html
@@ -254,5 +254,19 @@
       <link rel="stylesheet" href="bower_components/angular-ui-clock/dist/angular-clock.css">
       <link href="//fonts.googleapis.com/css?family=Syncopate:400,700" rel="stylesheet" type="text/css">
 
+      <!--for drill down regional chart-->
+      <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
+      <script src="https://code.highcharts.com/maps/highmaps.js"></script>
+      <script src="https://code.highcharts.com/maps/modules/data.js"></script>
+      <script src="https://code.highcharts.com/maps/modules/drilldown.js"></script>
+      <script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
+      <script src="https://code.highcharts.com/maps/modules/offline-exporting.js"></script>
+      <script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
+
+      <link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
+
+
+
+
    </body>
 </html>
\ No newline at end of file
diff --git a/app/partials/analytics/analytics.controller.js b/app/partials/analytics/analytics.controller.js
index bc8ff95..22dbaa6 100644
--- a/app/partials/analytics/analytics.controller.js
+++ b/app/partials/analytics/analytics.controller.js
@@ -3,8 +3,8 @@ angular.module('acufuel')
     .controller('analyticsController', ['$scope', 'analyticsService', function($scope, analyticsService) {
 
 
-         
-        $scope.getAllRegionalPap = function() {
+         // Sand Signika Overview without drill down -KD 
+       /* $scope.getAllRegionalPap = function() {
             $scope.flag=true;
             $scope.stateList = [{region:'Alabama',code:'AL'},{region:'Alaska',code:'AK'},{region:'Arizona',code:'AZ'},{region:'Arkansas',code:'AR'},
                 {region:'California',code:'CA' },{region:'Colorado',code:'CO'},{region:'Connecticut',code:'CT'},{region:'Delaware',code:'DE'},
@@ -63,7 +63,7 @@ angular.module('acufuel')
                             enabled: true
                         },
 
-                        /* colorAxis: {
+                         colorAxis: {
                              min: 1,
                              type: 'logarithmic',
                              minColor: '#2b908f',
@@ -73,7 +73,7 @@ angular.module('acufuel')
                                  [5, '#f45b5b'],
                                  [10, 'rgb(117,0,0)']
                              ]
-                         },*/
+                         },
 
                         series: [{
                             animation: {
@@ -95,7 +95,195 @@ angular.module('acufuel')
             })
         }
 
-        $scope.getAllRegionalPap();
+         $scope.getAllRegionalPap();*/
+
+      
+            //Implemented drill down chart and Now used this on  07 Sep 2018 -KD
+
+            /*
+            TODO:
+            - Check data labels after drilling. Label rank? New positions?
+            */
+            $scope.getAllRegionalPapDrilldown = function() {
+                $scope.flag=true;//for spinner
+            var data = Highcharts.geojson(Highcharts.maps['countries/us/us-all']);
+             var   separators = Highcharts.geojson(Highcharts.maps['countries/us/us-all'], 'mapline');
+                // Some responsiveness
+                 //var small = $('#container').width() < 400;
+
+            analyticsService.getAllRPP().then(function(result) {
+                    for (var i = 0; i < data.length; i++) {
+                        for (var j = 0; j<result.length; j++){
+                            if (data[i].name === result[j].region) {
+                                
+                                data[i].value = result[j].averagePAP.toFixed(2);
+                           
+                            }
+                        }      
+                        
+                    }
+
+                    $.each(data, function (i) {
+                        this.drilldown = this.properties['hc-key'];
+                        this.value = this.value;  
+                    });
+
+                 $scope.flag=false; 
+            // Instantiate the map
+            Highcharts.mapChart('container', {
+                chart: {
+                    events: {
+                        drilldown: function (e) {
+                            if (!e.seriesOptions) {
+                                var chart = this,
+                                    mapKey = 'countries/us/' + e.point.drilldown + '-all',
+                                    
+                                    // Handle error, the timeout is cleared on success
+                                    fail = setTimeout(function () {
+                                        if (!Highcharts.maps[mapKey]) {
+                                            chart.showLoading('<i class="icon-frown"></i> Failed loading ' + e.point.name);
+                                            fail = setTimeout(function () {
+                                                chart.hideLoading();
+                                            }, 1000);
+                                        }
+                                    }, 3000);
+
+                                // Show the spinner
+                                chart.showLoading('<i class="icon-spinner icon-spin icon-3x"></i>'); // Font Awesome spinner
+
+                                // Load the drilldown map
+                                $.getScript('https://code.highcharts.com/mapdata/' + mapKey + '.js', function () {
+
+                                    var region = e.point.name;
+                                    //called the get api region wise 
+                                   analyticsService.getRPP(region).then(function(result) {
+
+                                    data = Highcharts.geojson(Highcharts.maps[mapKey]);
+
+                                     for (var i = 0; i < data.length; i++) {
+                                          for (var j = 0; j<result.length; j++){
+                                            
+                                            //delete the County word from api result to match with map data
+                                            result[j].region = result[j].region.replace("County","");
+
+                                                if (data[i].name.trim() === result[j].region.trim()) {
+                                                       
+                                                        data[i].value = result[j].averagePAP.toFixed(2);
+                                                
+                                                    } 
+                                                }      
+                                                    
+                                            }                                      
+                                        })
+                                             
+                                    // Set a non-random bogus value
+
+                                    $.each(data, function (i) {
+                                        this.value = this.value;                                            
+                                    });
+
+                                    // Hide loading and add series
+                                    chart.hideLoading();
+                                    clearTimeout(fail);
+                                    chart.addSeriesAsDrilldown(e.point, {
+                                        name: e.point.name,
+                                        data: data,
+                                        dataLabels: {
+                                            enabled: true,
+                                            format: '{point.name}'
+                                        }
+                                    });
+                                });
+                            }
+
+                            this.setTitle(null, { text: e.point.name });
+                        },
+                        drillup: function () {
+                            this.setTitle(null, { text: '' });
+                        }
+                    }
+                },
+
+                title: {
+                    text: 'USA Map-Drilldown for Regional Pricing'
+                },
+
+                subtitle: {
+                    text: '',
+                    floating: true,
+                    align: 'right',
+                    y: 50,
+                    style: {
+                        fontSize: '16px'
+                    }
+                },
+
+               /* legend: small ? {} : {
+                    layout: 'vertical',
+                    align: 'right',
+                    verticalAlign: 'middle'
+                },
+
+                colorAxis: {
+                    min: 0,
+                    minColor: '#E6E7E8',
+                    maxColor: '#005645'
+                },*/
+
+                mapNavigation: {
+                    enabled: true,
+                    buttonOptions: {
+                        verticalAlign: 'bottom'
+                    }
+                },
+
+                plotOptions: {
+                    map: {
+                        states: {
+                            hover: {
+                                color: '#EEDD66'
+                            }
+                        }
+                    }
+                },
+
+                series: [{
+                    data: data,
+                    name: 'USA',
+                    dataLabels: {
+                        enabled: true,
+                        format: '{point.properties.postal-code}'
+                    }
+                }, {
+                    type: 'mapline',
+                    data: separators,
+                    color: 'silver',
+                    enableMouseTracking: false,
+                    animation: {
+                        duration: 500
+                    }
+                }],
+
+                drilldown: {
+                    activeDataLabelStyle: {
+                        color: '#FFFFFF',
+                        textDecoration: 'none',
+                        textOutline: '1px #000000'
+                    },
+                    drillUpButton: {
+                        relativeTo: 'spacingBox',
+                        position: {
+                            x: 0,
+                            y: 60
+                        }
+                    }
+                }
+            });
+        })
+    }
+
+    $scope.getAllRegionalPapDrilldown();
+
         
         /*$(document).ready(function() {
             $(function() {
@@ -118,7 +306,8 @@ angular.module('acufuel')
                     normalizeFunction: 'polynomial'
                 });
             });
-        })*/
+        })
+
 
 
         function getRegionPap(code) {
@@ -128,8 +317,9 @@ angular.module('acufuel')
                 $scope.showLoader = false;
                 $('#popup1').css('display', 'block');
             })
-        }
+        }*/
 
+         
         $scope.cancelStatus = function() {
             $('#popup1').css('display', 'none');
         }
diff --git a/app/partials/analytics/analytics.html b/app/partials/analytics/analytics.html
index c0f7277..d6d82f6 100644
--- a/app/partials/analytics/analytics.html
+++ b/app/partials/analytics/analytics.html
@@ -23,15 +23,16 @@
    .highcharts-button-box{
     display: none;
    }
+   
+   .highcharts-button-symbol{
+    display: none;
+   }
+   
    .highcharts-map-navigation{
     background-color: #eee;
     border-color: grey;
    }
-
-   /*.highcharts-legend{
-    transform: unset;
-    margin-top: 250px;
-   }*/
+    
 @import 'https://code.highcharts.com/css/themes/sand-signika.css';   
 </style>
 
@@ -155,7 +156,10 @@
                      <center><img id="spinner" src="/img/spinner.gif"/></center>  
                     </div>
                     <!-- <div id="map" style="width: 100%; height: 325px;"></div> -->
-                    <div ng-hide="flag" id="regional-pap" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
+
+                    <!-- <div ng-hide="flag" id="regional-pap" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div> -->
+
+                    <div ng-hide="flag" id="container" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
                   </div>
                   <!-- /widget-content -->
                 </div>