Number Ranges

A number column usually makes a bar for each value it holds — an age chart with a bar for 23, another for 24 and so on. Grouped in ranges, it makes a bar for each span of the column instead: 20 – 24, 25 – 29, 30 – 34. Set GroupByRangeSize (groupByRangeSize in React) for the bars, or SeriesRangeSize (seriesRangeSize) to split each bar into a dataset for each range. It is the same grouping a grid's rows get from RangeSize, so a chart and a grid beside it group a column alike.

How It Works

Dataverse groups an aggregate by a value, never by a range of values, so the chart asks for a row for each value — or each pair of values, when a series splits them — and the server adds the rows up into their ranges before the chart draws them. A range starts at a multiple of its size: with a size of 5, 23 falls in 20 – 24.

  • No gaps. Every range from the lowest value's to the highest's gets a bar, and a range no record falls in is a bar of zero, so the axis reads as a continuous scale. A series gets a dataset only for the ranges its records fall in, lowest first.
  • Labels. A column of whole numbers in whole-number ranges is labelled from the range's first value to its last, 20 – 24. A column with decimals, or a size with them, reads from the start to under the end, 1.0 to under 1.5, with as many decimal places as the column keeps. Set GroupByFormat or SeriesFormat to show the ends in a format of your own, such as N1.
  • Figures. A count or a total is the sum of the range's values', a minimum or maximum the least or most of them, and an average the range's total divided by its count — not the average of each value's average.
  • Which columns. Any whole number, decimal, floating point or currency column, on the chart's table or a joined one. The size is ignored for any other column — a choice's options are numbers too, but not ones to add up into ranges — and for a column grouped by date.

Grouping the Bars in Ranges

Set GroupByRangeSize on an AggregateDataverseChartDataSource to the size of each range. The bars come back in the order of their ranges, lowest first, with the bar of the records that have no value leading them.

React Blazor

Contacts by Age

The contacts counted by age. Pick how many years each bar covers, or a bar for each age. Each pick builds a new data source, and the chart loads again because its source asks for something else.

React example Blazor example React TypeScript Razor
One age5 years10 years20 years

Splitting a Series into Ranges

Set SeriesRangeSize when the column in ranges is the series rather than the bars: the chart groups its bars by GroupByColumn and splits each one into a dataset for each range of SeriesColumn. Stacked, each bar shows how its total divides across the ranges. Both can be in ranges at once — age along the axis, salary ranges stacked in each bar.

React Blazor

Contacts by Gender and Age

The contacts counted by gender, each bar stacked by age range. Pick how many years each range covers; the legend lists the ranges, lowest first.

React example Blazor example React TypeScript Razor
10 years20 years30 years

Records With No Value

Records with no value in the column are a bar of their own, labelled (Blank) — or in a series, a (Blank) dataset. That holds for any grouping, not only ranges. Set GroupByIncludeBlank or SeriesIncludeBlank to false to leave them out of the chart.

React Blazor

Charts Bound to a Grid

A chart that shares a ViewDataSource with a grid groups in ranges the same way: set RangeSize on its aggregation's GroupBy (or Series). Clicking a bar then highlights every row of the grid whose value falls in that bar's range, and clicking the (Blank) bar highlights the rows with no value.

React Blazor

How Many Values a Chart Reads

A chart in ranges reads up to 10,000 rows of values — distinct values, or pairs of values when a series splits them. One with more shows an error saying so rather than an incomplete chart. Set RangeGroupingOptions.MaximumRangedValues in the host's startup to change that limit for every grid and chart in the portal. A chart can ask for a lower limit of its own with MaximumRangedValues (maximumRangedValues); one that asks for more than the portal's is held to the portal's.

React Blazor

Dataverse returns at most 5,000 rows to a query, so past 4,999 the values are read 5,000 at a time. Raising the limit has these costs for every grid or chart whose column has that many values:

  • Requests. Each page is a request against the portal's Dataverse API allowance, and Dataverse works out the whole aggregate again for each one: 20,000 values is four requests, each over every record the chart matches.
  • Time. The pages are read one after another, so the chart takes about a page's time longer to appear for each page.
  • Memory. The rows are held in the server's memory while they are added up — a few hundred bytes each, so tens of megabytes at a few hundred thousand.
  • Dataverse's record limit. Dataverse still refuses an aggregate that reads more than 50,000 records, whatever the limit. A chart can split such a query with SplitOverRecordLimit, which multiplies the requests again.

A column with that many values is often better grouped in larger ranges, which reads the same rows but draws fewer bars, or filtered first, which reads fewer rows.

See Also