Don't appear any chart

Thread is closed for posting
3 posts, 1 answers
  1. Ágoston
    Ágoston avatar
    4 posts
    Member since:
    Oct 2017

    Posted 28 Oct 2017 Link to this post

    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>

  2. Answer
    Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 30 Oct 2017 Link to this post

    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, nativescript-pro-ui, tns-core-modules, node, npm 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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  3. Ágoston
    Ágoston avatar
    4 posts
    Member since:
    Oct 2017

    Posted 15 Nov 2017 in reply to Nikolay Tsonev Link to this post

    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

Back to Top