SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components
I want to build a column chart but I got the following error:
ERROR TypeError: Cannot read property ‘append’ of undefined
The error happened in line #42.
My code:
export class OutputAmplitudeComponent implements OnInit, OnDestroy {
constructor(@Inject(SETTING_SERVICE) private settingService: SettingService, private cdr: ChangeDetectorRef) {}
ngOnInit() {
this.settingService.registerSetting(HarmonicAmpSetting).pipe(takeUntil(this.ngUnsubHarmonicData)).subscribe(setting => {
const OutputAmplitudeData = setting.value;
for (let x = 1; x < this.numberOfOutput; x++) {
if (this.OutputMode === 'Voltage') {
if (phaseNum === 1) {
this.ampSource.data[x-1].voltage1 = OutputAmplitudeData[x];
} else if (phaseNum === 2) {
this.ampSource.data[x-1].voltage2 = OutputAmplitudeData[x];
} else if (phaseNum === 3) {
this.ampSource.data[x-1].voltage3 = OutputAmplitudeData[x];
}
} else if (this.OutputMode === 'Current') {
if (phaseNum === 1) {
this.ampSource.data[x-1].current1 = OutputAmplitudeData[x];
} else if (phaseNum === 2) {
this.ampSource.data[x-1].current2 = OutputAmplitudeData[x];
} else if (phaseNum === 3) {
this.ampSource.data[x-1].current3 = OutputAmplitudeData[x];
}
}
}
this.updateData();
});
this.sciChartInit();
}
updateData(){
var phaseNum1 = [];
var xData = [];
for (let x = 1; x < this.numberOfOutput; x++) {
if (this.ampSource.data != null && this.ampSource.data[x-1] != null) {
phaseNum1[x - 1] = parseFloat(this.ampSource.data[x - 1].voltage1);
xData[x - 1] = x;
if (!isNaN(phaseNum1[x - 1])) {
this.dataSeries1.append(x,x);
} else {
console.log("No num");
}
}
}
}
async sciChartInit() {
const { wasmContext, sciChartSurface } = await SciChartSurface.create("chart");
var phaseNum1 = [];
var xData = [];
this.dataSeries1 = new XyDataSeries(wasmContext);
for (let x = 1; x < this.numberOfOutput; x++) {
this.dataSeries1.append(x, x);
}
const xAxis = new NumericAxis(wasmContext);
sciChartSurface.xAxes.add(xAxis);
const yAxis = new NumericAxis(wasmContext);
sciChartSurface.yAxes.add(yAxis);
const rendSeries1 = new StackedColumnRenderableSeries(wasmContext);
rendSeries1.fill = "#dc443f";
rendSeries1.stroke = "green";
rendSeries1.strokeThickness = 1;
rendSeries1.dataSeries = this.dataSeries1;
rendSeries1.stackedGroupId = "one";
const verticallyStackedColumnCollection = new StackedColumnCollection(wasmContext);
verticallyStackedColumnCollection.dataPointWidth = 0.5;
verticallyStackedColumnCollection.add(rendSeries1);
verticallyStackedColumnCollection.animation = new ScaleAnimation({ duration: 1000, fadeEffect: true });
sciChartSurface.renderableSeries.add(verticallyStackedColumnCollection);
sciChartSurface.chartModifiers.add(new ZoomExtentsModifier(), new ZoomPanModifier(), new MouseWheelZoomModifier());
sciChartSurface.zoomExtents();
sciChartSurface.chartModifiers.add(
new LegendModifier({
placement: ELegendPlacement.TopRight,
orientation: ELegendOrientation.Horizontal,
showLegend: true,
showCheckboxes: true,
showSeriesMarkers: true
})
);
return { wasmContext, sciChartSurface };
}}
I don’t understand what is undefined and why.
Thank you.
Hi there,
It means when you call this function
this.dataSeries1.append(x,x);
this.dataSeries1 is undefined or null.
The reason for that I don’t know without having access to some code to reproduce the problem. Try putting some logging in your code to check
e.g.
console.log("DataSeries is " + this.dataSeries1 === undefined ? "NULL" : "Not Null");
This will help you diagnose the problem
Best regards,
Andrew
Please login first to submit.