LineSeries display like area on android

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

    Posted 25 Oct Link to this post

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

     

    <GridLayout class="m-t-10" row="1" col="0" colSpan="4">
    <!-- >> chart-angular-spline-series -->
    <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>
    <!--<PointLabelStyle tkLineLabelStyle  margin="10"  fillcolor="blue" ></PointLabelStyle>-->


    </RadCartesianChart>
    </GridLayout>

  2. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    92 posts

    Posted 25 Oct Link to this post

    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
  3. License
    License avatar
    26 posts
    Member since:
    Oct 2016

    Posted 26 Oct in reply to Nikolay Iliev Link to this post

    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.

  4. License
    License avatar
    26 posts
    Member since:
    Oct 2016

    Posted 26 Oct in reply to Nikolay Iliev Link to this post

    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">
    <!-- >> chart-angular-spline-series -->
    <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>
    <!--<PointLabelStyle tkLineLabelStyle  margin="10"  fillcolor="blue" ></PointLabelStyle>-->
    </RadCartesianChart>
    </GridLayout>
    </GridLayout>

     

  5. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    92 posts

    Posted 26 Oct Link to this post

    Hello to All from Concordya,

    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
    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
  6. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    92 posts

    Posted 26 Oct Link to this post

    Hi,

    We have managed to provide a solution that is working as expected for Angular 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
    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
  7. License
    License avatar
    26 posts
    Member since:
    Oct 2016

    Posted 23 Nov Link to this post

    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

    <StackLayout orientation="vertical">
    <StackLayout>
    <StackLayout class="hr-light m-b-5 m-t-15"></StackLayout>
    <GridLayout columns="*, *, *" rows="auto">
    <DropDown row='0' col='1' #year class=" h3 vr-center text-center btn-small btn-secondary" [items]="periodCategory" [selectedIndex]="yearSelectedIndex"
    (selectedIndexChange)="onChange(year.selectedIndex)">
    </DropDown>
    </GridLayout>
    <StackLayout class="hr-light m-t-5 m-b-15"></StackLayout>
    </StackLayout>
    <GridLayout height="70%" columns="*,*,*,*" rows="auto,*">
    <StackLayout class="stackLayout" orientation="vertical" row="0" col="0">
    <Label class="fa icon 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 icon 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 icon 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 icon 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   labelSize="14" lineThickness="3" lineColor="Grey"></CategoricalAxis>
    <LinearAxis  tkCartesianVerticalAxis  ></LinearAxis>
    <LineSeries tkCartesianSeries seriesName="tagName" [items]="categoricalSource" categoryProperty="month"
    valueProperty="income"></LineSeries>
    <Trackball  tkCartesianTrackball snapMode="AllClosestPoints" showIntersectionPoints="true"></Trackball>

    <LineSeries tkCartesianSeries seriesName="stagName" [items]="categoricalSource" categoryProperty="month" valueProperty="expense"></LineSeries>
    <Trackball tkCartesianTrackball snapMode="AllClosestPoints" showIntersectionPoints="true"></Trackball>

    <LineSeries tkCartesianSeries seriesName="tagName" [items]="categoricalSource" categoryProperty="month" valueProperty="balance"></LineSeries>
    <Trackball tkCartesianTrackball snapMode="AllClosestPoints" showIntersectionPoints="true"></Trackball>

    <LineSeries tkCartesianSeries seriesName="tagName" [items]="categoricalSource" categoryProperty="month" valueProperty="totalBalance"></LineSeries>
    <Trackball tkCartesianTrackball snapMode="AllClosestPoints" showIntersectionPoints="true"></Trackball>

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

    </GridLayout>
    </GridLayout>
    </StackLayout>

     

    //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}]

  8. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    66 posts

    Posted 24 Nov Link to this post

    Hi,
    Thank you for writing us back.
    I reviewed your case, however 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. Regarding to that, could you also send us the image, which shows the problem.

    I look forward to hearing from you.
    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