Tengo una página en una aplicación que muestra todo tipo de métricas de tickets de varios sistemas de tickets diferentes que usamos. Uso la misma función para construir cada uno de los gráficos y mostrarlos:
function drawChart(chartData, chartStyle, chartTitle, chartSpanID) { var data = new google.visualization.DataTable(); data.addColumn('string', 'Hour'); data.addColumn('number', 'Tickets'); data.addRows(chartData); if(chartStyle == "column"){ var chart = new google.visualization.ColumnChart(document.getElementById(chartSpanID)); var options = {title:chartTitle,chartArea: {left: 30, top:20, bottom:30, right:10},animation:{startup: true, duration:2000}} }; if(chartStyle == "pie"){ var chart = new google.visualization.PieChart(document.getElementById(chartSpanID)); var options = {title:chartTitle, chartArea:{left: 0, top:20, bottom:10, right: 0}, is3D: true, sliceVisibilityThreshold: .01, animation:{startup: true,easing: 'in', duration:1000}, pieResidueSliceLabel: "Other( < 1%)"}; }; chart.draw(data, options); }Esto funciona para 13 de los 14 gráficos que se muestran en la página. 8 columnas y 5 de 6 gráficos circulares se muestran perfectamente. Uno de los gráficos circulares SOLO se mostrará si dibujo el gráfico por segunda vez.
function drawChart(chartData, chartStyle, chartTitle, chartSpanID) { var data = new google.visualization.DataTable(); data.addColumn('string', 'Hour'); data.addColumn('number', 'Tickets'); data.addRows(chartData); if(chartStyle == "column"){ var chart = new google.visualization.ColumnChart(document.getElementById(chartSpanID)); var options = {title:chartTitle,chartArea: {left: 30, top:20, bottom:30, right:10},animation:{startup: true, duration:2000}} }; if(chartStyle == "pie"){ var chart = new google.visualization.PieChart(document.getElementById(chartSpanID)); var options = {title:chartTitle, chartArea:{left: 0, top:20, bottom:10, right: 0}, is3D: true, sliceVisibilityThreshold: .01, animation:{startup: true,easing: 'in', duration:1000}, pieResidueSliceLabel: "Other( < 1%)"}; }; chart.draw(data, options); chart.draw(data, options); }Los datos se entregan correctamente, todas las llamadas se realizan a través de google.charts.setOnLoadCallback, todo funciona bien una vez que se vuelve a llamar... Entonces, ¿por qué solo funciona en la segunda llamada? ¿Por qué solo el único gráfico que no se muestra como se esperaba? ¿Qué me he perdido?