diff --git a/templates/CRM/Membershipchurnchart/Page/MembershipChurnChart.tpl b/templates/CRM/Membershipchurnchart/Page/MembershipChurnChart.tpl
index 06f26fc..56d492a 100644
--- a/templates/CRM/Membershipchurnchart/Page/MembershipChurnChart.tpl
+++ b/templates/CRM/Membershipchurnchart/Page/MembershipChurnChart.tpl
@@ -202,399 +202,400 @@
 
 {literal}
 <script type="text/javascript">
+window.onload = function() {
+  var mainData = {/literal}{$chartData}{literal};
+  var currentYear = {/literal}{$currentYear}{literal};
+  var allStatus = {/literal}{$allStatuses}{literal};
+  var aMinChurn = {/literal}{$minChurn}{literal};
+
+  var churn = aMinChurn[currentYear];
+  var churnstatus = ['Churn'];
+  var churnChartElementID = 'churnChartDiv';
+
+  // Refresh data
+  cj('#refreshData').click(function(){
+    showSpinner();
+
+    // Call the API to refresh chart data
+    CRM.api3('Membershipchurnchart', 'preparechurntable', {
+      "sequential": 1
+    }).done(function(result) {
+      // Refresh page
+      var url = CRM.url('civicrm/membership/membershipchurnchart');
+      window.location.href = url;
+    });
+  });
 
-var mainData = {/literal}{$chartData}{literal};
-var currentYear = {/literal}{$currentYear}{literal};
-var allStatus = {/literal}{$allStatuses}{literal};
-var aMinChurn = {/literal}{$minChurn}{literal};
-
-var churn = aMinChurn[currentYear];
-var churnstatus = ['Churn'];
-var churnChartElementID = 'churnChartDiv';
-
-// Refresh data
-cj('#refreshData').click(function(){
-  showSpinner();
-
-  // Call the API to refresh chart data
-  CRM.api3('Membershipchurnchart', 'preparechurntable', {
-    "sequential": 1
-  }).done(function(result) {
-    // Refresh page
-    var url = CRM.url('civicrm/membership/membershipchurnchart');
-    window.location.href = url;
+  // Start year filter
+  jQuery("#from").change(function(){
+    refreshChart();
   });
-});
-
-// Start year filter
-jQuery("#from").change(function(){
-  refreshChart();
-});
-
-// End year filter
-jQuery("#to").change(function(){
-  refreshChart();
-});
-
-jQuery("#select_deselect_all").click(function () {
-  if(this.checked){
-    jQuery('input:checkbox[name=membership_type_id]').each(function(){
-      this.checked = true;
-    });
-  } else {
-    jQuery('input:checkbox[name=membership_type_id]').each(function(){
-      this.checked = false;
-    });
-  }
-  refreshChart();
-});
-
-// Membership type filter
-jQuery('input:checkbox[name=membership_type_id]').change(function() {
-  var checkedBoxes = jQuery('input:checkbox[name=membership_type_id]:checked').length;
-  var allCheckBoxes = jQuery('input:checkbox[name=membership_type_id]').length;
-  if(checkedBoxes == allCheckBoxes){
-    jQuery('#select_deselect_all').attr('checked','checked');
-  }else{
-    jQuery('#select_deselect_all').removeAttr('checked');
-  }
-  refreshChart();
-});
 
-// Refresh chart if any filters are changed
-function refreshChart() {
-  data = getChartData();
-  buildChart(data, allStatus, churn);
-  buildChart(data, churnstatus, -5, churnChartElementID);
-}
+  // End year filter
+  jQuery("#to").change(function(){
+    refreshChart();
+  });
 
-function getChartData() {
+  jQuery("#select_deselect_all").click(function () {
+    if(this.checked){
+      jQuery('input:checkbox[name=membership_type_id]').each(function(){
+        this.checked = true;
+      });
+    } else {
+      jQuery('input:checkbox[name=membership_type_id]').each(function(){
+        this.checked = false;
+      });
+    }
+    refreshChart();
+  });
 
-  // Main chart data
-  var mainData = {/literal}{$chartData}{literal};
+  // Membership type filter
+  jQuery('input:checkbox[name=membership_type_id]').change(function() {
+    var checkedBoxes = jQuery('input:checkbox[name=membership_type_id]:checked').length;
+    var allCheckBoxes = jQuery('input:checkbox[name=membership_type_id]').length;
+    if(checkedBoxes == allCheckBoxes){
+      jQuery('#select_deselect_all').attr('checked','checked');
+    }else{
+      jQuery('#select_deselect_all').removeAttr('checked');
+    }
+    refreshChart();
+  });
 
-  var fromYear = jQuery("#from").val();
-  var toYear = jQuery("#to").val();
-  var data = [];
-  var tempdata = {};
-  var selectedYears = [];
-  var brought_forward_stats = 0;
-  var current_stats = 0;
-  var joined_stats = 0;
-  var resigned_stats = 0;
-  var rejoined_stats = 0;
-  var churn_stats = 0;
-
-  if (mainData.length === 0) {
-    return;
+  // Refresh chart if any filters are changed
+  function refreshChart() {
+    data = getChartData();
+    buildChart(data, allStatus, churn);
+    buildChart(data, churnstatus, -5, churnChartElementID);
   }
 
-  // Prepare data needed to render the chart
-  // Loop through start and end year from the filters
-  for (var i = fromYear; i <= toYear; i++) {
-
-    selectedYears.push(i);
-
-    // Get all checked membership types from the filters
-    jQuery('input:checkbox[name=membership_type_id]').each(function()
-    {
-      if(jQuery(this).is(':checked')) {
-        var memTypeId = jQuery(this).val();
-
-        // Check if there is data for the membership type
-        if (memTypeId in mainData[i]) {
-          // Loop through all the data available for the membership type
-          jQuery.each( mainData[i][memTypeId], function( key, value ) {
-
-            var date = value['month'] + '/' + value['year'];
-
-            // Check if data row is already there for current month/year
-            // if yes, add to the values
-            if (date in tempdata) {
-              tempdata[date]['Brought_Forward'] = parseInt(tempdata[date]['Brought_Forward']) + parseInt(value['Brought_Forward']);
-              tempdata[date]['Current'] = parseInt(tempdata[date]['Current']) + parseInt(value['Current']);
-              tempdata[date]['Joined'] = parseInt(tempdata[date]['Joined']) + parseInt(value['Joined']);
-              tempdata[date]['Resigned'] = parseInt(tempdata[date]['Resigned']) + parseInt(value['Resigned']);
-              tempdata[date]['Rejoined'] = parseInt(tempdata[date]['Rejoined']) + parseInt(value['Rejoined']);
-              //tempdata[date]['Churn'] = parseFloat(tempdata[date]['Churn']) + parseFloat(value['Churn']);
-            }
-            // if no data row available for current month/year, add a new row
-            else {
-              tempdata[date] = value;
-            }
-
-            // Stats
-            // brought_forward_stats = brought_forward_stats + parseInt(value['Brought_Forward']);
-            // current_stats = current_stats + parseInt(value['Current']);
-            // joined_stats = joined_stats + parseInt(value['Joined']);
-            // resigned_stats = resigned_stats + parseInt(value['Resigned']);
-            // rejoined_stats = rejoined_stats + parseInt(value['Rejoined']);
-            // churn_stats = churn_stats + parseFloat(value['Churn']);
-
-          });
-        }
-      }
-    });
+  function getChartData() {
+
+    // Main chart data
+    var mainData = {/literal}{$chartData}{literal};
+
+    var fromYear = jQuery("#from").val();
+    var toYear = jQuery("#to").val();
+    var data = [];
+    var tempdata = {};
+    var selectedYears = [];
+    var brought_forward_stats = 0;
+    var current_stats = 0;
+    var joined_stats = 0;
+    var resigned_stats = 0;
+    var rejoined_stats = 0;
+    var churn_stats = 0;
+
+    if (mainData.length === 0) {
+      return;
+    }
 
-    // Clean up the data needed to render the chart
-    // by removing key from the array, as we dont need the key
-    jQuery.each( tempdata, function( key, value ) {
-      var churn = (parseInt(value['Joined']) + parseInt(value['Rejoined']) - parseInt(value['Resigned'])) / parseInt(value['Brought_Forward']) * 100;
-      churn = churn.toFixed(2);
-      value['Churn'] = churn;
-      data.push(value);
-    });
-  }
+    // Prepare data needed to render the chart
+    // Loop through start and end year from the filters
+    for (var i = fromYear; i <= toYear; i++) {
+
+      selectedYears.push(i);
+
+      // Get all checked membership types from the filters
+      jQuery('input:checkbox[name=membership_type_id]').each(function()
+      {
+        if(jQuery(this).is(':checked')) {
+          var memTypeId = jQuery(this).val();
+
+          // Check if there is data for the membership type
+          if (memTypeId in mainData[i]) {
+            // Loop through all the data available for the membership type
+            jQuery.each( mainData[i][memTypeId], function( key, value ) {
+
+              var date = value['month'] + '/' + value['year'];
+
+              // Check if data row is already there for current month/year
+              // if yes, add to the values
+              if (date in tempdata) {
+                tempdata[date]['Brought_Forward'] = parseInt(tempdata[date]['Brought_Forward']) + parseInt(value['Brought_Forward']);
+                tempdata[date]['Current'] = parseInt(tempdata[date]['Current']) + parseInt(value['Current']);
+                tempdata[date]['Joined'] = parseInt(tempdata[date]['Joined']) + parseInt(value['Joined']);
+                tempdata[date]['Resigned'] = parseInt(tempdata[date]['Resigned']) + parseInt(value['Resigned']);
+                tempdata[date]['Rejoined'] = parseInt(tempdata[date]['Rejoined']) + parseInt(value['Rejoined']);
+                //tempdata[date]['Churn'] = parseFloat(tempdata[date]['Churn']) + parseFloat(value['Churn']);
+              }
+              // if no data row available for current month/year, add a new row
+              else {
+                tempdata[date] = value;
+              }
+
+              // Stats
+              // brought_forward_stats = brought_forward_stats + parseInt(value['Brought_Forward']);
+              // current_stats = current_stats + parseInt(value['Current']);
+              // joined_stats = joined_stats + parseInt(value['Joined']);
+              // resigned_stats = resigned_stats + parseInt(value['Resigned']);
+              // rejoined_stats = rejoined_stats + parseInt(value['Rejoined']);
+              // churn_stats = churn_stats + parseFloat(value['Churn']);
+
+            });
+          }
+        }
+      });
 
-  // Display stats
-  // jQuery('#brought_forward_stats').text(brought_forward_stats);
-  // jQuery('#current_stats').text(current_stats);
-  // jQuery('#joined_stats').text(joined_stats);
-  // jQuery('#resigned_stats').text(resigned_stats);
-  // jQuery('#rejoined_stats').text(rejoined_stats);
-  // jQuery('#churn_stats').text(churn_stats + ' %');
-
-  // Get number of years between the start and end year filters
-  var yearsCount = 0;
-  for (var year in selectedYears) {
-    if (selectedYears.hasOwnProperty(year)) {
-      yearsCount++;
+      // Clean up the data needed to render the chart
+      // by removing key from the array, as we dont need the key
+      jQuery.each( tempdata, function( key, value ) {
+        var churn = (parseInt(value['Joined']) + parseInt(value['Rejoined']) - parseInt(value['Resigned'])) / parseInt(value['Brought_Forward']) * 100;
+        churn = churn.toFixed(2);
+        value['Churn'] = churn;
+        data.push(value);
+      });
     }
-  }
 
-  // Display selected years next to each panel's heading
-  var selectedYearsStr = '';
-  if(yearsCount > 1) {
-    lastYearKey =  parseInt(yearsCount) - 1;
-    selectedYearsStr = selectedYears[0] + ' to ' + selectedYears[lastYearKey];
-  } else {
-    selectedYearsStr = selectedYears[0];
-  }
-  jQuery('.summaryYears').text(selectedYearsStr);
+    // Display stats
+    // jQuery('#brought_forward_stats').text(brought_forward_stats);
+    // jQuery('#current_stats').text(current_stats);
+    // jQuery('#joined_stats').text(joined_stats);
+    // jQuery('#resigned_stats').text(resigned_stats);
+    // jQuery('#rejoined_stats').text(rejoined_stats);
+    // jQuery('#churn_stats').text(churn_stats + ' %');
+
+    // Get number of years between the start and end year filters
+    var yearsCount = 0;
+    for (var year in selectedYears) {
+      if (selectedYears.hasOwnProperty(year)) {
+        yearsCount++;
+      }
+    }
 
-  return data;
-}
+    // Display selected years next to each panel's heading
+    var selectedYearsStr = '';
+    if(yearsCount > 1) {
+      lastYearKey =  parseInt(yearsCount) - 1;
+      selectedYearsStr = selectedYears[0] + ' to ' + selectedYears[lastYearKey];
+    } else {
+      selectedYearsStr = selectedYears[0];
+    }
+    jQuery('.summaryYears').text(selectedYearsStr);
 
-// Get chart dayta
-data = getChartData();
+    return data;
+  }
 
-if (data !== undefined) {
-  // Render membership summary chart
-  buildChart(data, allStatus, churn);
-  // Render churn chart
-  buildChart(data, churnstatus, -5, churnChartElementID);
-}
+  // Get chart dayta
+  data = getChartData();
 
-/*
- * Function to build bar chart using D3 charts
- */
-function buildChart(data, allStatus, minChurn = 1, churnId = null) {
+  if (data !== undefined) {
+    // Render membership summary chart
+    buildChart(data, allStatus, churn);
+    // Render churn chart
+    buildChart(data, churnstatus, -5, churnChartElementID);
+  }
 
-  var metricElementWeek = '#MainChart';
+  /*
+  * Function to build bar chart using D3 charts
+  */
+  function buildChart(data, allStatus, minChurn = 1, churnId = null) {
 
-  //seperate chart for Churn rate
-  if (churnId) {
-   var churnChartElement = '#'+churnId;
-   metricElementWeek = churnChartElement;
-   // console.log(data);
-  }
+    var metricElementWeek = '#MainChart';
 
-  cj(metricElementWeek).html('');
-
-  var margin = {top: 20, right: 160, bottom: 60, left: 60};
-  var rowWidth = parseInt(d3.select('#row_Churnchart').style('width'), 10);
-
-  var width = rowWidth - margin.left - margin.right,
-      height = 600 - margin.top - margin.bottom,
-      padding = 100; // space around the chart, not including labels
-
-  var svg = d3.select(metricElementWeek)
-    .append("svg")
-    .attr("width", width + margin.left + margin.right)
-    .attr("height", height + margin.top + margin.bottom)
-    .append("g")
-    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
-
-  var dataset = d3.layout.stack()(allStatus.map(function(status) {
-      return data.map(function(d) {
-        return {
-          date: d['date'],
-          x: d['month'] +  '/' + d['year'],
-          y: +d[status],
-          brought_forward: +d['Brought_Forward'],
-          current: +d['Current'],
-          joined: +d['Joined'],
-          resigned: +d['Resigned'],
-          rejoined: +d['Rejoined'],
-          churn: +d['Churn'],
-        };
-      });
-  }));
+    //seperate chart for Churn rate
+    if (churnId) {
+    var churnChartElement = '#'+churnId;
+    metricElementWeek = churnChartElement;
+    // console.log(data);
+    }
 
-  // Set x, y and colors
-  var x = d3.scale.ordinal()
-    .domain(dataset[0].map(function(d) { return d.x; }))
-    .rangeRoundBands([0, width], 0.02);
+    cj(metricElementWeek).html('');
+
+    var margin = {top: 20, right: 160, bottom: 60, left: 60};
+    var rowWidth = parseInt(d3.select('#row_Churnchart').style('width'), 10);
+
+    var width = rowWidth - margin.left - margin.right,
+        height = 600 - margin.top - margin.bottom,
+        padding = 100; // space around the chart, not including labels
+
+    var svg = d3.select(metricElementWeek)
+      .append("svg")
+      .attr("width", width + margin.left + margin.right)
+      .attr("height", height + margin.top + margin.bottom)
+      .append("g")
+      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+    var dataset = d3.layout.stack()(allStatus.map(function(status) {
+        return data.map(function(d) {
+          return {
+            date: d['date'],
+            x: d['month'] +  '/' + d['year'],
+            y: +d[status],
+            brought_forward: +d['Brought_Forward'],
+            current: +d['Current'],
+            joined: +d['Joined'],
+            resigned: +d['Resigned'],
+            rejoined: +d['Rejoined'],
+            churn: +d['Churn'],
+          };
+        });
+    }));
+
+    // Set x, y and colors
+    var x = d3.scale.ordinal()
+      .domain(dataset[0].map(function(d) { return d.x; }))
+      .rangeRoundBands([0, width], 0.02);
+
+    //temp Fix to get minChurn from data array. minchurn already taken as var from PHP.
+    var minChurnFromData = d3.min(dataset, function(d) {  return d3.min(d, function(d) { return d.y0 + d.y; });  });
+    if (minChurnFromData < minChurn) {
+      minChurn = minChurnFromData;
+    }
 
-  //temp Fix to get minChurn from data array. minchurn already taken as var from PHP.
-  var minChurnFromData = d3.min(dataset, function(d) {  return d3.min(d, function(d) { return d.y0 + d.y; });  });
-  if (minChurnFromData < minChurn) {
-    minChurn = minChurnFromData;
-  }
+    //For churn rate chart positive values might be less than 1 so, keep atleast y axis up to 0-1;
+    var maxChurnFromData = d3.max(dataset, function(d) {  return d3.max(d, function(d) { return d.y0 + d.y; });  });
+    maxChurn = 5;
+    if (maxChurnFromData > maxChurn) {
+      maxChurn = maxChurnFromData;
+    }
 
-  //For churn rate chart positive values might be less than 1 so, keep atleast y axis up to 0-1;
-  var maxChurnFromData = d3.max(dataset, function(d) {  return d3.max(d, function(d) { return d.y0 + d.y; });  });
-  maxChurn = 5;
-  if (maxChurnFromData > maxChurn) {
-    maxChurn = maxChurnFromData;
-  }
+    var y = d3.scale.linear()
+      .domain([minChurn, maxChurn])
+      .range([height, 0]);
 
-  var y = d3.scale.linear()
-    .domain([minChurn, maxChurn])
-    .range([height, 0]);
+    // var colors = ["#b33040", '#F58876', "#87A9CE", "#5C7F79", "#9467bd", "#c5b0d5", "#4FCAB7"];
+    var colors = ["#d95f02","#66a61e","#7570b3","#e7298a"];
+    if (churnId) {
+      colors = ["#b33040"];
+      postiveNegativeColor = ["#b33040", '#0AAD18'];
+    }
 
-  // var colors = ["#b33040", '#F58876', "#87A9CE", "#5C7F79", "#9467bd", "#c5b0d5", "#4FCAB7"];
-  var colors = ["#d95f02","#66a61e","#7570b3","#e7298a"];
-  if (churnId) {
-    colors = ["#b33040"];
-    postiveNegativeColor = ["#b33040", '#0AAD18'];
-  }
+    // Define and draw axes
+    var yAxis = d3.svg.axis()
+      .scale(y)
+      .orient("left");
+
+    var xAxis = d3.svg.axis()
+      .scale(x)
+      .orient("bottom");
+
+    svg.append("g")
+      .attr("class", "y axis")
+      .call(yAxis);
+
+    svg.append("g")
+      .attr("id", "x-axis")
+      .attr("class", "x axis")
+      //.attr("class", "xaxis")
+      .attr("transform", "translate(0," + height + ")")
+      .call(xAxis)
+      .selectAll("text")
+      .attr("y", 0)
+      .attr("x", 9)
+      .attr("dy", ".35em")
+      .attr("transform", "rotate(90)")
+      .style("text-anchor", "start");
+
+    // Create groups for each series, rects for each segment
+    // don't need to fill churn rate chart colors, we display based on value not by segment.
+    if(churnId){
+      var groups = svg.selectAll("g.cost")
+      .data(dataset)
+      .enter().append("g")
+      .attr("class", "cost");
+      // .style("fill", function(d, i) { return colors[i]; });
+    }
+    else{
 
-  // Define and draw axes
-  var yAxis = d3.svg.axis()
-    .scale(y)
-    .orient("left");
-
-  var xAxis = d3.svg.axis()
-    .scale(x)
-    .orient("bottom");
-
-  svg.append("g")
-    .attr("class", "y axis")
-    .call(yAxis);
-
-  svg.append("g")
-    .attr("id", "x-axis")
-    .attr("class", "x axis")
-    //.attr("class", "xaxis")
-    .attr("transform", "translate(0," + height + ")")
-    .call(xAxis)
-    .selectAll("text")
-    .attr("y", 0)
-    .attr("x", 9)
-    .attr("dy", ".35em")
-    .attr("transform", "rotate(90)")
-    .style("text-anchor", "start");
-
-  // Create groups for each series, rects for each segment
-  // don't need to fill churn rate chart colors, we display based on value not by segment.
-  if(churnId){
     var groups = svg.selectAll("g.cost")
-    .data(dataset)
-    .enter().append("g")
-    .attr("class", "cost");
-    // .style("fill", function(d, i) { return colors[i]; });
-  }
-  else{
+      .data(dataset)
+      .enter().append("g")
+      .attr("class", "cost")
+      .style("fill", function(d, i) { return colors[i]; });
+    }
 
-  var groups = svg.selectAll("g.cost")
-    .data(dataset)
-    .enter().append("g")
-    .attr("class", "cost")
-    .style("fill", function(d, i) { return colors[i]; });
-  }
+    var rect = groups.selectAll("rect")
+      .data(function(d) { return d; })
+      .enter()
+      .append("rect")
+      .attr("x", function(d) { return x(d.x); })
+      .attr("y", function(d) { if(churnId && d.y < 0) { return y(0); } else { return y(d.y0 + d.y);} })
+      .attr("height", function(d) { return Math.abs(y(d.y0) - y(d.y0 + d.y)); })
+      .attr("width", x.rangeBand())
+      .on("mouseover", function (d) { showPopover.call(this, d, churnId); })
+      .on("mouseout",  function (d) { removePopovers(); })
+
+    //Positive / Negative  colors for churn rate chart.
+    if(churnId){
+      groups.selectAll("rect").style("fill", function(d, i) { return d.y < 0 ? postiveNegativeColor[0] : postiveNegativeColor[1]; });
+    }
 
-  var rect = groups.selectAll("rect")
-    .data(function(d) { return d; })
-    .enter()
-    .append("rect")
-    .attr("x", function(d) { return x(d.x); })
-    .attr("y", function(d) { if(churnId && d.y < 0) { return y(0); } else { return y(d.y0 + d.y);} })
-    .attr("height", function(d) { return Math.abs(y(d.y0) - y(d.y0 + d.y)); })
-    .attr("width", x.rangeBand())
-    .on("mouseover", function (d) { showPopover.call(this, d, churnId); })
-    .on("mouseout",  function (d) { removePopovers(); })
-
-  //Positive / Negative  colors for churn rate chart.
-  if(churnId){
-    groups.selectAll("rect").style("fill", function(d, i) { return d.y < 0 ? postiveNegativeColor[0] : postiveNegativeColor[1]; });
+    // Draw legend
+    var legend = svg.selectAll(".legend")
+      .data(colors)
+      .enter().append("g")
+      .attr("class", "legend")
+      .attr("transform", function(d, i) { return "translate(30," + i * 19 + ")"; });
+
+    legend.append("rect")
+      .attr("x", width - 18)
+      .attr("width", 18)
+      .attr("height", 18)
+      .style("fill", function(d, i) {return colors[i];});
+
+    legend.append("text")
+      .attr("x", width + 5)
+      .attr("y", 9)
+      .attr("dy", ".35em")
+      .style("text-anchor", "start")
+      .text(function(d, i) {
+        return allStatus[i];
+    });
   }
 
-  // Draw legend
-  var legend = svg.selectAll(".legend")
-    .data(colors)
-    .enter().append("g")
-    .attr("class", "legend")
-    .attr("transform", function(d, i) { return "translate(30," + i * 19 + ")"; });
-
-  legend.append("rect")
-    .attr("x", width - 18)
-    .attr("width", 18)
-    .attr("height", 18)
-    .style("fill", function(d, i) {return colors[i];});
-
-  legend.append("text")
-    .attr("x", width + 5)
-    .attr("y", 9)
-    .attr("dy", ".35em")
-    .style("text-anchor", "start")
-    .text(function(d, i) {
-      return allStatus[i];
-  });
-}
-
-/*
- * Function to show hover popover element
- */
-function showPopover (d, churnId) {
-  cj(this).popover({
-    title: '<b>' + d.date + '</b>',
-    placement: 'auto top',
-    container: 'body',
-    trigger: 'manual',
-    html : true,
-    content: function() {
-      if (churnId) {
-        return "Churn: " + d.churn + " %";
-      } else {
-        return "Brought Forward: " + d.brought_forward
-           + "<br />Current: " + d.current
-           + "<br/>Joined: " + d.joined
-           + "<br/>Resigned: " + d.resigned
-           + "<br/>Rejoined: " + d.rejoined
-           ;
-        //"Brought Forward: " + d.brought_forward
+  /*
+  * Function to show hover popover element
+  */
+  function showPopover (d, churnId) {
+    cj(this).popover({
+      title: '<b>' + d.date + '</b>',
+      placement: 'auto top',
+      container: 'body',
+      trigger: 'manual',
+      html : true,
+      content: function() {
+        if (churnId) {
+          return "Churn: " + d.churn + " %";
+        } else {
+          return "Brought Forward: " + d.brought_forward
+            + "<br />Current: " + d.current
+            + "<br/>Joined: " + d.joined
+            + "<br/>Resigned: " + d.resigned
+            + "<br/>Rejoined: " + d.rejoined
+            ;
+          //"Brought Forward: " + d.brought_forward
+        }
       }
-    }
-  });
-  cj(this).popover('show')
-}
+    });
+    cj(this).popover('show')
+  }
 
-/*
- * Function to remove hover popover element
- */
-function removePopovers () {
-  cj('.popover').each(function() {
-    cj(this).remove();
-  });
-}
+  /*
+  * Function to remove hover popover element
+  */
+  function removePopovers () {
+    cj('.popover').each(function() {
+      cj(this).remove();
+    });
+  }
 
-function type(d) {
-  d.date = parseDate(d.date);
-  causes.forEach(function(c) { d[c] = +d[c]; });
-  return d;
-}
+  function type(d) {
+    d.date = parseDate(d.date);
+    causes.forEach(function(c) { d[c] = +d[c]; });
+    return d;
+  }
 
-/*
- * Function to show font awesome spinner
- */
-function showSpinner() {
-  message = cj('#spinner').html();
-  BootstrapDialog.show({
-    title: 'Refresh Data',
-    message: message ,
-    closable: true
-  });
+  /*
+  * Function to show font awesome spinner
+  */
+  function showSpinner() {
+    message = cj('#spinner').html();
+    BootstrapDialog.show({
+      title: 'Refresh Data',
+      message: message ,
+      closable: true
+    });
+  }
 }
 </script>
 {/literal}