Una columna numérica suele crear una barra para cada valor que contiene — una tabla de edades con una barra para 23, otra para 24, y así sucesivamente. Agrupada en rangos, forma una barra para cada tramo de la columna en su lugar: 20 – 24, 25 – 29, 30 – 34. Establece GroupByRangeSize (groupByRangeSize en React) para las barras, o SeriesRangeSize (seriesRangeSize) para dividir cada barra en un conjunto de datos para cada rango. Es el mismo agrupamiento que obtienen las filas de una cuadrícula de RangeSize, por lo que un gráfico y una cuadrícula junto agrupan una columna por igual.
Dataverse agrupa un agregado por un valor, nunca por un rango de valores, así que el gráfico pide una fila para cada valor — o cada par de valores, cuando una serie los divide — y el servidor suma las filas en sus rangos antes de que el gráfico las dibuje. Un rango comienza en un múltiplo de su tamaño: con un tamaño de 5, 23 cae en 20 – 24.
20 – 24. Una columna con decimales, o un tamaño con ellos, se lee desde el principio hasta debajo del final, 1.0 to under 1.5, con tantos decimales como la columna conserve. Establece GroupByFormat o SeriesFormat para mostrar los extremos en un formato propio, como N1.Ajusta GroupByRangeSize en y AggregateDataverseChartDataSource al tamaño de cada rango. Las barras vuelven en orden de sus rangos, primero la más baja, con la barra de los discos que no tienen valor liderándolas.
import {
AggregateDataverseChartDataSource,
AggregateType,
ChartType,
} from '@powerportalspro/react-charts';
import { DataverseChart } from '@powerportalspro/react-fluent';
import { useMemo } from 'react';
export function MyChart() {
const source = useMemo(
() =>
new AggregateDataverseChartDataSource({
tableName: 'contact',
groupByColumn: 'ppp_age',
groupByRangeSize: 5, // 0 – 4, 5 – 9, 10 – 14 …
aggregateColumn: 'contactid',
aggregate: AggregateType.Count,
}),
[],
);
return (
<DataverseChart
dataSource={source}
type={ChartType.Bar}
title="Contactos por edad"
/>
);
}<DataverseChart Source="_source"
Type="ChartType.Bar"
Title="Contactos por edad" />
@code {
private readonly AggregateDataverseChartDataSource _source = new()
{
TableName = "contact",
GroupByColumn = "ppp_age",
GroupByRangeSize = 5, // 0 – 4, 5 – 9, 10 – 14 …
AggregateColumn = "contactid",
Aggregate = AggregateType.Count,
};
}Los contactos contados por edad. Elige cuántos años cubre cada barra, o una barra para cada edad. Cada selección construye una nueva fuente de datos, y el gráfico carga de nuevo porque su fuente pide otra cosa.
Establezca SeriesRangeSize cuando la columna en rangos es la serie en lugar de las barras: el gráfico agrupa sus barras por GroupByColumn y divide cada una en un conjunto de datos para cada rango de SeriesColumn. Apilada, cada barra muestra cómo se divide su total entre los rangos. Ambas pueden estar en rangos a la vez: edad a lo largo del eje, rangos salariales apilados en cada barra.
const source = useMemo(
() =>
new AggregateDataverseChartDataSource({
tableName: 'contact',
groupByColumn: 'gendercode',
seriesColumn: 'ppp_age',
seriesRangeSize: 20, // un conjunto de datos para 0 – 19, 20 – 39, 40 – 59 ...
aggregateColumn: 'contactid',
aggregate: AggregateType.Count,
}),
[],
);
return <DataverseChart dataSource={source} type={ChartType.Bar} stacked />;<DataverseChart Source="_source"
Type="ChartType.Bar"
Stacked="true" />
@code {
private readonly AggregateDataverseChartDataSource _source = new()
{
TableName = "contact",
GroupByColumn = "gendercode",
SeriesColumn = "ppp_age",
SeriesRangeSize = 20, // un conjunto de datos para 0 – 19, 20 – 39, 40 – 59 ...
AggregateColumn = "contactid",
Aggregate = AggregateType.Count,
};
}Los contactos contados por género, cada barra apilada por rango de edad. Elige cuántos años cubre cada rango; la leyenda enumera los rangos, primero el más bajo.
Los registros sin valor en la columna son una barra propia, etiquetada (Blank) — o en una serie, un (Blank) conjunto de datos. Eso se cumple para cualquier agrupación, no solo para rangos. Establecer GroupByIncludeBlank o SeriesIncludeBlank para false dejarlos fuera del gráfico.
new AggregateDataverseChartDataSource({
tableName: 'contact',
groupByColumn: 'ppp_age',
groupByRangeSize: 10,
groupByIncludeBlank: false, // sin barra (en blanco)
aggregateColumn: 'contactid',
aggregate: AggregateType.Count,
});_source = new AggregateDataverseChartDataSource
{
TableName = "contact",
GroupByColumn = "ppp_age",
GroupByRangeSize = 10,
GroupByIncludeBlank = false, // sin barra (en blanco)
AggregateColumn = "contactid",
Aggregate = AggregateType.Count,
};Un gráfico que comparte a ViewDataSource con una cuadrícula agrupa en rangos de la misma manera: establecido RangeSize en sus agregaciones GroupBy (o Series). Al hacer clic en una barra, se resalta cada fila de la cuadrícula cuyo valor está en el rango de esa barra, y al hacer clic en la (Blank) barra se resalta las filas sin valor.
const dataSource = useViewDataSource({
viewId,
aggregations: [
{
groupBy: { column: 'ppp_age', rangeSize: 10 },
aggregateColumn: 'contactid',
aggregate: AggregateType.Count,
},
],
});_dataSource = new ViewDataSource(GridService, new ViewDataSourceOptions
{
ViewId = _viewId,
Aggregations =
[
new ChartAggregation
{
GroupBy = new ChartGrouping { Column = "ppp_age", RangeSize = 10 },
AggregateColumn = "contactid",
Aggregate = AggregateType.Count,
},
],
});Un gráfico en rangos lee hasta 10.000 filas de valores — valores distintos, o pares de valores cuando una serie los separa. Uno con más valores muestra un error que lo indica en lugar de un gráfico incompleto. Configura RangeGroupingOptions.MaximumRangedValues en el inicio del host para cambiar ese límite para cada cuadrícula y gráfico en el portal. Un gráfico puede pedir un límite inferior propio con MaximumRangedValues (maximumRangedValues); uno que pida más que el del portal se mantiene en el del portal.
// Este gráfico muestra menos
new AggregateDataverseChartDataSource({
tableName: 'contact',
groupByColumn: 'ppp_age',
groupByRangeSize: 5,
aggregateColumn: 'contactid',
aggregate: AggregateType.Count,
maximumRangedValues: 2000,
});// Program.cs — Cada cuadrícula y gráfico en el portal
builder.Services.Configure<RangeGroupingOptions>(o => o.MaximumRangedValues = 20_000);
// Este gráfico muestra menos
_source = new AggregateDataverseChartDataSource
{
TableName = "contact",
GroupByColumn = "ppp_age",
GroupByRangeSize = 5,
AggregateColumn = "contactid",
Aggregate = AggregateType.Count,
MaximumRangedValues = 2_000,
};Dataverse devuelve como máximo 5.000 filas a una consulta, así que después de 4.999 los valores se leen 5.000 a la vez. Aumentar el límite tiene estos costes para cada cuadrícula o gráfico cuya columna tenga ese número de valores:
SplitOverRecordLimit, lo que multiplica de nuevo las solicitudes.Una columna con tantos valores suele agruparse mejor en rangos más grandes, que lee las mismas filas pero dibuja menos barras, o filtrada primero, que lee menos filas.
Véase también