Diagrama de extremos (boxplot)
Definição
O gráfico de extremos exibe limites superiores e inferiores para elementos, na forma de colunas. Os valores máximos são representados pelo topo da coluna, enquanto os mínimos são representados pela sua base. Geralmente, valores internos são representados no gráfico como linhas horizontais dentro das colunas.
Uso
Esta visualização é utilizada para representar a amplitude de valores em séries de dados. Pode exibir limites máximos e mínimos, margens de erro, e indicar valores simples ou médias.
Dicas
- Atribua escala quantitativa ao eixo vertical.
- Atribua escala sequencial ou categórica ao eixo horizontal.
- Utilize uma cor clara para o preenchimento da coluna e uma cor escura para as linhas.
Implementação
Diagramas box plot
Implementação com ApexChart
const column_clean_1 = [1062, 856, 871, 879, 890, 985, 994, 920, 963, 983, 933, 972]
const column_clean_2 = [972, 933, 983, 963, 920, 994, 985, 890, 879, 871, 856, 1062]
const datas = [
1627786800000, 1627873200000, 1627959600000, 1628046000000,
1628132400000, 1628218800000, 1628305200000, 1628391600000,
1628478000000, 1628564400000, 1628650800000, 1628737200000
]
const predef = {
type: 'bar',
stacked: false,
toolbar: {
show: false
},
zoom: {
enabled: false
},
fontFamily: 'Rawline, Arial, sans-serif',
defaultLocale: 'pt-br',
locales: [{
"name": "pt-br",
"options": {
"months": [
"Janeiro",
"Fevereiro",
"Março",
"Abril",
"Maio",
"Junho",
"Julho",
"Agosto",
"Setembro",
"Outubro",
"Novembro",
"Dezembro"
],
"shortMonths": [
"Jan",
"Fev",
"Mar",
"Abr",
"Mai",
"Jun",
"Jul",
"Ago",
"Set",
"Out",
"Nov",
"Dez"
],
"days": [
"Domingo",
"Segunda",
"Terça",
"Quarta",
"Quinta",
"Sexta",
"Sábado"
],
"shortDays": ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sab"],
"toolbar": {
"exportToSVG": "Baixar SVG",
"exportToPNG": "Baixar PNG",
"exportToCSV": "Baixar CSV",
"menu": "Menu",
"selection": "Selecionar",
"selectionZoom": "Selecionar Zoom",
"zoomIn": "Aumentar",
"zoomOut": "Diminuir",
"pan": "Navegação",
"reset": "Reiniciar Zoom"
}
}
}]
}
const options_clean = {
// Configuração Geral
chart: {
...predef
},
dataLabels: {
enabled: false
},
grid: {
show: true
},
// Configuração mediante a um gráfico
plotOptions: {
bar: {
columnWidth: '80%'
}
},
/**
* Definição de cores
*/
colors: ['#86C7BD', '#2670E8'],
series: [
{
name: 'Coluna 1',
type: 'column',
data: column_clean_1
},
{
name: 'Coluna 2',
type: 'column',
data: column_clean_2
}
],
/**
* Gráfico temporal
* Definindo eixo x como datetime para aceitar datas
*/
xaxis: {
type: 'datetime',
categories: datas
},
yaxis: [
{
title: {
text: 'Titulo Eixo 1'
},
seriesName: 'Coluna 1',
}
],
tooltip: {
x: {
show: false
},
},
};
var chart = new ApexCharts(document.querySelector('#chart-clean'), options_clean);
chart.render();Implementação com Qlik
- O tema para o Qlik Sense da SAGE deve estar instalado e selecionado dentro do Aplicativo do Qlik. Para baixar e instalar o tema acesse: Instruções para o Qlik Sense
- Estando na tela do Qlik, nas configurações do gráfico Plotagem da Caixa , vá em Aparência > Cores e selecione a opção “Personalizar”, configure por “Cor única”.
- Em Cor da caixa selecione a cor “Verde Saúde” (#86c7bd) e em Cor da discrepância selecione a cor “Magenta Pétala” (#c72487) da paleta de cores da SAGE.
Representação de outliers
Para representar outliers, utilize pontos com uma cor de contraste.
Diagramas box plot com outliers
Implementação com ApexChart
const column_outlier_1 = [1062, 856, 871, 879, 890, 985, 1938, 920, 963, 983, 933, 972]
const column_outlier_2 = [972, 933, 983, 963, 920, 994, 150, 890, 879, 871, 856, 1062]
const outlier_index = 6;
const outliers = [
{
x: datas[outlier_index],
borderColor: '#86C7BD',
label_text: String(column_outlier_1[outlier_index]) + ' un.'
}
]
const options_outlier = {
// Configuração Geral
chart: {
...predef
},
dataLabels: {
enabled: false
},
grid: {
show: true
},
// Annotation outlier
annotations: {
xaxis: outliers.map(({x, borderColor, label_text}) => ({
x, borderColor,
strokeDashArray: 0,
offsetX: -8,
label: {
borderColor,
orientation: 'horizontal',
text: label_text,
offsetX: -8,
}
}))
},
/**
* Definição de cores
*/
colors: ['#86C7BD', '#2670E8'],
series: [
{
name: 'Coluna 1',
type: 'column',
data: column_outlier_1
},
{
name: 'Coluna 2',
type: 'column',
data: column_outlier_2
}
],
/**
* Gráfico temporal
* Definindo eixo x como datetime para aceitar datas
*/
xaxis: {
type: 'datetime',
categories: datas
},
yaxis: [
{
title: {
text: 'Titulo Eixo 1'
},
seriesName: 'Coluna 1',
}
],
tooltip: {
x: {
show: false
},
},
};
var chart = new ApexCharts(document.querySelector('#chart-outlier'), options_outlier);
chart.render();Representação de dados ausentes
Diagramas box plot com dados ausentes
Implementação com ApexChart
const column_missing_1 = [1062, 856, 871, 879, 890, 985, null, 920, 963, 983, 933, 972]
const column_missing_2 = [972, 933, 983, 963, 920, 994, 150, 890, 879, 871, 856, 1062]
const missing_index = 6;
const missings = [
{
x: datas[missing_index],
borderColor: '#86C7BD',
label_text: 'Dado Faltante'
}
]
const options_missing = {
// Configuração Geral
chart: {
...predef
},
dataLabels: {
enabled: false
},
grid: {
show: true
},
// Annotation outlier
annotations: {
xaxis: missings.map(({x, borderColor, label_text}) => ({
x, borderColor,
strokeDashArray: 0,
offsetX: -8,
label: {
borderColor,
orientation: 'horizontal',
text: label_text,
offsetX: -8,
}
}))
},
/**
* Definição de cores
*/
colors: ['#86C7BD', '#2670E8'],
series: [
{
name: 'Coluna 1',
type: 'column',
data: column_missing_1
},
{
name: 'Coluna 2',
type: 'column',
data: column_missing_2
}
],
/**
* Gráfico temporal
* Definindo eixo x como datetime para aceitar datas
*/
xaxis: {
type: 'datetime',
categories: datas
},
yaxis: [
{
title: {
text: 'Titulo Eixo 1'
},
seriesName: 'Coluna 1',
}
],
tooltip: {
x: {
show: false
},
},
};
var chart = new ApexCharts(document.querySelector('#chart-missing'), options_missing);
chart.render();Visualizações alternativas/relacionadas
Gráfico combinado de linhas e colunas
Gráfico de colunas empilhadas
Gráfico de barras empilhadas
