# Kreporter 3.1 is no longer displaying Google Charts

**URL:** <https://community.spicecrm.io/t/kreporter-3-1-is-no-longer-displaying-google-charts/525>\
**Category:** KReporter\
**Created:** [May 20, 2020, 6:29pm UTC](https://community.spicecrm.io/t/kreporter-3-1-is-no-longer-displaying-google-charts/525 "2020-05-20T18:29:19Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![dianna](https://avatars.discourse-cdn.com/v4/letter/d/ce73a5/32.png) [@dianna](https://community.spicecrm.io/u/dianna)\
**Post date:** [May 20, 2020, 6:29pm UTC](https://community.spicecrm.io/t/kreporter-3-1-is-no-longer-displaying-google-charts/525/1 "2020-05-20T18:29:19Z")

</div>

We have a license for 3.1 extension and have noticed recently that are charts aren’t always displaying and now not at all. We are using Kreporter with Suitecrm 7.8.31.

I see this error in the console log and wonder if you have any ideas about the problem.

index.php?module=KReports&action=DetailView&record=4f85b03d-7466-0643-5faa-5dae184cdf5d:1107 Uncaught TypeError: Cannot read property ‘ChartWrapper’ of undefined  
at index.php?module=KReports&action=DetailView&record=4f85b03d-7466-0643-5faa-5dae184cdf5d:1107  
(anonymous) @ index.php?module=KReports&action=DetailView&record=4f85b03d-7466-0643-5faa-5dae184cdf5d:1107

Thanks,  
Dianna

---

<div class="post-metadata">

**Author:** ![maretval](https://avatars.discourse-cdn.com/v4/letter/m/b38774/32.png) [@maretval](https://community.spicecrm.io/u/maretval)\
**Post date:** [May 21, 2020, 8:27am UTC](https://community.spicecrm.io/t/kreporter-3-1-is-no-longer-displaying-google-charts/525/2 "2020-05-21T08:27:04Z")

</div>

Dianna,

Have you used SuiteCRM 7.8.31 all along or did you make an update to this version recently?

Val

---

<div class="post-metadata">

**Author:** ![dianna](https://avatars.discourse-cdn.com/v4/letter/d/ce73a5/32.png) [@dianna](https://community.spicecrm.io/u/dianna)\
**Post date:** [May 21, 2020, 10:47am UTC](https://community.spicecrm.io/t/kreporter-3-1-is-no-longer-displaying-google-charts/525/3 "2020-05-21T10:47:07Z")

</div>

We are using Google Charts. We have made no changes but noticed that the reports would intermittently fail to display until we did one or two refreshes. And as of yesterday, this does not work for the charts don’t display at all.  
Thanks,  
Dianna

---

<div class="post-metadata">

**Author:** ![maretval](https://avatars.discourse-cdn.com/v4/letter/m/b38774/32.png) [@maretval](https://community.spicecrm.io/u/maretval)\
**Post date:** [May 21, 2020, 10:58am UTC](https://community.spicecrm.io/t/kreporter-3-1-is-no-longer-displaying-google-charts/525/4 "2020-05-21T10:58:53Z")

</div>

I am afraid the google library in use is old one.  
I am checking if there is a way for simple update

---

<div class="post-metadata">

**Author:** ![albertostic](https://avatars.discourse-cdn.com/v4/letter/a/b9bd4f/32.png) [@albertostic](https://community.spicecrm.io/u/albertostic)\
**Post date:** [May 27, 2020, 11:14am UTC](https://community.spicecrm.io/t/kreporter-3-1-is-no-longer-displaying-google-charts/525/5 "2020-05-27T11:14:15Z")

</div>

I have the code to make this work for Kreporter 3.1.

Edit the file: modules/KReports/Plugins/Visualization/googlecharts/kGoogleCharts.php

Lines 24-31 (function getHeader()):  
public function getHeader() {`  
// STIC 14/05/2020: Update regarding the loading of the Google Graphic libraries  
// $coreString = “”;  
$coreString = “”;  
return $coreString;  
}  
Lines 45-71 (function getItem()):  
public function getItem($thisDivId, $thisReport, $thisParams, $addReportParams = array()) {

```
    $googleData = $this->getChartData($thisReport, $thisParams, 0, $addReportParams);
    $chartData = $this->wrapGoogleData($googleData, $thisDivId, $thisParams, 0 , $addReportParams);

    $chartDataString = '<script type="text/javascript">';

    // STIC 14/05/2020: Update regarding the loading of the Google Graphic libraries
    $chartDataString .= "google.charts.load('current'); ";
    $chartDataString .= "google.charts.setOnLoadCallback(drawVisualization); ";
    $chartDataString .= "function drawVisualization() { ";
    // STIC 14/05/2020: End of update

    $chartDataString .= $thisParams['uid'] . " = new Object({
            uid: '" . $thisParams['uid'] . "',
            chartWrapper: new google.visualization.ChartWrapper(" . json_encode($chartData) . "), 
            update: function(chartData){
                this.chartWrapper.setDataTable(chartData);
                this.chartWrapper.draw();
            }
            });
            document.addEventListener('load', " . $thisParams['uid'] . ".chartWrapper.draw());";
    $chartDataString .= "}"; // STIC Update 14/05/2020
    $chartDataString .= '</script>';

    return $chartDataString;
}

```

You can see the changes where STIC updates comments are.

@maretval could you please check my topic? [Kreporter 3.1 and Security Groups filtering records](https://community.spicecrm.io/t/kreporter-3-1-and-security-groups-filtering-records/527)

Thanks

---

<div class="post-metadata">

**Author:** ![dianna](https://avatars.discourse-cdn.com/v4/letter/d/ce73a5/32.png) [@dianna](https://community.spicecrm.io/u/dianna)\
**Post date:** [May 27, 2020, 1:41pm UTC](https://community.spicecrm.io/t/kreporter-3-1-is-no-longer-displaying-google-charts/525/6 "2020-05-27T13:41:22Z")

</div>

Thank you very much for your efforts. I will make these changes and test it.  
Thanks again,  
Dianna

---

<div class="post-metadata">

**Author:** ![Rachel](https://avatars.discourse-cdn.com/v4/letter/r/46a35a/32.png) [@Rachel](https://community.spicecrm.io/u/Rachel)\
**Post date:** [June 17, 2020, 8:50am UTC](https://community.spicecrm.io/t/kreporter-3-1-is-no-longer-displaying-google-charts/525/7 "2020-06-17T08:50:03Z")

</div>

Hi Dianna,

Did you manage to get them working again?

Thanks,

---

<div class="post-metadata">

**Author:** ![dianna](https://avatars.discourse-cdn.com/v4/letter/d/ce73a5/32.png) [@dianna](https://community.spicecrm.io/u/dianna)\
**Post date:** [June 17, 2020, 7:44pm UTC](https://community.spicecrm.io/t/kreporter-3-1-is-no-longer-displaying-google-charts/525/8 "2020-06-17T19:44:53Z")

</div>

Rachel,  
I just started looking at it yesterday and did not get it working from the code above. But today I made the following changes to the code above and got it working.

Change the line in getHeader from:  
$coreString = “”;  
To:  
$coreString = “”;

AND change the line in getItem from:  
$chartDataString .= "google.charts.load(‘current’); ";  
To:  
$chartDataString .= "google.charts.load(‘current’, {packages: [‘corechart’]}); ";

HTH,  
Dianna

---

<div class="post-metadata">

**Author:** ![dianna](https://avatars.discourse-cdn.com/v4/letter/d/ce73a5/32.png) [@dianna](https://community.spicecrm.io/u/dianna)\
**Post date:** [June 17, 2020, 7:57pm UTC](https://community.spicecrm.io/t/kreporter-3-1-is-no-longer-displaying-google-charts/525/9 "2020-06-17T19:57:59Z")

</div>

Now I see what happened to albertostic because the same thing has happened to me and I don’t know how to fix it. When the post displays in HTML, the required code is not visible. When I look at it raw, the code is correct.

To see what needs to go in the getHeader modified line following this link:

[https://developers.google.com/chart/interactive/docs/basic\_load\_libs#loading-details](https://developers.google.com/chart/interactive/docs/basic_load_libs#loading-details)

Dianna

---

<div class="post-metadata">

**Author:** ![maretval](https://avatars.discourse-cdn.com/v4/letter/m/b38774/32.png) [@maretval](https://community.spicecrm.io/u/maretval)\
**Post date:** [June 17, 2020, 8:52pm UTC](https://community.spicecrm.io/t/kreporter-3-1-is-no-longer-displaying-google-charts/525/10 "2020-06-17T20:52:46Z")

</div>

Great job community!

My solution for KReporter 3.0.6 inspired by [albertostic](https://community.spicecrm.io/u/albertostic)

getHeader():

 ![grafik](https://canada1.discourse-cdn.com/flex030/uploads/spicecrm/original/1X/5c74632c8eaa70f5eff52a8a40b55d2bbd81b330.png)

getItem(): I prefere to create unique function names for setOnLoadCallback in case you have multiple charts.

```
$chartDataString = '<script id="' . $thisDivId . '_script" type="text/javascript">';
$chartDataString .= 'google.charts.setOnLoadCallback(drawVisualization'. $thisParams['uid'].');';
      $chartDataString .= 'function drawVisualization' . $thisParams['uid'].'(){';
      $chartDataString .= $thisParams['uid'] . " = new Object({
....
      $chartDataString .= '}';
```