This is a migrated thread and some comments may be shown as answers.

line series

3 Answers 111 Views
Chart
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
License
Top achievements
Rank 1
License asked on 25 Oct 2016, 08:10 AM

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

3 Answers, 1 is accepted

Sort by
0
Nikolay Tsonev
Telerik team
answered on 25 Oct 2016, 11:40 AM
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 point from the Charts. You could review this component here. For further I am attaching sample code. You could create 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  

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
0
License
Top achievements
Rank 1
answered on 26 Oct 2016, 08:17 AM

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>

 

0
Nikolay Tsonev
Telerik team
answered on 26 Oct 2016, 11:46 AM
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 Series.   I have   feature request in the --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
Tags
Chart
Asked by
License
Top achievements
Rank 1
Answers by
Nikolay Tsonev
Telerik team
License
Top achievements
Rank 1
Share this question
or