When data is empty i get this error-> ERROR TypeError: Cannot read properties of null (reading ‘getAttribute’)
Error:
chunk-UOKKXAU3.js:7 ERROR TypeError: Cannot read properties of null (reading 'getAttribute')
at wT (chunk-FLTRA2LT.js:2:30682)
at VM (chunk-FLTRA2LT.js:15:65614)
at nnt (chunk-FLTRA2LT.js:15:65536)
**at n.drawGraph (chunk-EXIXHUOH.js:33:1018)**
at Object.next (chunk-EXIXHUOH.js:18:15207)
at io.next (chunk-UOKKXAU3.js:3:3101)
at we._next (chunk-UOKKXAU3.js:3:2784)
at we.next (chunk-UOKKXAU3.js:3:2511)
at Object.next (chunk-JDCFQ7WB.js:26:3066)
at io.next (chunk-UOKKXAU3.js:3:3101)
The highlighted line no takes me to this code:
drawGraph() {
type EChartsOption = echarts.EChartsOption;
**var chartDom = document.getElementById('networkGraph')!;** // error
echarts.dispose(chartDom);
this.mychart = echarts.init(chartDom);
......
.....
}
And when there is some data, I get this error-> ERROR TypeError: Cannot set properties of undefined (setting’dataIndex’)
I am not getting why these error are coming. I would highly appreciate if someone can help.
Data received from server:
{
"headers": {
"normalizedNames": {},
"lazyUpdate": null,
"lazyInit": null,
"headers": {}
},
"status": 200,
"statusText": "OK",
"url": "http://ip:port/handler/?action=trafficVisualizationServiceData",
"ok": true,
"type": 4,
"body": {
"httpstatuscode": 200,
"AppData": {
"data": [],
"link": [],
"categories": [
{
"name": "CNF"
},
{
"name": "SCPE"
},
{
"name": "SCPI"
},
{
"name": "IPENDPOINT"
}
]
},
"opStatusCode": 2000,
"type": "SUCCESS",
"message": "DATA RECEIVED SUCCESSFULLY"
}
}
app.ts:
drawGraph() {
type EChartsOption = echarts.EChartsOption;
var chartDom = document.getElementById('networkGraph')!;
echarts.dispose(chartDom);
this.mychart = echarts.init(chartDom);
interface GraphNode {
symbolSize: number;
label?: {
show?: boolean;
};
}
this.mychart.showLoading();
(this.graph = {
nodes: this.nodes,
links: this.links,
categories: this.categories,
}),
this.mychart.hideLoading();
console.log('nodes : ' + JSON.stringify(this.graph.nodes));
let scpEgressThresholdTps = this.scpEgressThresholdTps;
// this.impactedProxyList.has("")
let impactedProxyListTemp: Set<string> = this.impactedProxyList;
this.graph.nodes.forEach(function (node: any) {
if (node.category == 'IPENDPOINT') {
node.symbol = 'roundRect';
node.symbolSize = 17;
console.log('endpoint_kpi : ' + node.kpi);
if (node.kpi === undefined) {
node.itemStyle = {
color: 'white', // Background color
borderColor: '#818181', // Border color
borderWidth: 1, // Border width
};
} else {
node.itemStyle = {
color: 'white', // Background color
borderColor: '#FD5E5E',
borderWidth: 5, // Border width
};
}
} else if (node.category == 'SCPI') {
node.symbol = 'circle';
node.symbolSize = 20;
let isProxyImpacted: boolean = false;
Object.entries(impactedProxyListTemp).forEach(([key, value]) => {
console.log('key_value : ' + key, value);
if (value == node.proxyId) {
isProxyImpacted = true;
}
});
console.log('isProxyImpacted : ' + isProxyImpacted);
if (isProxyImpacted) {
console.error('this proxy is impacted.');
node.itemStyle = {
color: '#7EA6FF', // Background color
borderColor: '#FD5E5E', // Border color
borderWidth: 5, // Border width
};
} else if (node.value > scpEgressThresholdTps) {
node.itemStyle = {
color: '#7EA6FF', // Background color
borderColor: '#fee902', // Border color
borderWidth: 5, // Border width
};
} else {
node.itemStyle = {
color: '#7EA6FF', // Background color
borderWidth: 1, // Border width
};
}
} else if (node.category == 'SCPE') {
node.symbol = 'circle';
node.symbolSize = 20;
let isProxyImpacted: boolean = false;
Object.entries(impactedProxyListTemp).forEach(([key, value]) => {
console.log('key_value : ' + key, value);
if (value == node.proxyId) {
isProxyImpacted = true;
}
});
if (isProxyImpacted) {
console.error('this proxy is impacted.');
node.itemStyle = {
color: '#3188FF', // Background color
borderColor: '#FD5E5E', // Border color
borderWidth: 5, // Border width
};
} else if (node.value > scpEgressThresholdTps) {
node.itemStyle = {
color: '#3188FF', // Background color
borderColor: '#fee902', // Border color
borderWidth: 5, // Border width
};
} else {
node.itemStyle = {
color: '#3188FF', // Background color
borderWidth: 1, // Border width
};
}
} else if (node.category == 'CNF') {
node.symbol = 'roundRect';
node.symbolSize = 26;
node.itemStyle = {
color: '#00A1BE', // Background color
borderWidth: 1, // Border width
};
} else {
node.symbol = 'circle';
node.symbolSize = 13;
node.itemStyle = {
borderColor: '#5E42FA', // Border color
borderWidth: 1, // Border width
};
}
});
this.graph.links.forEach(function (link: any) {
console.log('isLinkImpacted : ' + link.isLinkImpacted);
if (link.isLinkImpacted === undefined) {
link.lineStyle = {
width: 2, // Set width of the line
type: 'solid', // Set type of the line to solid
color: 'green', // Set color of the line
};
} else {
link.lineStyle = {
width: 2, // Set width of the line
type: 'solid', // Set type of the line to solid
color: 'red', // Set color of the line
};
}
});
this.mychart.setOption(this.option);
this.option && this.mychart.setOption(this.option);
}
HTML:
<div *ngIf="showConnectedGraph && isConnectedGraphDataAvailable " id="networkGraph" style="width: 100%; border-radius: 5px; height: 550px; background-color: white;"></div>
<div class="nodata" *ngIf="(showConnectedGraph) && (!isConnectedGraphDataAvailable)" style="width: 100%; border-radius: 5px; height: 550px; background-color: white;">Data Not Available</div>
