Don't appear any chart

[Ágoston]

Hi!

I want to implement a RadCartesianChart module, but after i did everything what the getting start said (http://docs.telerik.com/devtools/nativescript-ui/Controls/Angular/Chart/getting-started), it did't appear at all.

When i debugging with Crome DevTool, in the element tree created some PorxyViewContainer, but nothing like RadCartesianChart.

I'm looked for answers in app module import section (or the component's module import section, but when i import the Chart module, nothing happend.

What did i missed when i trying to implement it?

 

Thanks!

Augustine Dauner

 

component ts snippet:

01.import { Component, OnInit } from "@angular/core";
02.import { HttpGetService } from "./http.service";
03.
04.//for chart
05.import { DataService } from '../data-services/data.service';
06.import { Country } from '../data-services/country';
07.import { ObservableArray } from "tns-core-modules/data/observable-array";
08.
09.@Component({
10.    selector: "Home",
11.    moduleId: module.id,
12.    templateUrl: "./home.component.html",
13.    providers: [HttpGetService, DataService]
14.})
15.export class HomeComponent implements OnInit {
16.
17.    private countrySource: ObservableArray<Country>;
18.
19.    constructor(private httpService: HttpGetService, private dataService: DataService) {
20.    }
21.
22.    ngOnInit(): void {
23.        this.countrySource = new ObservableArray(this.dataService.getCountrySource());
24.    }
25.
26.
27.    get countrySourceFunc(): ObservableArray<Country> {
28.        return this.countrySource;
29.    }
30.
31.}

 

component  module import section:

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";

import { HomeRoutingModule } from "./home-routing.module";
import { HomeComponent } from "./home.component";

import { NativeScriptUIChartModule } from "nativescript-pro-ui/chart/angular";
import { NativeScriptUIListViewModule } from "nativescript-pro-ui/listview/angular";

@NgModule({
    imports: [
        NativeScriptModule,
        HomeRoutingModule,
        NativeScriptUIChartModule,
        NativeScriptUIListViewModule
    ],
    declarations: [
        HomeComponent
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class HomeModule { }

compontent html snippet:

<StackLayout class="page">
    <RadCartesianChart>
        <CategoricalAxis tkCartesianHorizontalAxis></CategoricalAxis>
        <LinearAxis tkCartesianVerticalAxis></LinearAxis>
        <LineSeries tkCartesianSeries [items]="countrySourceFunc" categoryProperty="Country" valueProperty="Amount"></LineSeries>
    </RadCartesianChart>
</StackLayout>

[Nikolay Tsonev]

Hi,

First of all, thank you for your interest in UI for NativeScript.
I reviewed your code, however, was unable to recreate an issue with the RadChart component. For your convenience, I am attaching sample project and screenshots from both simulators. You could review it and make the needed changes, which will help us to recreate the problem. It would help if you could provide some more info about your environment(CLI, -pro-, -core-modules, node,  versions).

Something that I would suggest is to setup GridLayout for the main container for the RadChart component as it is shown in the sample project or to specify the height as it is shown below. This will allow the component to set up the correct size for the component in both platforms.
 

<StackLayout class="page">
    <RadCartesianChart height="150">
        <CategoricalAxis tkCartesianHorizontalAxis></CategoricalAxis>
        <LinearAxis tkCartesianVerticalAxis></LinearAxis>
        <LineSeries tkCartesianSeries [items]="countrySourceFunc" categoryProperty="Country" valueProperty="Amount"></LineSeries>
    </RadCartesianChart>
</StackLayout>

Thank you in advance for your cooperation.

Regards,
nikolay.tsonev
Progress Telerik

[Ágoston]

Hi nikolay!

Thanks for the reply.

At the end i copied a working chart project sample, from the forum below, and add my code to that. And now everything fine.

 

Thanks again, for the sample too!

Augustine