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