From 0cf05243aea966f901d8817719492f6ea0902311 Mon Sep 17 00:00:00 2001
From: Rich Lott / Artful Robot <forums@artfulrobot.uk>
Date: Wed, 9 Oct 2019 10:31:36 +0200
Subject: [PATCH] Tidy up charts code, including avoiding js error on tabular
 data view

---
 CRM/Contribute/Form/ContributionCharts.php |  2 +-
 CRM/Utils/Chart.php                        |  2 +-
 templates/CRM/Report/Form/Layout/Graph.tpl | 37 +++++++++++-----------
 templates/CRM/common/chart.tpl             | 25 +++++++--------
 4 files changed, 32 insertions(+), 34 deletions(-)

diff --git a/CRM/Contribute/Form/ContributionCharts.php b/CRM/Contribute/Form/ContributionCharts.php
index 8e4873c44e..70c58ce2cb 100644
--- a/CRM/Contribute/Form/ContributionCharts.php
+++ b/CRM/Contribute/Form/ContributionCharts.php
@@ -231,7 +231,7 @@ class CRM_Contribute_Form_ContributionCharts extends CRM_Core_Form {
     $this->assign('hasYearlyChart', $yearlyChart);
     $this->assign('hasByMonthChart', $monthlyChart);
     $this->assign('hasChart', empty($chartData) ? FALSE : TRUE);
-    $this->assign('ChartData', json_encode($chartData));
+    $this->assign('chartData', json_encode($chartData ?? []));
   }
 
 }
diff --git a/CRM/Utils/Chart.php b/CRM/Utils/Chart.php
index 4bf91281bf..656277307b 100644
--- a/CRM/Utils/Chart.php
+++ b/CRM/Utils/Chart.php
@@ -321,7 +321,7 @@ class CRM_Utils_Chart {
         // assign chart data to template
         $template = CRM_Core_Smarty::singleton();
         $template->assign('uniqueId', $uniqueId);
-        $template->assign("chartData", json_encode($theChart));
+        $template->assign("chartData", json_encode($theChart ?? []));
       }
     }
 
diff --git a/templates/CRM/Report/Form/Layout/Graph.tpl b/templates/CRM/Report/Form/Layout/Graph.tpl
index 01f829a252..f49ee10375 100644
--- a/templates/CRM/Report/Form/Layout/Graph.tpl
+++ b/templates/CRM/Report/Form/Layout/Graph.tpl
@@ -39,29 +39,28 @@
   {if !$section}
     {include file="CRM/common/chart.tpl" divId="chart_$uniqueId"}
   {/if}
+  {if $chartData}
+    {literal}
+    <script type="text/javascript">
+       CRM.$(function($) {
+         // Build all charts.
+         var allData = {/literal}{$chartData}{literal};
 
-  {literal}
-  <script type="text/javascript">
-     CRM.$(function($) {
-      var allData = {/literal}{$chartData}{literal};
-       buildChart( );
-
-       $("input[id$='submit_print'],input[id$='submit_pdf']").bind('click', function(e){
-         // image creator php file path and append image name
-         var url = CRM.url('civicrm/report/chart', 'name=' + '{/literal}{$chartId}{literal}' + '.png');
-
-         //fetch object and 'POST' image
-         swfobject.getObjectById("chart_{/literal}{$uniqueId}{literal}").post_image(url, true, false);
-       });
-
-       function buildChart( ) {
          $.each( allData, function( chartID, chartValues ) {
            var divName = {/literal}"chart_{$uniqueId}"{literal};
            createChart( chartID, divName, chartValues.size.xSize, chartValues.size.ySize, allData[chartID].object );
          });
-       }
-     });
 
-  </script>
-  {/literal}
+         $("input[id$='submit_print'],input[id$='submit_pdf']").bind('click', function(e){
+           // image creator php file path and append image name
+           var url = CRM.url('civicrm/report/chart', 'name=' + '{/literal}{$chartId}{literal}' + '.png');
+
+           //fetch object and 'POST' image
+           swfobject.getObjectById("chart_{/literal}{$uniqueId}{literal}").post_image(url, true, false);
+         });
+       });
+
+    </script>
+    {/literal}
+  {/if}
 {/if}
diff --git a/templates/CRM/common/chart.tpl b/templates/CRM/common/chart.tpl
index e3896708df..5425871f12 100644
--- a/templates/CRM/common/chart.tpl
+++ b/templates/CRM/common/chart.tpl
@@ -43,13 +43,9 @@ function createChart( chartID, divName, xSize, ySize, data ) {
     return;
   }
 
-  // Figure out width.
-  var w=800;
-  var h=400;
-  if (div) {
-    w = Math.min(div.clientWidth - 32, 800);
-    h = Math.min(400, parseInt(w / 2));
-  }
+  // Figure out suitable size based on container size.
+  var w = Math.min(div.clientWidth - 32, 800);
+  var h = Math.min(400, parseInt(w / 2));
 
   var chartNode = document.createElement('div');
   var heading = document.createElement('h2');
@@ -61,6 +57,8 @@ function createChart( chartID, divName, xSize, ySize, data ) {
   div.style.marginRight = 'auto';
 
   var links = document.createElement('div');
+  links.style.textAlign = 'center';
+  links.style.marginBottom = '1rem';
   var linkSVG = document.createElement('a');
   linkSVG.href = '#';
   linkSVG.textContent = 'Download chart (SVG)';
@@ -116,11 +114,6 @@ function createChart( chartID, divName, xSize, ySize, data ) {
   links.appendChild(linkSVG);
   links.appendChild(document.createTextNode(' | '));
   links.appendChild(linkPNG);
-  //dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':');
-
-  div.appendChild(heading);
-  div.appendChild(chartNode);
-  div.appendChild(links);
 
   var crossfilterData, ndx, dataDimension, dataGroup, chart;
   ndx = crossfilter(data.values[0]);
@@ -161,7 +154,13 @@ function createChart( chartID, divName, xSize, ySize, data ) {
       .renderTitle(true);
   }
   // Delay rendering so that animation looks good.
-  window.setTimeout(() => dc.renderAll(), 1500);
+  window.setTimeout(() => {
+    div.appendChild(heading);
+    div.appendChild(chartNode);
+    div.appendChild(links);
+
+    dc.renderAll();
+  }, 1500);
 }
 </script>
 {/literal}
-- 
2.25.1