NoHorizontalAxis and more

[Ágoston]

Hi!

I want to implement a line series chart, but on screen instead of chart, appeare three line of string:

NoHorizontalAxis
NoVerticalAxis
NoSeries

 

In the component ts get function, i call console.dir() about the datasource, and it's appear perfectly on console:

get countrySource(): ObservableArray<Country> {
        console.dir(this._categoricalSource);
        return this._categoricalSource;
    }

 

here the html

<RadCartesianChart tkExampleTitle tkToggleNavButton>
    <LineSeries tkCartesianSeries [items]="countrySource" categoryProperty="Country" valueProperty="Amount">
        <CategoricalAxis tkCartesianHorizontalAxis></CategoricalAxis>
        <LinearAxis tkCartesianVerticalAxis></LinearAxis>
    </LineSeries>
</RadCartesianChart>

 

component import header:

import { DataService } from '../data-services/data.service';
import { Country } from '../data-services/data.service';
import { ObservableArray } from "tns-core-modules/data/observable-array";
import { RadChartBase } from "nativescript-pro-ui/chart/"

 

app module imports:

import { NgModule, NgModuleFactoryLoader, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NSModuleFactoryLoader } from "nativescript-angular/router";
import { NativeScriptHttpModule } from "nativescript-angular/http";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";

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

 

Where is went wrong?

 

Thanks

Augustine

 

[Nikolay Tsonev]

Hello,

Thank you for contacting us 

We tested your case on our side, however, the component seems to be rendered properly. To be able to investigate further the issue, please provide a sample project or make the needed changes in the attached one, which will allow us to recreate the issue.
Regarding the given info, the issue could be related to setting up the correct height to the component. To resolve this I suggest to use GridLayout for the main container or to specify the component height. For example:

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

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

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