Descripción general
Un gráfico de diferencias es un gráfico diseñado para destacar las diferencias entre dos gráficos con datos comparables. Si se hacen destacados los cambios entre valores análogos, pueden revelar variaciones entre los conjuntos de datos.
Para crear un gráfico de diferencias, llama al método computeDiff con dos conjuntos de datos a fin de generar un tercer conjunto de datos que represente la diferencia y, luego, dibuja eso.
Los gráficos de diferencias están disponibles para los gráficos de barras, los gráficos de columnas, los gráficos circulares y los gráficos de dispersión.
Ejemplos
En esta sección, verás ejemplos y muestras de código para cada tipo de gráfico de diferencias.
Diagramas de dispersión de diferencias
Para demostrar el diagrama de dispersión de las diferencias, consideremos un par de experimentos, en el que cada uno compare dos medicamentos. Estos son los resultados de los dos experimentos y el gráfico de diferencias resultante:
Si observas esos dos gráficos, te darás cuenta de que algo cambió, pero es difícil saber exactamente qué. El diagrama de dispersión de la diferencia lo deja en claro mostrando la trayectoria de cada punto de datos.
Estas son las líneas clave que generan los tres gráficos anteriores:
// Create the three charts: before, after, and diff.
var chartBefore = new google.visualization.ScatterChart(document.getElementById('chart_before_div'));
var chartAfter = new google.visualization.ScatterChart(document.getElementById('chart_after_div'));
var chartDiff = new google.visualization.ScatterChart(document.getElementById('chart_diff_div'));
// Draw the before and after charts.
chartBefore.draw(oldData);
chartAfter.draw(newData);
// Draw the diff chart.
var diffData = chartDiff.computeDiff(oldData, newData);
chartDiff.draw(diffData);
Puedes cambiar la opacidad de las colas con la opción diff.oldData.opacity y la opacidad de los datos nuevos con la opción diff.newData.opacity:
Gráficos circulares de diferencias
Este es el código para generar los tres gráficos:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var oldData = google.visualization.arrayToDataTable([
['Major', 'Degrees'],
['Business', 256070], ['Education', 108034],
['Social Sciences & History', 127101], ['Health', 81863],
['Psychology', 74194]]);
var newData = google.visualization.arrayToDataTable([
['Major', 'Degrees'],
['Business', 358293], ['Education', 101265],
['Social Sciences & History', 172780], ['Health', 129634],
['Psychology', 97216]]);
var options = { pieSliceText: 'none' };
var chartBefore = new google.visualization.PieChart(document.getElementById('piechart_before'));
var chartAfter = new google.visualization.PieChart(document.getElementById('piechart_after'));
var chartDiff = new google.visualization.PieChart(document.getElementById('piechart_diff'));
chartBefore.draw(oldData, options);
chartAfter.draw(newData, options);
var diffData = chartDiff.computeDiff(oldData, newData);
chartDiff.draw(diffData, options);
}
</script>
<span id='piechart_before' style='width: 450px; display: inline-block'></span>
<span id='piechart_after' style='width: 450px; display: inline-block'></span>
<br>
<span id='piechart_diff' style='width: 450px; position: absolute; left: 250px'></span>
Puedes controlar el tamaño relativo de los círculos con diff.innerCircle.radiusFactor, el borde entre ambos con diff.innerCircle.borderFactor y la transparencia de cada uno con diff.oldData.opacity y diff.newData.opacity. Por último, puedes invertir el comportamiento para que los datos más antiguos rodeen a los más recientes con diff.oldData.inCenter. Un ejemplo de cada una:
Gráficos de barras y columnas de diferencias
Los gráficos de barras y columnas de diferencias superponen datos más recientes sobre los más antiguos. Aquí, tomamos dos gráficos de columnas simples, uno de datos antiguos y otro de nuevos, y los diferenciamos:
Para ver un ejemplo más complicado, veamos cómo la popularidad de algunos nombres (en particular, los nombres de pasantes de verano de Visualización de Google) cambió desde la década de 1980 hasta la actualidad (las cifras son por cada millón de bebés, cortesía del Asistente de nombres de bebés).
El código para generar los cuatro gráficos:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var oldData = google.visualization.arrayToDataTable([
['Name', 'Popularity'],
['Cesar', 250],
['Rachel', 4200],
['Patrick', 2900],
['Eric', 8200]
]);
var newData = google.visualization.arrayToDataTable([
['Name', 'Popularity'],
['Cesar', 370],
['Rachel', 600],
['Patrick', 700],
['Eric', 1500]
]);
var colChartBefore = new google.visualization.ColumnChart(document.getElementById('colchart_before'));
var colChartAfter = new google.visualization.ColumnChart(document.getElementById('colchart_after'));
var colChartDiff = new google.visualization.ColumnChart(document.getElementById('colchart_diff'));
var barChartDiff = new google.visualization.BarChart(document.getElementById('barchart_diff'));
var options = { legend: { position: 'top' } };
colChartBefore.draw(oldData, options);
colChartAfter.draw(newData, options);
var diffData = colChartDiff.computeDiff(oldData, newData);
colChartDiff.draw(diffData, options);
barChartDiff.draw(diffData, options);
}
</script>
<span id='colchart_before' style='width: 450px; height: 250px; display: inline-block'></span>
<span id='colchart_after' style='width: 450px; height: 250px; display: inline-block'></span>
<span id='colchart_diff' style='width: 450px; height: 250px; display: inline-block'></span>
<span id='barchart_diff' style='width: 450px; height: 250px; display: inline-block'></span>
La columna de diferencias y los gráficos de barras te permiten controlar el ancho relativo de la barra anterior y la nueva con la opción diff.newData.widthFactor: