Múltiples Gráficos de Google

Intento crear varios Gráficos de Google, pero no puedo hacer que funcione. He intentado todo lo que pude encontrar en Stack Overflow. Recientemente intenté esta solución, pero no funcionó. Creo que me estoy perdiendo algo. ¿Alguien puede ver algo mal con el código tal como está ahora?

Comportamiento esperado:

Página muestra un gráfico de barras. Luego, se muestra un gráfico de líneas debajo del gráfico de barras.

Comportamiento actual:

Página muestra un gráfico de barras. El gráfico de líneas no se visualiza.

Aquí está JSFiddle . En una nota lateral, el JavaScript solo parece funcionar en línea en JSFiddle. Si lo moví a la sección de JavaScript, no funcionó correctamente. Tal vez esto tiene algo que ver con el recurso externo que se llamó?

De todos modos, actualmente estoy haciendo esto todo en línea para este experimento.

HTML:

<!DOCTYPE html> <html> <head> <script src="https://www.google.com/jsapi" type="text/javascript"> </script> <script type="text/javascript"> // Load the Visualization API and the chart packages. google.load('visualization', '1.1', { packages: ['line', 'bar', 'corechart'] }); // Set a callback to run when the Google Visualization API is loaded. google.setOnLoadCallback(drawChart); // Callback that creates and populates a data table, // instantiates the charts, passes in the data and // draws them. function drawChart() { // Create the data table. var BarData = new google.visualization.arrayToDataTable([ ['', 'Customer', 'Segment Avg'], ['TTM Sales', 4, 2], ['TTM Orders', 5, 3], ['TTM Categories', 7, 4] ]); // Create the data table. var LineData = new google.visualization.arrayToDataTable([ ['Year', 'Customer', 'Segment Avg'], ['2011', 4, 5], ['2012', 5, 3], ['2013', 4, 2] ]); // Set chart options var BarOptions = { chart: { title: 'Performance', }, width: 900, height: 500 }; // Set chart options var LineOptions = { chart: { title: 'Sales History' }, width: 900, height: 500 }; // Instantiate and draw our chart, passing in some options. var BarChart = new google.charts.Bar(document.getElementById( 'bar_chart')); BarChart.draw(BarData, BarOptions); var LineChart = new google.charts.Line(document.getElementById( 'line_chart')); LineChart.draw(LineData, LineOptions); }; </script> <title>Test Chart Page</title> </head> <body> <!--Divs that will hold the charts--> <div id="bar_chart"></div> <div id="line_chart"></div> </body> </html> 

Parece que se han realizado algunos cambios en la última versión de la API de Google Charts que causa este comportamiento, pero hay una forma confiable de procesar múltiples charts en una sola página. La idea es representar el siguiente gráfico una vez que se haya renderizado el anterior, para tal fin podría utilizar el controller de events ready .

Habiendo dicho eso, reemplace

 var barChart = new google.charts.Bar(document.getElementById('bar_chart')); barChart.draw(barData, barOptions); var lineChart = new google.charts.Line(document.getElementById('line_chart')); lineChart.draw(lineData, lineOptions); 

con

 var barChart = new google.charts.Bar(document.getElementById('bar_chart')); google.visualization.events.addOneTimeListener(barChart, 'ready', function () { var lineChart = new google.charts.Line(document.getElementById('line_chart')); lineChart.draw(lineData, lineOptions); }); barChart.draw(barData, barOptions); 

Ejemplo de trabajo

 google.load('visualization', '1.1', { packages: ['line', 'bar', 'corechart'] }); // Set a callback to run when the Google Visualization API is loaded. google.setOnLoadCallback(drawCharts); function drawCharts() { // Create the data table. var barData = new google.visualization.arrayToDataTable([ ['', 'Customer', 'Segment Avg'], ['TTM Sales', 4, 2], ['TTM Orders', 5, 3], ['TTM Categories', 7, 4] ]); // Create the data table. var lineData = new google.visualization.arrayToDataTable([ ['Year', 'Customer', 'Segment Avg'], ['2011', 4, 5], ['2012', 5, 3], ['2013', 4, 2] ]); // Set chart options var barOptions = { chart: { title: 'Performance', }, width: 900, height: 500 }; // Set chart options var lineOptions = { chart: { title: 'Sales History' }, width: 900, height: 500 }; var barChart = new google.charts.Bar(document.getElementById('bar_chart')); google.visualization.events.addOneTimeListener(barChart, 'ready', function () { var lineChart = new google.charts.Line(document.getElementById('line_chart')); lineChart.draw(lineData, lineOptions); }); barChart.draw(barData, barOptions); }; 
 <script src="https://www.google.com/jsapi" type="text/javascript"></script> <div id="bar_chart"></div> <div id="line_chart"></div> 

El siguiente código funciona al crear el segundo gráfico dentro de setTimeout. No sé qué está causando el problema, pero al less tienes una solución alternativa.

violín

 <script type="text/javascript"> // Load the Visualization API and the chart packages. google.load('visualization', '1.1', { packages: ['line', 'bar', 'corechart'] }); // Set a callback to run when the Google Visualization API is loaded. google.setOnLoadCallback(drawChart); // Callback that creates and populates a data table, // instantiates the charts, passes in the data and // draws them. function drawChart() { // Create the data table. var BarData = new google.visualization.arrayToDataTable([ ['', 'Customer', 'Segment Avg'], ['TTM Sales', 4, 2], ['TTM Orders', 5, 3], ['TTM Categories', 7, 4] ]); // Create the data table. var LineData = new google.visualization.arrayToDataTable([ ['Year', 'Customer', 'Segment Avg'], ['2011', 4, 5], ['2012', 5, 3], ['2013', 4, 2] ]); // Set chart options var BarOptions = { chart: { title: 'Performance', }, width: 900, height: 500 }; // Set chart options var LineOptions = { chart: { title: 'Sales History' }, width: 900, height: 500 }; // Instantiate and draw our chart, passing in some options. var BarChart = new google.charts.Bar(document.getElementById( 'bar_chart')); var LineChart = new google.charts.Line(document.getElementById( 'line_chart')); LineChart.draw(LineData, LineOptions); setTimeout(function(){ BarChart.draw(BarData, BarOptions); },50); }; </script> <body> <!--Divs that will hold the charts--> <div id="bar_chart"></div> <div id="line_chart"></div> </body> 

Funciona con setTimeout :

 // Instantiate and draw our chart, passing in some options. var BarChart = new google.charts.Bar(document.getElementById( 'bar_chart')); setTimeout(function() { BarChart.draw(BarData, BarOptions); }, 0); var LineChart = new google.charts.Line(document.getElementById( 'line_chart')); setTimeout(function() { LineChart.draw(LineData, LineOptions); }, 1e3); 

JSFiddle actualizado