Cannot read property isHtml of null, Unspecified chart type

[sunnyjayjay]

What Version?

3.1.12

Issue

Please describe the issue.
Having used this fabulous component suite for a couple of years without problem my linecharts are now outputting the above error message in white on a red background. I have checked the contents of the render buffer and on the face of it they look ok.

Controller Code (chart creation code)

    $signups = Lava::DataTable();
            $signups->addStringColumn('Month/Year')
                ->addNumberColumn('Sign ups');
            foreach ($signupData as $data) {
                $signups->addRow([
                    $data->signup_date, $data->signups
                ]);
            }
            $chart = Lava::LineChart('Signups', $signups);

View Code

{!! \Lava::render('LineChart', 'Signups', 'sChart')  !!}

[jordankobellarz]

Since last week I'm unable to render ColumnChart and LineChart types. But DonutChart's are rendering normally (I haven't tried other types).

I'm using the 3.1.11 version.

If I resize the viewport, the "Unspecified chart type." message, starts to show repeatedly, as show on the printscreen below.

Controller Code

$testTable = Lava::DataTable()
    ->addStringColumn('Dia')
    ->addNumberColumn('Cadastros');
$dailySignupsTable->addRow(['teste 01', 10]);
$testChart = Lava::ColumnChart('testChart', $testTable);

View code

<div id="test-chart"></div>
 {!! Lava::render('ColumnChart', 'testChart', 'test-chart') !!}

[daveblake]

As a temp fix change the version of Google charts.

In javascript/lava.js

add window.google.charts.load('46', {packages: ['corechart']}); line before: lava.events.emit('jsapi:ready', window.google);

The block should look like:

 this.run = function (window) {
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.src = 'https://www.google.com/jsapi';
    s.onload = s.onreadystatechange = function (event) {
      event = event || window.event;

      if (event.type === "load" || (/loaded|complete/.test(this.readyState))) {
        this.onload = this.onreadystatechange = null;

        window.google.charts.load('46', {packages: ['corechart']});

        lava.events.emit('jsapi:ready', window.google);
      }
    };

    document.getElementsByTagName('head')[0].appendChild(s);
  };

[sunnyjayjay]

As a temp fix change the version of Google charts.

In javascript/lava.js

add window.google.charts.load('46', {packages: ['corechart']}); line before: lava.events.emit('jsapi:ready', window.google);

The block should look like:

 this.run = function (window) {
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.src = 'https://www.google.com/jsapi';
    s.onload = s.onreadystatechange = function (event) {
      event = event || window.event;

      if (event.type === "load" || (/loaded|complete/.test(this.readyState))) {
        this.onload = this.onreadystatechange = null;

        window.google.charts.load('46', {packages: ['corechart']});

        lava.events.emit('jsapi:ready', window.google);
      }
    };

    document.getElementsByTagName('head')[0].appendChild(s);
  };

This block of code does not exist at all in /javascript/lava.js. In fact I cannot find it in any of the code for this project.

[jordankobellarz]

@daveblake Your suggestion was useful, but the code snippet you referred doesn't really exist in the library.

Based on your suggestion, I added these code snippets below to the header on my page, specifying the version of Google Charts to be loaded: "46" instead of "current".

It is a temporary solution, but it solves the problem for now.

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
    window.google.charts.load('46', {packages: ['corechart']});
</script>

[Adam-Ozbayraktar]

@jordankobellarz Thank you for your solution, it fixed the issue I was having

[sunnyjayjay]

@jordankobellarz Thanks! That works!

[andrewskm]

The May 2020 version of the google charts broke seems to have caused a lot of problems on certain graphs.
Thanks for the find, @jordankobellarz!

[kevinkhill]

Hi everyone! I'm glad you resolved this together. So, am I understanding right that the current version is broken and 46 is an old version you are pinning?

[jordankobellarz]

The problem is related to an attribute called "isHtml". Since there is no occurrence of this attribute in any file in this repository, I assume that the error was generated by the Google Charts library itself.

That way, as suggested by @daveblake, replacing the "current" version with a specific frozen version, we were able to solve the problem.

Given that the latest frozen version of Google Charts was released in May 2020 (48) and it is generating the error, it would be appropriate to specify the latest compatible version, which 47

So, I believe that replacing the line that defines the version to be loaded, is enough to solve the problem.

In /javascript/dist/lava.js:

google.charts.load ('current', config);

switch to:

google.charts.load ('47 ', config);