From: Rich Lott / Artful Robot <forums@artfulrobot.uk>
Date: Thu, 10 Oct 2019 07:39:29 +0000 (+0200)
Subject: Fix missing/broken contribution charts
X-Git-Url: https://vcs.fsf.org/?a=commitdiff_plain;h=f648602ad5ab86223a3276fe6a2f8f4f4011f09e;p=civicrm-core.git

Fix missing/broken contribution charts
---

diff --git a/CRM/Contribute/Form/ContributionCharts.php b/CRM/Contribute/Form/ContributionCharts.php
index 70c58ce2cb..158db37c79 100644
--- a/CRM/Contribute/Form/ContributionCharts.php
+++ b/CRM/Contribute/Form/ContributionCharts.php
@@ -173,7 +173,7 @@ class CRM_Contribute_Form_ContributionCharts extends CRM_Core_Form {
         $monthlyChart = TRUE;
       }
 
-      $values['divName'] = "open_flash_chart_{$chartKey}";
+      $values['divName'] = "chart_{$chartKey}";
       $funName = ($chartType == 'bvg') ? 'barChart' : 'pieChart';
 
       // build the chart objects.
diff --git a/templates/CRM/Contribute/Form/ContributionCharts.tpl b/templates/CRM/Contribute/Form/ContributionCharts.tpl
index 3e6c01a0f9..0faf575cd3 100644
--- a/templates/CRM/Contribute/Form/ContributionCharts.tpl
+++ b/templates/CRM/Contribute/Form/ContributionCharts.tpl
@@ -26,19 +26,19 @@
 {* Display monthly and yearly contributions using Google charts (Bar and Pie) *}
 {if $hasContributions}
 <div id="chartData">
-<table class="chart">
-  <tr class="crm-contribution-form-block-open_flash_chart">
-     <td>
+<table >
+  <tr class="crm-contribution-form-block-chart">
+     <td width="50%">
          {if $hasByMonthChart}
              {* display monthly chart *}
-             <div id="open_flash_chart_by_month"></div>
+             <div id="chart_by_month"></div>
          {else}
        {ts}There were no contributions during the selected year.{/ts}
          {/if}
      </td>
-     <td>
+     <td width="50%">
           {* display yearly chart *}
-         <div id="open_flash_chart_by_year"></div>
+         <div id="chart_by_year"></div>
      </td>
   </tr>
 </table>
@@ -60,28 +60,25 @@
 {literal}
 <script type="text/javascript">
 
- var allData = {/literal}{$chartData}{literal};
-
   CRM.$(function($) {
-    $.each(allData, function(chartID, chartValues) {
-      createChart(chartID, chartValues.divName, chartValues.size.xSize, chartValues.size.ySize, 'loadData');
-    });
-  });
+    var allData = {/literal}{$chartData}{literal};
 
-  function loadData( chartID ) {
-     return allData[chartID].object;
-  }
+    $.each( allData, function( chartID, chartValues ) {
+        var divName = "chart_" + chartID;
+        createChart( chartID, divName, 300, 300, allData[chartID].object );
+        });
 
-  function byMonthOnClick( barIndex ) {
-     var url = allData.by_month.on_click_urls['url_' + barIndex];
-     if ( url ) window.location.href = url;
-  }
+    function byMonthOnClick( barIndex ) {
+       var url = allData.by_month.on_click_urls['url_' + barIndex];
+       if ( url ) window.location.href = url;
+    }
 
-  function byYearOnClick( barIndex ) {
-     var url = allData.by_year.on_click_urls['url_' + barIndex];
-     if ( url ) window.location.href = url;
-  }
+    function byYearOnClick( barIndex ) {
+       var url = allData.by_year.on_click_urls['url_' + barIndex];
+       if ( url ) window.location.href = url;
+    }
 
- </script>
+  });
+</script>
 {/literal}
 {/if}
diff --git a/templates/CRM/common/chart.tpl b/templates/CRM/common/chart.tpl
index 5425871f12..1400408f4a 100644
--- a/templates/CRM/common/chart.tpl
+++ b/templates/CRM/common/chart.tpl
@@ -44,7 +44,8 @@ function createChart( chartID, divName, xSize, ySize, data ) {
   }
 
   // Figure out suitable size based on container size.
-  var w = Math.min(div.clientWidth - 32, 800);
+  // In some cases the containing element has no size. We should insist on a minimum size.
+  var w = Math.max(Math.min(div.clientWidth - 32, 800), 316);
   var h = Math.min(400, parseInt(w / 2));
 
   var chartNode = document.createElement('div');