Uncaught TypeError: Cannot read property 'appendChild'

[ctaity]

When the controller destroys (change to another view) i get:

Uncaught TypeError: Cannot read property 'appendChild' of null
at Object.AAF (eval at (http://localhost:3000/bower_components/zingchart/client/zingchart.min.js:8:1), :1:70276)
at Object.HB (eval at (http://localhost:3000/bower_components/zingchart/client/zingchart.min.js:8:1), :1:69912)
at c.paint (eval at (http://localhost:3000/bower_components/zingchart/client/zingchart.min.js:8:1), :1:257198)
at c.f.(anonymous function) [as paint] (eval at (http://localhost:3000/bower_components/zingchart/client/zingchart.min.js:8:1), :1:17736)
at eval (eval at (http://localhost:3000/bower_components/zingchart/client/zingchart.min.js:8:1), :1:278976)
at c.OG (eval at (http://localhost:3000/bower_components/zingchart/client/zingchart.min.js:8:1), :1:249889)
at eval (eval at (http://localhost:3000/bower_components/zingchart/client/zingchart.min.js:8:1), :1:278950)
AAF @ VM4969:1
HB @ VM4969:1
paint @ VM4969:1
f.(anonymous function) @ VM4969:1
(anonymous) @ VM4969:1
OG @ VM4969:1
(anonymous) @ VM4969:1
setTimeout (async)
XS @ VM4969:1
(anonymous) @ VM4969:1
zingchart.A0G @ VM4969:1
JN @ VM4969:1
zingchart.AAD @ VM4969:1
zingchart.ABS @ VM4969:1
zingchart.exec @ VM4969:1
(anonymous) @ zingchart-angularjs.js:84
$digest @ angular.js:18210
$apply @ angular.js:18480
(anonymous) @ angular.js:14373
dispatch @ jquery.min.js:3
r.handle @ jquery.min.js:3

The code of the controller is:

angular.module('videoPlatformApp-stats-controllers', [])
    .controller('DashBoardController', function ($scope, __env, $document, $http) {
        $scope.myJson = {
            type: 'line',
            backgroundColor: '#2C2C39',
            title: {
                text: 'Eventos',
                adjustLayout: true,
                fontColor: "#E3E3E5",
                marginTop: 7
            },
            legend: {
                align: 'center',
                verticalAlign: 'top',
                backgroundColor: 'none',
                borderWidth: 0,
                item: {
                    fontColor: '#E3E3E5',
                    cursor: 'hand'
                },
                marker: {
                    type: 'circle',
                    borderWidth: 0,
                    cursor: 'hand'
                }
            },
            plotarea: {
                margin: 'dynamic 70'
            },
            plot: {
                aspect: 'spline',
                lineWidth: 2,
                marker: {
                    borderWidth: 0,
                    size: 5
                }
            },
            scaleX: {
                lineColor: '#E3E3E5',
                zooming: true,
                item: {
                    fontColor: '#E3E3E5'
                },
                transform: {
                    type: 'date',
                    all: '%D %M %d<br>%H:%i:%s'
                }
            },
            scaleY: {
                minorTicks: 1,
                lineColor: '#E3E3E5',
                tick: {
                    lineColor: '#E3E3E5'
                },
                minorTick: {
                    lineColor: '#E3E3E5'
                },
                minorGuide: {
                    visible: true,
                    lineWidth: 1,
                    lineColor: '#E3E3E5',
                    alpha: 0.7,
                    lineStyle: 'dashed'
                },
                guide: {
                    lineStyle: 'dashed'
                },
                item: {
                    fontColor: '#E3E3E5'
                }
            },
            tooltip: {
                borderWidth: 0,
                borderRadius: 3
            },
            preview: {
                adjustLayout: true,
                borderColor: '#E3E3E5',
                mask: {
                    backgroundColor: '#E3E3E5'
                }
            },
            crosshairX: {
                plotLabel: {
                    multiple: true,
                    borderRadius: 3
                },
                scaleLabel: {
                    backgroundColor: '#53535e',
                    borderRadius: 3
                },
                marker: {
                    size: 7,
                    alpha: 0.5
                }
            },
            crosshairY: {
                lineColor: '#E3E3E5',
                type: 'multiple',
                scaleLabel: {
                    decimals: 2,
                    borderRadius: 3,
                    offsetX: -5,
                    fontColor: "#2C2C39",
                    bold: true
                }
            },
            series: []
        };

        this.$onInit = function () {
            $http.get(urljoin(__env.statsUrl, "test")).then(function (response) {
                $scope.myJson.series = response.data;
            })
        };

        this.$onDestroy = function () {
        };
    })

And the code of the view is:

<div class="row" ng-controller="DashBoardController">
  <div class="col-md-12">
    <div class="box">
      <div class="box-header with-border">
        <h3 class="box-title">Videos mas vistos</h3>

        <div class="box-tools pull-right">
          <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
            <i class="fa fa-minus"></i>
          </button>
          <button type="button" class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
            <i class="fa fa-times"></i>
          </button>
        </div>
      </div>
      <div >
        <div zingchart id="myChart" class="box-body" zc-json="myJson" zc-values="series" zc-height=400 zc-width=100%></div>
      </div>
    </div>
  </div>
</div>

I try remove element on destroy, but nothing, can you help me_

[varu1303]

+1
Were you able to resolve it?

[macjohnny]

same here. this is not related to the Angular.JS integration, but to zingchart itself, since we see the error in an Angular application.

[macjohnny]

@gnardecky any idea how to solve this?
we even have

  ngOnDestroy() {
    this._onDestroy.next();
    this._onDestroy.complete();

    if (this._currentChart) {
      this.zone.runOutsideAngular(() => {
        zingchart.exec(this._currentChart.id, 'destroy');
      });
    }
  }

but the error still appears

[macjohnny]

Here is a demo that demonstates the issue: https://codepen.io/macjohnny-zh/pen/LJVooJ
It seems that the resize event fires and re-renders the chart even after it was destroyed.

The problem also occurs if the containing element is not removed, which you can try with the following example:
https://codepen.io/macjohnny-zh/pen/VGLova

The stack-trace is slightly different in that case:

VM3346:1 Uncaught TypeError: Cannot read property 'appendChild' of null
    at d.build (eval at <anonymous> (VM3299 zingchart.min.js:8), <anonymous>:1:459057)
    at d.e.(anonymous function) [as build] (eval at <anonymous> (https://cdn.zingchart.com/zingchart.min.js:8:30), <anonymous>:1:18077)
    at d.paint (eval at <anonymous> (VM3299 zingchart.min.js:8), <anonymous>:1:475714)
    at d.e.(anonymous function) [as paint] (eval at <anonymous> (https://cdn.zingchart.com/zingchart.min.js:8:30), <anonymous>:1:18077)
    at d.paint (eval at <anonymous> (VM3299 zingchart.min.js:8), <anonymous>:1:270990)
    at d.e.(anonymous function) [as paint] (eval at <anonymous> (https://cdn.zingchart.com/zingchart.min.js:8:30), <anonymous>:1:18077)
    at eval (eval at <anonymous> (VM3299 zingchart.min.js:8), <anonymous>:1:250751)
    at d.OY (eval at <anonymous> (VM3299 zingchart.min.js:8), <anonymous>:1:260576)
    at eval (eval at <anonymous> (VM3299 zingchart.min.js:8), <anonymous>:1:250725)
    at Object.zingchart.A0Q (eval at <anonymous> (VM3299 zingchart.min.js:8), <anonymous>:1:105382)

Note: if you have troubles reproducing the issue, remove the scheduleShowHide(); line in the example and trigger creation / destruction of the chart manually with the button (clicking the button wildly will eventually cause the issue).

The error also occurs when not explicitly calling zingchart.exec(currentChartId, 'destroy'); but just removing the parent container: https://codepen.io/macjohnny-zh/pen/zJGgBg

[macjohnny]

the settings

zingchart.DEV.RESIZESPEED = 10;
zingchart.DEV.DEBOUNCESPEED = 10;

seem to resolve the issue in some cases, but not always.

[macjohnny]

The issue seems to be resolved with zingchart version 2.8.1
However, with null values in the values array it was necessary for us to set

zingchart.DEV.GC = 0;

in order to avoid a Cannot read property A of null error when removing the chart (to avoid memory leaks)

  ngOnDestroy() {
      ...
      this.zone.runOutsideAngular(() => {
        zingchart.exec(this._currentChart.id, 'destroy');
      });
    }
  }

[macjohnny]

@ctaity could you try zingchart@2.8.1 and close this issue if it is resolved?

[skilltik]

I have the same problem here, update to 2.8.1 don't fix the issue.

[macjohnny]

@skilltik what is the error message you get?

[skilltik]

VM137881:1 Uncaught TypeError: Cannot read property 'A' of null
at d.gc (eval at (zingchart.min.js:8), :1:582375)
at d.gc (eval at (zingchart.min.js:8), :1:493139)
at d.gc (eval at (zingchart.min.js:8), :1:301922)
at Object.zingchart.ABY (eval at (zingchart.min.js:8), :1:134793)
at Object.zingchart.exec (eval at (zingchart.min.js:8), :1:133375)
at Object.zingchart.A7V (eval at (zingchart.min.js:8), :1:118374)
at Object.zingchart.render (eval at (zingchart.min.js:8), :1:107468)
at setTimeout (historyChartExtension_devel_develop.js:226)

[skilltik]

@macjohnny

with zingchart 2.7.0 and these three lines that you suggested:

zingchart.DEV.RESIZESPEED = 10;
zingchart.DEV.DEBOUNCESPEED = 10;
zingchart.DEV.GC = 0;

looks like the issue is solved.
thank you

[macjohnny]

@skilltik the Uncaught TypeError: Cannot read property 'A' of null error occurs with zingchart 2.8.1, but it can be avoided with zingchart.DEV.GC = 0.

With Zingchart 2.7.0, the zingchart.DEV.GC = 0 setting should not be necessary.
However with 2.7.0 the

zingchart.DEV.RESIZESPEED = 10;
zingchart.DEV.DEBOUNCESPEED = 10;

are only a workaround and in our case did not always resolve the problem.

With 2.8.1 and only zingchart.DEV.GC = 0 it seems to work without errors.

[macjohnny]

version 2.8.2 seems to resolve the issue without the need of any further setting.
so I think this issue should be closed.