Use only the 5 higher values in amCharts pie?

PauloB

My data call can have lots of small elements (in percentage) that I would like to ignore, I only need the top 5 in my amCharts pie.

Can this be accomplished with amCharts or I should treat the data before?

please see my [jsfiddle][1]

[1]: http://jsfiddle.net/pbarros/xznxbnc7/3/

thanks

xorspark

You can use the hideLabelsPercent property to set a threshold for the lowest allowed percentage you want a label for. If you want to do this dynamically, you can set this in the init event by finding the 5th largest percents value in the chart's chartData array and use it as your hideLabelsPercent threshold. I've updated your handleInit method to do this:

function handleInit(e) {
  if (e.chart.chartData.length > 5) {
    //sort the copy of the chartData array from largest to smallest
    //if your data is pre-sorted, then you can skip this step
    var sortedData = e.chart.chartData.slice().sort(function(lhs, rhs) {
      return rhs.percents - lhs.percents;
    });

    //set the threshold equal to the 5th largest slice's percents value so that the rest are hidden
    e.chart.hideLabelsPercent = sortedData[4].percents;

    //redraw the chart
    e.chart.validateNow();
  }
}

Updated fiddle: http://jsfiddle.net/xznxbnc7/9/

Edit since I misread the question

If you only want to show the top five slices from your dataset, you can filter on your backend or use the init method to sort and modify your dataProvider to contain only the top five.

function handleInit(e) {
  if (e.chart.chartData.length > 5) {
    //sort the copy of the chartData array from largest to smallest
    //if your data is pre-sorted, then you can skip this step
    var sortedData = e.chart.dataProvider.slice().sort(function(lhs, rhs) {
      return rhs[e.chart.valueField] - lhs[e.chart.valueField];
    });

    //only put in the top 5.
    e.chart.dataProvider = sortedData.slice(0, 5);

    // redraw the chart
    e.chart.validateData();
  }
}

Fiddle: http://jsfiddle.net/g3cchyjg/1

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Amcharts Pie Chart show country only on hover

How to use a slider to animate an amcharts pie chart?

Creating pie of pie chart amCharts

Function returns incorrect False (only at higher values)

top 5 values with join (higher number of clicks)

Left align pie chart (amCharts)

Increase Size of Pie Chart in Amcharts

How to change amcharts pie themes?

amCharts 4: display legend tooltip on truncated (with ellipsis) values only

Make Amcharts slice take the whole pie chart

How to display months in an animated amcharts pie chart?

Font Awesome or icons on Amcharts 4 pie

How to configure maven to use -source 5 or higher to enable annotations?

maven: (use -source 5 or higher to enable static import declarations)

AmCharts default axis values

SQL sub-query: select all values but for one type of values only higher than

PIE Only: SharedPreferences IllegalStateException

Plot pie chart with values

calculate mean only when the number of values in each rows is higher then certain number in python pandas

Is it possible to find COUNT function and then to show only certain values that are higher than 10

how to display label and values only on google pie chart legend with data from mysql db

AmCharts - Compare dataSets with missing values

Accessor is only available when targeting ECMAScript 5 and higher - error message when using TypeScript

error TS2494: Using a string in a 'for...of' statement is only supported in ECMAScript 5 and higher

How to get the value of clicked slice in Amcharts 4 pie chart

amCharts pie - how to trigger function when mouse over a slice?

How to show hand cursor on pie charts slices using amcharts

How to make custom legends on multiple pie charts amcharts 4?

amCharts 4 (v4) Set specific colors in pie chart

TOP Ranking

  1. 1

    Failed to listen on localhost:8000 (reason: Cannot assign requested address)

  2. 2

    How to import an asset in swift using Bundle.main.path() in a react-native native module

  3. 3

    Loopback Error: connect ECONNREFUSED 127.0.0.1:3306 (MAMP)

  4. 4

    pump.io port in URL

  5. 5

    Spring Boot JPA PostgreSQL Web App - Internal Authentication Error

  6. 6

    BigQuery - concatenate ignoring NULL

  7. 7

    ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3

  8. 8

    Do Idle Snowflake Connections Use Cloud Services Credits?

  9. 9

    maven-jaxb2-plugin cannot generate classes due to two declarations cause a collision in ObjectFactory class

  10. 10

    Compiler error CS0246 (type or namespace not found) on using Ninject in ASP.NET vNext

  11. 11

    Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

  12. 12

    Generate random UUIDv4 with Elm

  13. 13

    Jquery different data trapped from direct mousedown event and simulation via $(this).trigger('mousedown');

  14. 14

    Is it possible to Redo commits removed by GitHub Desktop's Undo on a Mac?

  15. 15

    flutter: dropdown item programmatically unselect problem

  16. 16

    Change dd-mm-yyyy date format of dataframe date column to yyyy-mm-dd

  17. 17

    EXCEL: Find sum of values in one column with criteria from other column

  18. 18

    Pandas - check if dataframe has negative value in any column

  19. 19

    How to use merge windows unallocated space into Ubuntu using GParted?

  20. 20

    Make a B+ Tree concurrent thread safe

  21. 21

    ggplotly no applicable method for 'plotly_build' applied to an object of class "NULL" if statements

HotTag

Archive