line series

4 posts, 0 answers
  1. License
    License avatar
    26 posts
    Member since:
    Oct 2016

    Posted 25 Oct Link to this post

    <LineSeries tkCartesianSeries seriesName="income"  [items]="categoricalSource" categoryProperty="month" valueProperty="income"></LineSeries>
    <LineSeries tkCartesianSeries seriesName="expense" [items]="categoricalSource" categoryProperty="month" valueProperty="expense"></LineSeries>
    <LineSeries tkCartesianSeries seriesName="balance" [items]="categoricalSource" categoryProperty="month" valueProperty="balance"></LineSeries>
    <LineSeries tkCartesianSeries seriesName="totalbalance" [items]="categoricalSource" categoryProperty="month" valueProperty="totalBalance"></LineSeries>

     

    Just like the code above,how can I select a month and show the number? Of course ,it isn't the label ,because my when my number is big,labels are messy.

    Please look at my image file below.

  2. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    66 posts

    Posted 25 Oct Link to this post

    Hi,

    Thank you for interest in NativeScript.

    I reviewed your problem and found that perhaps for your case you could use the chart component called  `Trackball`, which will allow you to display label while you select specific point from the Charts. You could review this component here. For further help I am attaching sample code. You could create new project and to reuse the given code, where you will find how TrackBall works.

    app.component.html
    <GridLayout>
       <StackLayout>
           <RadCartesianChart height="300" width="300">
               <CategoricalAxis tkCartesianHorizontalAxis></CategoricalAxis>
               <LinearAxis tkCartesianVerticalAxis></LinearAxis>
     
               <AreaSeries tkCartesianSeries [items]="categoricalSource" categoryProperty="Country" valueProperty="Amount"></AreaSeries>
               <Trackball tkCartesianTrackball snapMode="AllClosestPoints" showIntersectionPoints="true"></Trackball>
           </RadCartesianChart>
       </StackLayout>
    </GridLayout>


    app.component.ts
    import {Component} from "@angular/core";
     
    @Component({
        selector: "my-app",
        templateUrl: "app.component.html",
    })
    export class AppComponent {
        public categoricalSource;
        constructor(){
            this.categoricalSource=[
                { 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 }
            ];
        }
    }

    If this is not your case could you provide more info or sample project, where has been shown the problem. 

    Regards,
    nikolay.tsonev
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. License
    License avatar
    26 posts
    Member since:
    Oct 2016

    Posted 26 Oct in reply to nikolay.tsonev Link to this post

    I run your code ,the rusult is in the file below.Why I can't see the trackball?

    Another problem,when I use *ngIf in my code,I defined a boolean variable "showIncomeList".But when I change the status from true to false,why didn't the UI change ?Please look at my code below.

     

    <RadCartesianChart exampleTitle toggleNavButton>
    <CategoricalAxis   tkCartesianHorizontalAxis></CategoricalAxis>
    <LinearAxis  tkCartesianVerticalAxis></LinearAxis>

    <LineSeries *ngIf="showIncomeList" tkCartesianSeries seriesName="income"  [items]="categoricalSource" categoryProperty="month" valueProperty="income"></LineSeries>
    <LineSeries *ngIf="false" tkCartesianSeries seriesName="expense" [items]="categoricalSource" categoryProperty="month" valueProperty="expense"></LineSeries>
    <LineSeries tkCartesianSeries seriesName="balance" [items]="categoricalSource" categoryProperty="month" valueProperty="balance"></LineSeries>
    <LineSeries tkCartesianSeries seriesName="totalbalance" [items]="categoricalSource" categoryProperty="month" valueProperty="totalBalance"></LineSeries>
    <Palette  tkCartesianPalette seriesName="income">
    <PaletteEntry tkCartesianPaletteEntry strokeWidth="2" strokeColor="#8092E7C4"></PaletteEntry>
    </Palette>
    <Palette tkCartesianPalette seriesName="expense">
    <PaletteEntry tkCartesianPaletteEntry strokeWidth="2" strokeColor="#80F478B7"></PaletteEntry>
    </Palette>
    <Palette tkCartesianPalette seriesName="balance">
    <PaletteEntry tkCartesianPaletteEntry  strokeWidth="2" strokeColor="#808278F3"></PaletteEntry>
    </Palette>
    <Palette tkCartesianPalette seriesName="totalbalance">
    <PaletteEntry tkCartesianPaletteEntry  strokeWidth="2" strokeColor="#80CA68FF"></PaletteEntry>
    </Palette>
    <Trackball tkCartesianTrackball snapMode="AllClosestPoints" showIntersectionPoints="true"></Trackball>
    <!--<PointLabelStyle tkLineLabelStyle  margin="10"  fillcolor="blue" ></PointLabelStyle>-->


    </RadCartesianChart>

     

  4. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    66 posts

    Posted 26 Oct Link to this post

    Hello,

    Thank you for writing us back.

    The TrackBall will be shown, when you select some of the values from the charts and above the line will appear box, where selected value will be displayed. You could review the attached  picture. About your second problem at the moment ngIf has not been supported for the SeriesRegarding to that I have add new feature request in the nativescript-ui-sample-angular repoYou could also keep track on the new features updates and fixes in our Release notes section.  We also have dedicated "What's new" blog article which can be found here. At the moment the only way to hide or show some of the Series is to remove or add it to the RadCartesianChart collection. I have attached sample code, where has been shown how you could do that. 

    app.component.html

    <GridLayout>
        <StackLayout>
            <Button text="tap" (tap)="onTap()"></Button>
             
            <RadCartesianChart id="rcc" height="300" width="300">
                <CategoricalAxis tkCartesianHorizontalAxis></CategoricalAxis>
                <LinearAxis tkCartesianVerticalAxis></LinearAxis>
                <LineSeries tkCartesianSeries seriesName="income"  [items]="categoricalSource" categoryProperty="Country" valueProperty="Amount"></LineSeries>
                <Trackball tkCartesianTrackball snapMode="AllClosestPoints" showIntersectionPoints="true"></Trackball>
            </RadCartesianChart>
        </StackLayout>
    </GridLayout>

    app.component.ts

    import {Component} from "@angular/core";
    import {RadCartesianChart, LineSeries} from "nativescript-telerik-ui-pro/chart"
    import {Page} from "ui/page";
     
    @Component({
        selector: "my-app",
        templateUrl: "app.component.html",
    })
    export class AppComponent {
        public categoricalSource;
        public categoricalSource2;
        constructor(private page:Page){
            this.categoricalSource=[
                { 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 }
            ];
     
            this.categoricalSource2=[
                { Country: "Germany", Amount: 22, SecondVal: 20, ThirdVal: 24, Impact: 0, Year: 0 },
                { Country: "France", Amount: 43, SecondVal: 30, ThirdVal: 25, Impact: 0, Year: 0 },
                { Country: "Bulgaria", Amount: 64, SecondVal: 17, ThirdVal: 23, Impact: 0, Year: 0 },
                { Country: "Spain", Amount: 11, SecondVal: 40, ThirdVal: 24, Impact: 0, Year: 0 },
                { Country: "USA", Amount: 28, SecondVal: 22, ThirdVal: 21, Impact: 0, Year: 0 }
            ];
        }
        public onTap(){
     
            var collection:RadCartesianChart =<RadCartesianChart> this.page.getViewById("rcc");
            var newSeries:LineSeries = new LineSeries();
            newSeries.items = this.categoricalSource2;
            newSeries.categoryProperty="Country";
            newSeries.valueProperty="Amount";
            //remove the first series
            collection.series.pop();
            // add new series
            collection.series.push(newSeries);
             
        }
    }

    I hope this information helps.
    Regards,
    nikolay.tsonev
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top