LineSeries colors incorrect for angular2

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

    Posted 23 Nov 2016 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.hideCertain();

            } else {
                this.incomeIcon = 'fa-eye-slash';
                // this.showIncomeList = false;
                console.log('this.showIncomeListfalse', this.showIncomeList);
                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();
            }
        }
    }

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

  2. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    242 posts

    Posted 24 Nov 2016 Link to this post

    Hi,
    Thank you for your interest in UI for NativeScript.
    I tried to recreate your problem, but unfortunately there are some missing resources, which prevents me from debugging further your problem.
    Nevertheless I remove some part of your code and verify if the colors of the LineSeries has been applied correctly and everything seems to work as expected. Regarding to that I would help if you could send to us missing resources: the iconFont, you are using in your project and missing CSS code, where has been used to style your Labels.
    It would also help if you could also send us the image, which you has suggested in your comment.

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

    Posted 24 Nov 2016 in reply to nikolay.tsonev Link to this post

    Hello,

    I tried to push a project to github.The address is :https://github.com/ITonly/sample-chart.git. You can just look at component/report/annual-report.The result is in the attached files.

  4. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    242 posts

    Posted 25 Nov 2016 Link to this post

    Hi,
    Thank you for sending us the missing code.

    After I include the missing code in my sample project, was able to reproduce your problem. The issue has been caused due to the fact that you have defined only one Palette for all of your LineSeries. This will cause to adding the correct color only for the first Series. To be able to fix the problem, you should define for every LineSeries new Palette, then the colors will be applied correctly. Important part is to add unique seriesName for every Series. I am attaching sample code related with your code, where this problem has been fixed.


    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="{{ incomeIcon | 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="{{ incomeIcon | 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="{{ incomeIcon | 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="tagName2" [items]="categoricalSource" categoryProperty="month" valueProperty="expense"></LineSeries>
                    <Trackball tkCartesianTrackball snapMode="AllClosestPoints" showIntersectionPoints="true"></Trackball>
                    <LineSeries tkCartesianSeries seriesName="tagName3" [items]="categoricalSource" categoryProperty="month" valueProperty="balance"></LineSeries>
                    <Trackball tkCartesianTrackball snapMode="AllClosestPoints" showIntersectionPoints="true"></Trackball>
                    <LineSeries tkCartesianSeries seriesName="tagName4" [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>
                    </Palette>
                    <Palette tkCartesianPalette seriesName="tagName2">
                        <PaletteEntry tkCartesianPaletteEntry strokeWidth="1" strokeColor="#F478B7"></PaletteEntry>
                    </Palette>
                    <Palette tkCartesianPalette seriesName="tagName3">
                        <PaletteEntry tkCartesianPaletteEntry strokeWidth="1" strokeColor="#8278F3"></PaletteEntry>
                    </Palette>
                    <Palette tkCartesianPalette seriesName="tagName4">
                        <PaletteEntry tkCartesianPaletteEntry strokeWidth="1" strokeColor="#CA68FF"></PaletteEntry>
                    </Palette>
                </RadCartesianChart>
            </GridLayout>
        </GridLayout>
    </StackLayout>

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