NoHorizontalAxis and more

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

    Posted 29 Oct 2017 Link to this post

    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

     

  2. Answer
    Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 30 Oct 2017 Link to this post

    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 could 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
    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