AmCharts.updateChart gives error

[justinbleach]

I'm doing this:

this.AmCharts.updateChart(this.chart, ()=>{console.log('test')});

in a function in my component.

So inside ngAfterViewInit function I create my chart; this.chart = this.AmCharts.makeChart('chartDiv',....)

And immediately call my other function which does the update. With the updateChart method in I get an error when the page loads: ERROR TypeError: Cannot set property 'innerHTML' of null

As I'm not actually changing anything, just calling update I'm not sure what's going on.

[justinbleach]

Error seems to be coming from the AmStockChart javascript some where. I believe it's happening on the chart.validateNow(true); call

[Pauan]

@justinbleach Why are you calling this.AmCharts.updateChart immediately after creating the chart?

Does it work correctly if you remove this.AmCharts.updateChart?

[justinbleach]

@Pauan there isn't any console error but I don't see my chart data either. Here is my chart create function:

createDefaultChart() { this.statusAmChart = this.AmCharts.makeChart('statusChartDiv', { "type" : "stock", "dataSets" : [this.populateInitialData()], // returns a list [ {}, {}, {},...] of objects "panels": [], "mouseWheelScrollEnabled": false, "theme" : "light", "categoryField" : "timestamp", "dataDateFormat" : "YYYY-MM-DD JJ:NN:SS", "export": { "enabled": true, "position" : "top-left" }, "valueAxesSettings" : { "inside" : false, "autoMargins" : true }, "categoryAxesSettings" : { "minPeriod" : "ss", "maxSeries" : 0 }, "chartScrollbarSettings" : { "enabled" : false, "graph" : "AmGraph-DeviceVoltage", "position" : "top" }, "chartCursorSettings" : { "valueBalloonsEnabled" : true, "categoryBalloonDateFormats": [{ period: "YYYY", format: "YYYY" }, { period: "MM", format: "MMM, YYYY" }, { period: "WW", format: "MMM DD, YYYY" }, { period: "DD", format: "MMM DD, YYYY" }, { period: "hh", format: "JJ:NN" }, { period: "mm", format: "MMM DD, YYYY JJ:NN:SS" }, { period: "ss", format: "JJ:NN:SS" }, { period: "fff", format: "JJ:NN:SS" }] }, "periodSelector" : { "inputFieldsEnabled" : false, "position" : "top", "dateFormat" : "YYYY-MM-DD JJ:NN:SS", "periods" : [ { "period" : "hh", "count" : 1, "label" : "1 hour", }, { "period" : "hh", "count" : 2, "label" : "2 hours" }, { "period" : "hh", "count" : 5, "label" : "5 hour" }, { "period" : "hh", "count" : 12, "label" : "12 hours" }, { "period" : "MAX", "selected" : true, "label" : "MAX" } ] }, "panelsSettings" : { "usePrefixes" : true } }); }

[justinbleach]

@Pauan that's actually what we start with. Then we build the Panels etc dynamically depending on what's passed in. However, regardless of where I call the updateChart function I always get that error:

Cannot set property 'innerHTML' of null

[justinbleach]

Full stack:

ERROR TypeError: Cannot set property 'innerHTML' of null at b.afterWrite (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:20), :7:170) at b.write (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:20), :4:101) at b.validateNow (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:20), :59:346) at index.js:335 at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:392) at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run (zone.js:142) at NgZone.webpackJsonp.../../../core/@angular/core.es5.js.NgZone.runOutsideAngular (core.es5.js:3844) at AmChartsService.webpackJsonp.../../../../@amcharts/amcharts3-angular/es2015/index.js.AmChartsService.updateChart (index.js:333)

[ravithb]

I'm also facing the same issue.

[zuice32]

My solution I posted here might help: https://github.com/amcharts/amcharts3-angular2/issues/12