haxis - horizontal bar chart google charts

gráfico de columnas apiladas para dos conjuntos de datos-Google Charts

Question

Estoy generando algunos Gráficos de Google y estoy atrapado aquí. Google le permite tener sus columnas apiladas. Pero es limitado o no puedo configurarlo para que funcione. Tomado de Google, aquí hay un ejemplo que muestra la cantidad de tazas de café producidas en cada año para dos países:

Supongamos que tengo otro conjunto de datos para los mismos dos países, pero esta vez tengo café instantáneo en lugar de tierra. Ejemplo:

Lo que me gustaría hacer es apilar estos dos conjuntos de datos uno encima del otro. Entonces cada columna sería un solo país, pero dos divisiones: frijoles y café instantáneo.

Estaba pensando si había una forma de formatear la tabla de datos de la siguiente manera:

[''Year'', ''Austria'', ''Austria (instant)'', ''Bulgaria'', ''Bulgaria (instant'')],
[''2003'', 1736060, 10051, 250361, 68564],
[''2004'', 1338156, 65161, 786849, 1854654],
[''2005'', 1276579, 65451, 120514, 654654]

para generar algo así como

Tu ayuda es apreciada.

Answer 1

La API de visualización no admite la creación de múltiples pilas de columna por fila de datos. Puede hacer una solicitud de función para agregar soporte para esto si lo desea.

Answer 2

La respuesta de Dan Hogan funcionó para mí. Sin embargo, el ejemplo de JSFiddle no parecía funcionar (no estoy seguro, por qué). Aquí hay una versión que funciona para mí.

google.charts.load(''current'', {''packages'': [''bar'']});
google.charts.setOnLoadCallback(function() {
$(''.service-usage-graph'').each(function() {
var table = new google.visualization.DataTable();
table.addColumn(''string'', ''Date'');
table.addColumn(''number'', ''UL Peak'');
table.addColumn(''number'', ''UL Off-peak'');
table.addColumn(''number'', ''DL Peak'');
table.addColumn(''number'', ''DL Off-peak'');
table.addRow([''2001-01-01'', 1, 2, 3, 4]);
table.addRow([''2001-01-03'', 3, 2, 4, 2]);
table.addRow([''2001-01-04'', 2, 2, 4, 2]);
table.addRow([''2001-01-05'', 0, 1, 4, 5]);
table.addRow([''2001-01-06'', 9, 2, 6, 8]);
table.addRow([''2001-01-07'', 2, 2, 7, 3]);
var chart = new google.charts.Bar(this);
var options = google.charts.Bar.convertOptions({
isStacked: true,
series: {
2: { targetAxisIndex: 1 },
3: { targetAxisIndex: 1 }
},
vAxis: {
viewWindow: {
max: 15,
}
}
});
chart.draw(table, options);
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="service-usage-graph"></div>

Answer 3

Me encontré con este mismo problema hoy y seguí tu enlace de envío. Parece que hace poco alguien respondió con esto:

"Esto es realmente posible con el nuevo gráfico de Barras de materiales (aunque de una manera algo indirecta). En el nuevo gráfico, si se apila un gráfico, pero se colocan algunas series en un eje diferente, se crea una pila separada para esas series. Desafortunadamente, actualmente no hay forma de ocultar completamente un eje, y tendrá que establecer explícitamente la ventana de visualización. Eventualmente, presentaremos opciones para ocultar los ejes y alinear las ventanas de visualización, pero esto tendrá que hacer por el momento ".

Este violín me ayudó a resolver este problema: http://jsfiddle.net/p7o0pjgg/

Aquí está el código:

google.load(''visualization'', ''1.1'', {
''packages'': [''bar'']
});
google.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.DataTable();
data.addColumn(''string'', ''Topping'');
data.addColumn(''number'', ''Nescafe Instant'');
data.addColumn(''number'', ''Folgers Instant'');
data.addColumn(''number'', ''Nescafe Beans'');
data.addColumn(''number'', ''Folgers Beans'');
data.addRows([
[''2001'', 321, 621, 816, 319],
[''2002'', 163, 231, 539, 594],
[''2003'', 125, 819, 123, 578],
[''2004'', 197, 536, 613, 298]
]);
// Set chart options
var options = {
isStacked: true,
width: 800,
height: 600,
chart: {
title: ''Year-by-year coffee consumption'',
subtitle: ''This data is not real''
},
vAxis: {
viewWindow: {
min: 0,
max: 1000
}
},
series: {
2: {
targetAxisIndex: 1
},
3: {
targetAxisIndex: 1
}
}
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.charts.Bar(document.getElementById(''chart_div''));
chart.draw(data, google.charts.Bar.convertOptions(options));
};