RadPieChart DonutSeries slice colors

10 posts, 1 answers
  1. Andrés
    Andrés avatar
    7 posts
    Member since:
    Jan 2017

    Posted 12 Jan Link to this post

    I've been trying out the donut series of the pie chart and I wish to change the colors of the slices, according to the documentation this should work:

     

    <RadPieChart height="300" allowAnimation="true" row="1">
       <DonutSeries seriesName="pie" tkPieSeries selectionMode="None" outerRadiusFactor="0.9" expandRadius="0.25" innerRadiusFactor="0.85"
        [items]="pieSource" valueProperty="data" legendLabel="name"></DonutSeries>
        <RadLegendView tkPieLegend position="Bottom" offsetOrigin="BottomLeft" width="110">
        </RadLegendView>
          <Palette tkPiePalette seriesName="pie">
              <PaletteEntry tkPiePaletteEntry fillColor="#ffff00" strokeColor="#000000">
              </PaletteEntry>
               <PaletteEntry tkPiePaletteEntry fillColor="#cc3399" strokeColor="#000000">
               </PaletteEntry>
                <PaletteEntry tkPiePaletteEntry fillColor="#ff6600" strokeColor="#000000">
                </PaletteEntry>
          </Palette>
    </RadPieChart>

     

    The colors of the slices are the same no matter what I do, what could be wrong here? thanks in advance

     

  2. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    191 posts

    Posted 12 Jan Link to this post

    Hi,

    I reviewed your case, however was unable to reproduce this issue, while using the attached code.
    While testing on my side it seems that color of the slices has been changed as expected for both iOS and Android. For your convenience I am attaching sample code, where has been used DotumSeries and ScreenShots form the simulator.

    HTML
    <GridLayout orientation="vertical" rows="*" tkExampleTitle tkToggleNavButton>
     
        <RadPieChart height="300" allowAnimation="true" row="1">
            <DonutSeries seriesName="pie" tkPieSeries selectionMode="None" outerRadiusFactor="0.9" expandRadius="0.25" innerRadiusFactor="0.85"
                [items]="pieSource" valueProperty="Amount" legendLabel="Brand"></DonutSeries>
                <RadLegendView tkPieLegend position="Bottom" offsetOrigin="BottomLeft" width="110">
                </RadLegendView>
                <Palette tkPiePalette seriesName="pie">
                    <PaletteEntry tkPiePaletteEntry fillColor="#ffff00" strokeColor="#000000">
                    </PaletteEntry>
                    <PaletteEntry tkPiePaletteEntry fillColor="#cc3399" strokeColor="#000000">
                    </PaletteEntry>
                        <PaletteEntry tkPiePaletteEntry fillColor="#ff6600" strokeColor="#000000">
                        </PaletteEntry>
                </Palette>
            </RadPieChart>
    </GridLayout>


    TypeScript
    import { Component, OnInit } from '@angular/core';
    import { DataService } from '../data-services/data.service';
    import { Car } from '../data-services/car';
    import { ObservableArray } from "data/observable-array";
     
    @Component({
        moduleId: module.id,
        selector: 'tk-chart-styling-pie-series',
        providers: [DataService],
        templateUrl: 'chart-styling-pie-series.component.html'
    })
    export class ChartStylingPieSeriesComponent implements OnInit {
        public  pieSource: ObservableArray<Car>;
     
        constructor() {
            this.pieSource=new ObservableArray([
                { Brand: "Audi", Amount: 10 },
                { Brand: "Mercedes", Amount: 76 },
                { Brand: "Fiat", Amount: 60 }
                ])
        }
     
     
     
        ngOnInit() {
        }
    }


    To be able to investigate further this problem, it will help if you could send us sample project and to give us more info your environment (CLI, node, modules versions). 
    Regards,
    nikolay.tsonev
    Telerik by Progress
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  3. Andrés
    Andrés avatar
    7 posts
    Member since:
    Jan 2017

    Posted 12 Jan in reply to nikolay.tsonev Link to this post

    Thanks for your reply, I tried the code you provided in a blank project but also didn't work for me, I am using the Telerik Platform appBuilder desktop client for Mac and the project uses Nativescript version 2.3.0. this is the code I used

    <GridLayout orientation="vertical" rows="*" tkExampleTitle tkToggleNavButton>
      
        <RadPieChart height="300" allowAnimation="true" row="1">
            <DonutSeries seriesName="pie" tkPieSeries selectionMode="None" outerRadiusFactor="0.9" expandRadius="0.25" innerRadiusFactor="0.85"
                [items]="pieSource" valueProperty="Amount" legendLabel="Brand"></DonutSeries>
                <RadLegendView tkPieLegend position="Bottom" offsetOrigin="BottomLeft" width="110">
                </RadLegendView>
                <Palette tkPiePalette seriesName="pie">
                    <PaletteEntry tkPiePaletteEntry fillColor="#ffff00" strokeColor="#000000">
                    </PaletteEntry>
                    <PaletteEntry tkPiePaletteEntry fillColor="#cc3399" strokeColor="#000000">
                    </PaletteEntry>
                        <PaletteEntry tkPiePaletteEntry fillColor="#ff6600" strokeColor="#000000">
                        </PaletteEntry>
                </Palette>
            </RadPieChart>
    </GridLayout>

     

     

    import { Component, OnInit } from '@angular/core';
    import { DataService } from '../../shared/data-service/data.service';
    import { Car } from '../../shared/data-service/car';
    import { ObservableArray } from "data/observable-array";
     
     
     
    @Component({
        moduleId: module.id,
        selector: 'tk-chart-series-pie',
        providers: [DataService],
        templateUrl: 'home.component.html'
    })
    export class ChartSeriesPieComponent implements OnInit {
        public pieSource: ObservableArray<Car>;
     
        constructor(private _dataService: DataService) { }
     
        ngOnInit() {
            this.pieSource = new ObservableArray([
                { Brand: "Audi", Amount: 10},
                { Brand: "Mercedes", Amount: 76},
                { Brand: "Fiat", Amount: 76}
            ]);
        }
     
    }

     

    export class Car {
        constructor(public Brand?: string, public Amount?: number) {
        }
    }

     

    thanks for your help

     

  4. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    191 posts

    Posted 13 Jan Link to this post

    Hello,

    Thank you for the sample code.

    I reviewed your case again, however I am still unable to reproduce this behavior on my side. 

    To be able to investigate further your issue, it would help if you could give us your project package.json file.

    In the meantime, you could also verify  in the package.json, whether you are using latest version of UI for NativeScirpt 1.5.1. I am also attaching the package.json  from my test project.

    package.json
    {
      "dependencies": {
        "@angular/core": "2.0.0",
        "@angular/common": "2.0.0",
        "@angular/compiler": "2.0.0",
        "@angular/http": "2.0.0",
        "@angular/platform-browser": "2.0.0",
        "@angular/platform-browser-dynamic": "2.0.0",
        "@angular/platform-server": "2.0.0",
        "@angular/forms": "2.0.0",
        "@angular/router": "3.0.0",
        "rxjs": "5.0.0-beta.12",
        "zone.js": "0.6.23",
        "reflect-metadata": "^0.1.8",
        "nativescript-angular": "1.0.0",
        "tns-core-modules": "2.3.0",
        "nativescript-telerik-ui-pro":"1.5.1"
      },
      "devDependencies": {
        "babel-traverse": "6.8.0",
        "babel-types": "6.8.1",
        "babylon": "6.8.0",
        "codelyzer": "0.0.28",
        "lazy": "1.0.11",
        "nativescript-dev-typescript": "^0.3.2",
        "tslint": "^3.14.0",
        "typescript": "^1.8.10"
      }
    }

    l look forward to working with you

    Regards,
    nikolay.tsonev
    Telerik by Progress
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  5. Andrés
    Andrés avatar
    7 posts
    Member since:
    Jan 2017

    Posted 13 Jan in reply to nikolay.tsonev Link to this post

    Hi I checked the version and it seems to be the version 1.5.1 I followed the getting started instructions of the documentation and downloaded the nativescript-ui-pro.tgz file and modified the package.json like this: 

     

    {
      "dependencies": {
        "@angular/core": "2.0.0",
        "@angular/common": "2.0.0",
        "@angular/compiler": "2.0.0",
        "@angular/http": "2.0.0",
        "@angular/platform-browser": "2.0.0",
        "@angular/platform-browser-dynamic": "2.0.0",
        "@angular/platform-server": "2.0.0",
        "@angular/forms": "2.0.0",
        "@angular/router": "3.0.0",
        "rxjs": "5.0.0-beta.12",
        "zone.js": "0.6.23",
        "reflect-metadata": "^0.1.8",
        "nativescript-angular": "1.0.0",
        "tns-core-modules": "2.3.0",
        "nativescript-telerik-ui-pro": "file:nativescript-telerik-ui-pro.tgz"

        //also tried like this: "nativescript-telerik-ui-pro": "1.5.1"

      },
      "devDependencies": {
        "babel-traverse": "6.8.0",
        "babel-types": "6.8.1",
        "babylon": "6.8.0",
        "codelyzer": "0.0.28",
        "lazy": "1.0.11",
        "nativescript-dev-typescript": "^0.3.2",
        "tslint": "^3.14.0",
        "typescript": "^1.8.10"
      }
    }

     

     

     

  6. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    191 posts

    Posted 16 Jan Link to this post

    Hello,

    We investigated further your case and found that this issue could be related due to using NativeScirpt 2.3 with latest UI for NativeScirpt.
    Regarding to that, you could change the NativeScript version to 2.4 by opening the Properties of your project. This button should on the right side of the screen just below the name of your project. 

    In the open window, you should find NativeScirpt version drop-down menu and to select 2.4.0-Experomental . 

    The final step is to change the dependencies of your project package.json file by following the attached example below:

    package.json
    {
      "dependencies": {
        "@angular/common": "2.3.1",
        "@angular/compiler": "2.3.1",
        "@angular/core": "2.3.1",
        "@angular/forms": "2.3.1",
        "@angular/http": "2.3.1",
        "@angular/platform-browser": "2.3.1",
        "@angular/platform-browser-dynamic": "2.3.1",
        "@angular/router": "3.3.1",
        "nativescript-angular": "1.3.0",
        "nativescript-telerik-ui-pro": "^1.5.1",
        "nativescript-theme-core": "^0.2.1",
        "reflect-metadata": "~0.1.8",
        "codelyzer": "0.0.28",
        "rxjs": "5.0.0-rc.4",
        "tns-core-modules": "2.4.2"
      },
      "devDependencies": {
        "babel-traverse": "6.21.0",
        "babel-types": "6.21.0",
        "babylon": "6.15.0",
        "lazy": "1.0.11",
        "nativescript-dev-android-snapshot": "^0.*.*",
        "nativescript-dev-typescript": "^0.3.2",
        "typescript": "~2.0.10",
        "zone.js": "~0.7.2"
      }
    }

    Then try to rebuild the project while using AppBuilder.

    I am also attaching the code, which I use for testing

    app.component.html

    <GridLayout orientation="vertical" rows="*">
       
        <RadPieChart height="400" allowAnimation="true" row="0">
            <DonutSeries seriesName="pie" tkPieSeries selectionMode="None" outerRadiusFactor="0.9" expandRadius="0.25" innerRadiusFactor="0.85"
                [items]="pieSource" valueProperty="Amount" legendLabel="Brand"></DonutSeries>
                <RadLegendView tkPieLegend position="Bottom" offsetOrigin="BottomLeft" width="110">
                </RadLegendView>
                <Palette tkPiePalette seriesName="pie">
                    <PaletteEntry tkPiePaletteEntry fillColor="#ffff00" strokeColor="#000000">
                    </PaletteEntry>
                    <PaletteEntry tkPiePaletteEntry fillColor="#cc3399" strokeColor="#000000">
                    </PaletteEntry>
                        <PaletteEntry tkPiePaletteEntry fillColor="#ff6600" strokeColor="#000000">
                        </PaletteEntry>
                </Palette>
            </RadPieChart>
    </GridLayout>


    app.component.ts

    import { Component } from "@angular/core";
    import {ObservableArray} from "data/observable-array"
     
    @Component({
      selector: "ns-main",
      templateUrl: "app.component.html"
    })
    export class AppComponent {
          public pieSource: ObservableArray<any>;
      
        constructor() { }
      
        ngOnInit() {
            this.pieSource = new ObservableArray([
                { Brand: "Audi", Amount: 10},
                { Brand: "Mercedes", Amount: 76},
                { Brand: "Fiat", Amount: 76}
            ]);
        }
    }


    Hope that this will resolve your issue.
    Regards,
    nikolay.tsonev
    Telerik by Progress
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  7. Andrés
    Andrés avatar
    7 posts
    Member since:
    Jan 2017

    Posted 16 Jan in reply to nikolay.tsonev Link to this post

    Hi, sadly this didn't work either in my project with the appBuilder client, but I tried creating a new project through nativescript CLI and your code worked perfectly. maybe there is some issue with the appBuilder client?
  8. Answer
    nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    191 posts

    Posted 18 Jan Link to this post

    Hello,

    Indeed this could be related with some issues with AppBuider IDE
    Regarding to that, you could try to reinstall the client by following the instructions bellow.

    1. In your browser, navigate to https://platform.telerik.com and log in the Telerik Platform.
    2. In the title bar, select Getting Started → Downloads.
    3. Click Code.
    4. Click Download for Desktop Client
    5. Run the downloaded installable and complete the installation.

    If this does not help you could also verify, whether you will have the same problem, while using appBuilder CLI. You could do that by running npm install appbuilder -g command. For more details, you could review the instructions here.

    To create new NativeScript app you could follow the below given instructions:
    1.create new NativeScript Angular 2 app by using  appbuilder create native <project_name> --template TypeScript.NG2.Empty command
    2. open the project with some editor and delete node_modules folder.
    3. in package.json drawer.component.ts and drawer.module.ts files replace nativescript-telerik-ui with nativescript-telerik-ui-pro
    4.delete drawer.component.js and drawer.module.js JavaScript files.
    5. replace the code in app.component.ts , app.component.html and app.modules.ts files as following the below-attached ones.

    app.component.html

    <GridLayout orientation="vertical" rows="*">
        
        <RadPieChart height="400" allowAnimation="true" row="0">
            <DonutSeries seriesName="pie" tkPieSeries selectionMode="None" outerRadiusFactor="0.9" expandRadius="0.25" innerRadiusFactor="0.85"
                [items]="pieSource" valueProperty="Amount" legendLabel="Brand"></DonutSeries>
                <RadLegendView tkPieLegend position="Bottom" offsetOrigin="BottomLeft" width="110">
                </RadLegendView>
                <Palette tkPiePalette seriesName="pie">
                    <PaletteEntry tkPiePaletteEntry fillColor="#ffff00" strokeColor="#000000">
                    </PaletteEntry>
                    <PaletteEntry tkPiePaletteEntry fillColor="#cc3399" strokeColor="#000000">
                    </PaletteEntry>
                        <PaletteEntry tkPiePaletteEntry fillColor="#ff6600" strokeColor="#000000">
                        </PaletteEntry>
                </Palette>
            </RadPieChart>
    </GridLayout>


    app.component.ts

    import {
        Component
    }
    from "@angular/core";
     
    import {ObservableArray} from "data/observable-array"
     
    @
    Component({
        moduleId: module.id,
        selector: "ns-main",
        templateUrl: "app.component.html"
    })
    export class AppComponent {
        public pieSource: ObservableArray<any>;
       
        constructor() { }
       
        ngOnInit() {
            this.pieSource = new ObservableArray([
                { Brand: "Audi", Amount: 10},
                { Brand: "Mercedes", Amount: 76},
                { Brand: "Fiat", Amount: 76}
            ]);
        }
    }


    app.modules.ts

    import {
        NgModule
    }
    from "@angular/core";
     
    import {
        NativeScriptModule
    }
    from "nativescript-angular/platform";
    import {
        NativeScriptRouterModule
    }
    from "nativescript-angular/router";
     
    import {
        appRoutes
    }
    from "./app.routes";
    import {
        AppComponent
    }
    from "./app.component";
     
    import {
        DrawerMenuModule as NavigationModule
    }
    from "./navigation/drawer/drawer.module";
     
    import { CHART_DIRECTIVES } from 'nativescript-telerik-ui-pro/chart/angular';
     
    @
    NgModule({
        imports: [
            NativeScriptModule,
            NativeScriptRouterModule,
            NativeScriptRouterModule.forRoot(appRoutes),
            NavigationModule
        ],
        declarations: [
            AppComponent,
            CHART_DIRECTIVES
        ],
        bootstrap: [
            AppComponent
        ]
    })
    export class AppModule {}

    6. run tsc in the console
    7. at the end run appbuilder livesync <platform_name> , which should deploy the app on the running simulator.

    I have also tested on my side with appBuilder CLI and it seems to work as expected. It would help if you could provide info about the exact template, you are using and the steps you are using while creating the app.

    Hope the above-given suggestions will resolve this case.

    nikolay.tsonev
    Telerik by Progress
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  9. Andrés
    Andrés avatar
    7 posts
    Member since:
    Jan 2017

    Posted 25 Jan in reply to nikolay.tsonev Link to this post

    Hi, I'm sorry for my late response. I haven't been able to try this out yet but I will as soon as I can, I'll let you know how it worked out. Thanks for all your help
  10. Andrés
    Andrés avatar
    7 posts
    Member since:
    Jan 2017

    Posted 12 May Link to this post

    Hello, just wanted to give an updated on this topic I managed to find the problem. I was using the app companion to build and test my project, but when using a real device to try the app it worked perfectly.
    Thanks for all your help

     

    Regards.

Back to Top