Pie Chart iOS doesnt show values, Android shows decimals

7 posts, 0 answers
  1. Jonathan
    Jonathan avatar
    12 posts
    Member since:
    Oct 2016

    Posted 17 Jan Link to this post

    I am checking out the PieCharts and was following the example in the docs for the Donut chart. I am using this markup:

    ```

        <RadPieChart height="150" allowAnimation="true" row="1">

          <DonutSeries tkPieSeries selectionMode="DataPoint" [items]="convertCycleDataForPieChart(cycle,type)" valueProperty="value" legendLabel="label"
            outerRadiusFactor="0.9" innerRadiusFactor="0.7" expandRadius="0.1">
          </DonutSeries>
          <RadLegendView tkPieLegend position="Left" offsetOrigin="TopRight" width="150" textFormat="%.0f"></RadLegendView>
        </RadPieChart>

    ```

     

    The problem is that on iOS I don't get values in the legend and on Android I do but they have decimals. I tried to add the textFormat directive according what I found in the docs but it does not seem to work.

     

    Any advice?

    Thanks!

  2. Jonathan
    Jonathan avatar
    12 posts
    Member since:
    Oct 2016

    Posted 17 Jan in reply to Jonathan Link to this post

    What is forgot to mention is that the valueProperty contains only integers so no decimals.

    Also I tried to do what was explained here, but it doesn't work (and I don't see labelFormat as a directive on the RadLegendView: http://stackoverflow.com/questions/41250226/ui-for-nativescript-radcharts-use-labels-with-decimals-by-defaul

  3. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    140 posts

    Posted 17 Jan Link to this post

    Hello Jonathan,

    Behind RadPieChart lies different native controls respectively for iOS and Android and this is the reason for the UX to look and feel different for those two platforms. Both of your cases are expected and even in the documentation article here or in the code sample here will still result in the same outputs as in your case (floating points in Android and no values for the legend in iOS).

    Currently, we can not provide a solution for the decimal numbers in Android As a possible workaround for the iOS issue; you can flat your legendLabel data. This way you can pass the valueProperty among with labelLegend from one flatten source (passed as a string).

    e.g.
    Let's assume that you have data source like this one here.
    Now you can interact with the source array and add a value called AmountAndBrand which has string value result of the Amount + Value concatenation.
    The source shown should ca produce something like this
    getPieSource(): Car[] {
        return [
            { Brand: "Audi", Amount: 10, AmountAndBrand: "10 Audi" },
            { Brand: "Mercedes", Amount: 76, AmountAndBrand: "76 Mercedes" },
            { Brand: "Fiat", Amount: 60, AmountAndBrand: "60 Fiat" },
            { Brand: "BMW", Amount: 24, AmountAndBrand: "24 BMW" },
            { Brand: "Crysler", Amount: 40, AmountAndBrand: "40 Crysler" }
        ];
    }
    Now that we have a property with flat data you can pass it to your legendLabel

    <DonutSeries tkPieSeries selectionMode="DataPoint" [items]="pieSource" valueProperty="value" legendLabel="AmountAndBrand">

    And the result for iOS will be as follows:


    However, note that Android will still automatically insert the value so you might want to use platform specific code to create an Android version of your doughnut and an iOS one. Here you can find example on how to set up and use custom directive (and the example correctly shows how to build one that differs Android app from iOS one)



    Regards,
    Nikolay Iliev
    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.
  4. Jonathan
    Jonathan avatar
    12 posts
    Member since:
    Oct 2016

    Posted 17 Jan in reply to Nikolay Iliev Link to this post

    Thanks Nikolay!
  5. Jonathan
    Jonathan avatar
    12 posts
    Member since:
    Oct 2016

    Posted 18 Jan in reply to Jonathan Link to this post

    Hi Nikolay,

    Considering that we will buy the Pro version, would it be possible to request that Android will support removal of the decimals? How likely that it will be handled soon? The workaround you provided for iOS is something that we can live with.

    Thanks!

  6. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    140 posts

    Posted 19 Jan Link to this post

    Hello Jonathan,

    Indeed it would be nice for the users to control whether they want their values shown as integers or decimals with floating points.However, However, all features in nativescript-telerik-ui-pro are implemented by their priority and overall importance, so what we can do is to log the issue in the feedback portal. There you can discuss it with the developers and track its potential development and also discuss possible workarounds.

    For your convenience, I have already logged this issue here. You can join the thread and upvote it and also share your considerations on why this should be implemented to underline its importance for your project.

    Regards,
    Nikolay Iliev
    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. Jonathan
    Jonathan avatar
    12 posts
    Member since:
    Oct 2016

    Posted 19 Jan in reply to Nikolay Iliev Link to this post

    Thanks again Nikolay!
Back to Top