<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
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
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>
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 repo, You 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