charts - pastel - programa para hacer graficas estadisticas
¿Cómo dibujar gráficos de líneas de Google cuando faltan algunos de los valores? (1)
Encontré el siguiente código JavaScript en Google Chart Tools :
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn(''string'', ''Year'');
data.addColumn(''number'', ''Sales'');
data.addColumn(''number'', ''Expenses'');
data.addRows(4);
data.setValue(0, 0, ''2004'');
data.setValue(0, 1, 1000);
data.setValue(0, 2, 400);
data.setValue(1, 0, ''2005'');
data.setValue(1, 1, 1170); // sales for 2005
data.setValue(1, 2, 460);
data.setValue(2, 0, ''2006'');
data.setValue(2, 1, 860);
data.setValue(2, 2, 580);
data.setValue(3, 0, ''2007'');
data.setValue(3, 1, 1030);
data.setValue(3, 2, 540);
var chart = new google.visualization.ImageLineChart(document.getElementById(''visualization''));
chart.draw(data, {width: 500, height: 250, min: 0});
}
Si hago un comentario sobre la línea de código que establece el valor para las ventas de 2005, la línea Sales aparecerá en el gráfico a partir de 2006 y finalizará en 2007. Esperaba ver la línea Sales desde 2004 (en Y = 1000) hasta 2006. (en Y = 860) y desde 2006 (en Y = 860) hasta 2007 (en Y = 1030).
¿Cómo dibujo ese gráfico si no tengo el valor para las ventas de 2005, pero tengo los valores para 2004, 2006 y 2007?
Resultado actual:
Resultado esperado: (Agregué el valor 930 para las ventas de 2005 solo para mostrar lo que quiero lograr; espero que haya una mejor manera de hacerlo sin calcular todos los valores Y que faltan para todas las series)
Si es posible usar la versión de JavaScript de este cuadro, puede lograr algo como lo que quiere utilizando la opción interpolateNulls disponible a través de las opciones del gráfico de líneas .
Aquí hay un ejemplo de trabajo.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load(''visualization'', ''1.1'', {packages: [''corechart'', ''imagelinechart'']});
</script>
<script type="text/javascript">
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn(''string'', ''Year'');
data.addColumn(''number'', ''Sales'');
data.addColumn(''number'', ''Expenses'');
data.addRows(4);
data.setValue(0, 0, ''2004'');
data.setValue(0, 1, 1000);
data.setValue(0, 2, 400);
data.setValue(1, 0, ''2005'');
//data.setValue(1, 1, 1170); // sales for 2005
data.setValue(1, 2, 460);
data.setValue(2, 0, ''2006'');
data.setValue(2, 1, 860);
data.setValue(2, 2, 580);
data.setValue(3, 0, ''2007'');
data.setValue(3, 1, 1030);
data.setValue(3, 2, 540);
var chart = new google.visualization.LineChart(document.getElementById(''visualization''));
chart.draw(data, {width: 500, height: 250, min: 0, interpolateNulls: true});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
<div id="visualization" style="width: 600px; height: 400px;"></div>
</body>
</html>