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

LineSeries display like area on android

7 Answers 44 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 asked on 25 Oct 2016, 10:00 AM

line-chart.jpg

Please look at my file below.Why LineSeries display so weird in android?

<GridLayout class="m-t-10" row="1" col="0" colSpan="4">

<RadCartesianChart exampleTitle toggleNavButton>
<CategoricalAxis tkCartesianHorizontalAxis></CategoricalAxis>
<LinearAxis hidden="true" tkCartesianVerticalAxis></LinearAxis>

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


</RadCartesianChart>
</GridLayout>

7 Answers, 1 is accepted

answered on 25 Oct 2016, 10:20 AM

Hello,

We have tested the code you provided with mocked data but on our side, everything looks as expected just like this example.
However, I have noticed that you are using some CSS styling that probably comes from a theme... perhaps it is possible that the theme applies a custom style for some of the elements used in the chart and overrides it is original appearance.

In order, to reproduce your scenario we will need more details and code. Is it possible to share a working demo that can reproduce this issue (here with archive file or via GitHub or other source control)?
Also, can you provide additional information on what Android API level you are testing?

Regards,
Nikolay Iliev
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

answered on 26 Oct 2016, 08:50 AM

axistext.png

I don't know why it is ok now .But thanks all the same.

Another problem,why the vertical axis's texts look so small on android but it looks nice on IOS?Please looa at the attach file below.

answered on 26 Oct 2016, 09:35 AM

color-android.png

It is still the page's problem.My code is below.The lines colors should be in accordance with the four eyeicons.IOS is right,but why android is different?

<GridLayout height="70%" columns="*,*,*,*" rows="auto,*">
<StackLayout class="stackLayout" orientation="vertical" row="0" col="0">
<Label class="fa h3 icon-income text-center" text="{{ incomeIcon | fonticon}}" (tap)="changeIncomeStatus()"></Label>
<Label class="label h4 text-center" text="收入"></Label>
</StackLayout>
<StackLayout class="stackLayout" orientation="vertical" row="0" col="1">
<Label class="fa h3 icon-expense text-center" text="{{ expenseIcon | fonticon}}" (tap)="changeExpenseStatus()"></Label>
<Label class="label h4 text-center" text="支出"></Label>
</StackLayout>
<StackLayout class="stackLayout" orientation="vertical" row="0" col="2">
<Label class="fa h3 icon-balance text-center" text="{{ balanceIcon | fonticon}}" (tap)="changeBalanceStatus()"></Label>
<Label class="label h4 text-center" text="月收支差"></Label>
</StackLayout>
<StackLayout class="stackLayout" orientation="vertical" row="0" col="3">
<Label class="fa h3 icon-totalbalance text-center" text="{{ totalbalanceIcon | fonticon}}" (tap)="changeTotalBalanceStatus()"></Label>
<Label class="label h4 text-center" text="总收支差"></Label>
</StackLayout>
<GridLayout class="m-t-10" row="1" col="0" colSpan="4" width="300">

<RadCartesianChart exampleTitle toggleNavButton>
<CategoricalAxis tkCartesianHorizontalAxis></CategoricalAxis>
<LinearAxis tkCartesianVerticalAxis></LinearAxis>
<SplineSeries *ngIf="showIncomeList" tkCartesianSeries seriesName="income" [items]="categoricalSource" categoryProperty="month"
valueProperty="income"></SplineSeries>
<SplineSeries tkCartesianSeries seriesName="expense" [items]="categoricalSource" categoryProperty="month" valueProperty="expense"></SplineSeries>
<SplineSeries tkCartesianSeries seriesName="balance" [items]="categoricalSource" categoryProperty="month" valueProperty="balance"></SplineSeries>
<SplineSeries tkCartesianSeries seriesName="totalbalance" [items]="categoricalSource" categoryProperty="month" valueProperty="totalBalance"></SplineSeries>
<Palette tkCartesianPalette seriesName="income">
<PaletteEntry tkCartesianPaletteEntry strokeWidth="1" strokeColor="#92E7C4"></PaletteEntry>
</Palette>
<Palette tkCartesianPalette seriesName="expense">
<PaletteEntry tkCartesianPaletteEntry strokeWidth="1" strokeColor="#F478B7"></PaletteEntry>
</Palette>
<Palette tkCartesianPalette seriesName="balance">
<PaletteEntry tkCartesianPaletteEntry strokeWidth="1" strokeColor="#8278F3"></PaletteEntry>
</Palette>
<Palette tkCartesianPalette seriesName="totalbalance">
<PaletteEntry tkCartesianPaletteEntry strokeWidth="1" strokeColor="#CA68FF"></PaletteEntry>
</Palette>
<Trackball tkCartesianTrackball snapMode="AllClosestPoints" showIntersectionPoints="true"></Trackball>

</RadCartesianChart>
</GridLayout>
</GridLayout>

answered on 26 Oct 2016, 10:58 AM

Hello to All from ,

For your first question regarding the different font-size in Android and iOS:
- The reason behind that is because the different devices have different resolution and fonts are using DIP (device independent pixels) to be visualised (among with all other components in nativeScript). If you start different device for Android with different resolution and scale-factor it will look again different.
The emulator you are using has great scale factor and that is why the font looks small.
You can, however, manually increase the font-size (this will be reflected on all emulators)
For example:

<CategoricalAxis tkCartesianHorizontalAxis labelTextColor="#cb4b16" labelSize="14" lineThickness="3" lineColor="Blue"></CategoricalAxis>

<LinearAxis tkCartesianVerticalAxis labelTextColor="#cb4b16" labelSize="14" lineThickness="3" lineColor="Blue"></LinearAxis>

As for you another issue regarding the strokeColor of your palettes - we were able to reproduce the behaviour in a local project (under Android as in your case) and we are currently investigating what is causing the last palette to ignore its set strokeColor. We will came back at you when we have more information and solution about this case.

Regards,
Nikolay Iliev
Telerik by Progress

answered on 26 Oct 2016, 12:06 PM

Hi,

We have managed to provide a solution that is working as expected for application.
What needs to be done in order for the colors of the series to be visualized as expected is to use one palette with multiple palletteEntries.

For example in your scenario:

<SplineSeries tkCartesianSeries seriesName="tagName" [items]="categoricalSource" categoryProperty="month" valueProperty="income"></SplineSeries>

<SplineSeries tkCartesianSeries seriesName="tagName" [items]="categoricalSource" categoryProperty="month" valueProperty="expense"></SplineSeries>

<SplineSeries tkCartesianSeries seriesName="tagName" [items]="categoricalSource" categoryProperty="month" valueProperty="balance"></SplineSeries>

<SplineSeries tkCartesianSeries seriesName="tagName" [items]="categoricalSource" categoryProperty="month" valueProperty="totalBalance"></SplineSeries>

<Palette tkCartesianPalette seriesName="tagName">

<PaletteEntry tkCartesianPaletteEntry strokeWidth="1" strokeColor="#92E7C4"></PaletteEntry>

<PaletteEntry tkCartesianPaletteEntry strokeWidth="1" strokeColor="#F478B7"></PaletteEntry>

<PaletteEntry tkCartesianPaletteEntry strokeWidth="1" strokeColor="#8278F3"></PaletteEntry>

<PaletteEntry tkCartesianPaletteEntry strokeWidth="1" strokeColor="#CA68FF"></PaletteEntry>

</Palette>

Note that now all your series have identical seriesName (e.g. 'tagName') and they are using the palette with that seriesName. The palette itself has multiple entries each with different colors which will be loaded for each of your series. The entries will load in order of appearance and repeat if the series number is greater then the entries number.

Regards,
Nikolay Iliev
Telerik by Progress

answered on 24 Nov 2016, 02:43 AM

Sorry to reply to you after a long time.

I have tried to do what you said above.But the result seems not so good.Please look at the image in the attached file.The color in the graph should be same in the eye icon ,but it isn't.The code is :

//annual-report.component.html

//annual-report.component.ts

import {
Component, ElementRef, ViewChild,
Injectable, OnInit, ChangeDetectorRef, AfterViewInit
} from '@angular/core';
import { ObservableArray } from 'data/observable-array';
import * as _ from 'lodash';
import { LoaderService } from '../../../service/core/loader';

import { Page } from 'ui/page';
import { BaseComponent } from '../../shared/base.component';
import { ChartApi } from '../../../api/accounting/api/ChartApi';

@Component({
selector: 'gpm-annual-report',
templateUrl: './component/report/annual-report/annual-report.component.html',
styleUrls: ['./component/report/annual-report/annual-report.component.css'],
providers: [ChartApi]
})

@Injectable()
export class AnnualReportComponent extends BaseComponent implements OnInit {
categoricalSource;
showIncome: boolean = true;
showExpense: boolean = true;
showBalance: boolean = true;
showTotalBalance: boolean = true;
showIncomeList: boolean;
showExpenseList: boolean;
showBalanceList: boolean;
showTotalBalanceList: boolean;

incomeIcon: string = 'fa-eye';
expenseIcon: string = 'fa-eye';
balanceIcon: string = 'fa-eye';
totalbalanceIcon: string = 'fa-eye';

year: number = this.getCurrentYear();
periodCategory: Array<any>;
dataSets;
yearSelectedIndex: number;

constructor(private chartApi: ChartApi, page: Page, loader: LoaderService) {
super(page, loader);
}

getCurrentYear() {
let date = new Date();
let year = date.getFullYear();

return year;
};
ngOnInit() {
this.showIncomeList = true;
this.getEffectiveDate();
this.search();
}

getEffectiveDate() {
this.chartApi.chartGetEffectiveDate()
.subscribe(
data => {
let effectiveDateStart: any = data[0];
let effectiveDateEnd: any = data[1];
let startYear: number = (new Date(effectiveDateStart)).getFullYear();
let endYear: number = (new Date(effectiveDateEnd)).getFullYear();
// let temp = [];
let temp = [startYear.toString() + '年'];
// this.periodCategory = [startYear.toString()];
for (let i = 0; i < endYear - startYear; i++) {
let year: string = (startYear + i + 1).toString() + '年';
temp.push(year);
}
this.periodCategory = temp;
this.yearSelectedIndex = temp.length - 1;

});

}

public onChange(index) {
this.year = parseInt(this.periodCategory[index], 10);
this.search();

}
search() {
console.log('search');
this.chartApi.chartYearSummarizing(this.year)
.subscribe(
data => {
this.dataSets = _.cloneDeep(data);
let temp = [];
console.log('111', JSON.stringify(data));
for (let i = 0; i < 12; i++) {
temp.push({
month: data.xValues[i],
income: data.series[0][i],
expense: data.series[1][i],
balance: data.series[2][i],
totalBalance: data.series[3][i]
});
}
this.categoricalSource = temp;
let testList = this.categoricalSource;
console.log('this._categoricalSource', JSON.stringify(temp));
},
req => {
if (req._body && req._body.errors) {
this.showError(req._body.errors);
} else {
this.showError(JSON.stringify(req));
}
}
);

}

hideCertain() {
let newDataSet = _.cloneDeep(this.dataSets);
let temp = [];
for (let i = 0; i < 12; i++) {
temp.push({
month: newDataSet.xValues[i],
income: this.showIncome ? newDataSet.series[0][i] : 0,
expense: this.showExpense ? newDataSet.series[1][i] : 0,
balance: this.showBalance ? newDataSet.series[2][i] : 0,
totalBalance: this.showTotalBalance ? newDataSet.series[3][i] : 0
});
}
console.log('newDataSet', JSON.stringify(temp));
this.categoricalSource = temp;
console.log('this._categoricalSource', this.categoricalSource);
}

public changeIncomeStatus() {
this.showIncome = !this.showIncome;
if (this.showIncome) {
this.incomeIcon = 'fa-eye';
// this.showIncomeList = true;
this.hideCertain();

} else {
this.incomeIcon = 'fa-eye-slash';
// this.showIncomeList = false;
console.log('this.showIncomeListfalse', this.showIncomeList);
// this.search();

this.hideCertain();
}
}
public changeExpenseStatus() {
this.showExpense = !this.showExpense;
if (this.showExpense) {
this.expenseIcon = 'fa-eye';
this.hideCertain();

} else {
this.expenseIcon = 'fa-eye-slash';
this.hideCertain();
}
}
public changeBalanceStatus() {
this.showBalance = !this.showBalance;
if (this.showBalance) {
this.balanceIcon = 'fa-eye';
this.hideCertain();

} else {
this.balanceIcon = 'fa-eye-slash';
this.hideCertain();
}
}
public changeTotalBalanceStatus() {
this.showTotalBalance = !this.showTotalBalance;
if (this.showTotalBalance) {
this.totalbalanceIcon = 'fa-eye';
this.hideCertain();

} else {
this.totalbalanceIcon = 'fa-eye-slash';
this.hideCertain();
}
}
}

//annual-report.component.scss

.label{
color: #123456;
padding-top: 5;
}
.img {
padding-top: 10;
height:20;
width: 20;
}
.labelName{
margin-top: 10px;
margin-bottom: 5px;
}
.item {
color:#2ECFC8;
background-color: #fff;
width: auto;
height: auto;
text-align: center;
vertical-align: middle;
border-width: 1;
border-radius: 5;
border-color: #F6F6F6;
margin: 10 5 10 5;
}
.item-selected{
color:#fff;
background-color: #2ECFC8;
width: auto;
height: auto;
text-align: center;
vertical-align: middle;
border-width: 1;
border-radius: 5;
border-color: #F6F6F6;
margin: 10 5 10 5;
}
.icon{
font-size: 25;

}
.icon-income{
color:#92E7C4;
}
.icon-expense{
color:#F478B7;
}
.icon-balance{
color:#8278F3;
}
.icon-totalbalance{
color:#CA68FF;
}
.vr-center{
width: auto;
height: auto;
vertical-align: middle;
}
//the data in the year of 2016 as follows

//categoricalSource

[{"month":"1","income":0,"expense":0,"balance":0,"totalBalance":0},{"month":"2","income":0,"expense":0,"balance":0,"totalBalance":0},{"month":"3","income":0,"expense":0,"balance":0,"totalBalance":0},{"month":"4","income":0,"expense":0,"balance":0,"totalBalance":0},{"month":"5","income":0,"expense":0,"balance":0,"totalBalance":0},{"month":"6","income":0,"expense":0,"balance":0,"totalBalance":0},{"month":"7","income":0,"expense":0,"balance":0,"totalBalance":0},{"month":"8","income":0,"expense":0,"balance":0,"totalBalance":0},{"month":"9","income":0,"expense":0,"balance":0,"totalBalance":0},{"month":"10","income":700,"expense":0,"balance":700,"totalBalance":700},{"month":"11","income":4123,"expense":6055,"balance":-1932,"totalBalance":-1232},{"month":"12","income":0,"expense":0,"balance":0,"totalBalance":-1232}]

answered on 24 Nov 2016, 09:11 AM

Hi,
Thank you for writing us back.
I reviewed your case, was unable to reproduce any problem with the LineSeries and displayed icons in the Label. Could you give us some more info about your problem. It would help if you could send us the CSS code, which you have used to style your Label components. that, could you also send us the image, which shows the
I look forward to hearing from you.
Regards,
nikolay.tsonev
Telerik by Progress

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

LineSeries display like area on android

7 Answers, 1 is accepted