I've recently started learning about Nativescript development and encountered an issue while trying to implement the Nativescript-ui-chart in my app. When I load the page I created, the screen goes blank with nothing being displayed.
I followed the instructions provided in this guide . Additionally, I downloaded and tested the Sample code from Git-Hub, which worked perfectly fine. However, when I tried to replicate the code in my project, it resulted in the same blank screen issue as mentioned earlier.
At this point, I suspect that the problem lies within the libraries I am using, possibly due to some compatibility issues with the charts.
I utilized the exact code provided in the link above...
<RadCartesianChart>
<CategoricalAxis tkCartesianHorizontalAxis></CategoricalAxis>
<LinearAxis tkCartesianVerticalAxis></LinearAxis>
<LineSeries tkCartesianSeries [items]="categoricalSource"
categoryProperty="Country" valueProperty="Amount">
</LineSeries>
</RadCartesianChart>
import { Injectable } from '@angular/core';
@Injectable()
export class DataService {
getCategoricalSource(): Country[] {
return [
{ Country: "Germany", Amount: 15, SecondVal: 14, ThirdVal: 24, Impact: 0, Year: 0 },
{ Country: "France", Amount: 13, SecondVal: 23, ThirdVal: 25, Impact: 0, Year: 0 },
{ Country: "Bulgaria", Amount: 24, SecondVal: 17, ThirdVal: 23, Impact: 0, Year: 0 },
{ Country: "Spain", Amount: 11, SecondVal: 19, ThirdVal: 24, Impact: 0, Year: 0 },
{ Country: "USA", Amount: 18, SecondVal: 8, ThirdVal: 21, Impact: 0, Year: 0 }
];
}
}
@Component({
selector: "ns-service-detail",
templateUrl: "./service-detail.component.html",
styleUrls: ["./service-detail.component.scss"],
moduleId: module.id,
providers: [DataService],
})
export class ServiceDetailComponent {
ngOnInit() {
this._categoricalSource = new ObservableArray(this._dataService.getCategoricalSource());
}
private _categoricalSource: ObservableArray<Country>;
get categoricalSource(): ObservableArray<Country> {
return this._categoricalSource;
}
}
export class Country {
constructor(public Country?: string, public Amount?: number, public SecondVal?: number, public ThirdVal?: number, public Impact?: number, public Year?: number) {
}
}
Although no errors are appearing in the console log, debugging this issue has proven to be quite challenging for me.