Tengo una página HTML cuya parte es:
<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(Social); function Social() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('number', 'Errors'); data.addRows([ ['bla', 53], ['bla', 5] ]); var options = {title:'Social', width:600, height:200, animation:{ "startup": true, duration: 1500, easing: 'out'} }; var chart = new google.visualization.ColumnChart(document.getElementById('Social')); chart.draw(data, options);} </script>Al cargar esta página, utiliza Google para mostrar las filas en ColumnChart.
Si cambiara la línea que comienza con "var chart" a esto:
var chart = new google.visualization.BarChart(document.getElementById('Social'));El html mostraría un gráfico de barras.
Quiero crear un botón de javascript que reemplace el texto en el html de ColumnChart a BarChart y vuelva a cargar la página, algo así como:
function myFunction() { document.body.innerHTML = document.body.innerHTML.replace("ColumnChart", "BarChart"); location.reload(); }Pero esto vuelve a cargar la página con los valores iniciales. Si no agrego recargar, no veo ninguna diferencia, por supuesto.
¿Cómo puedo conseguir esto?
No es posible realizar cambios y recargar la página y mantener el cambio, ya que la solicitud GET recargará la página desde el servidor. En su lugar, desea inyectar un script y ejecutarlo para actualizar la página existente, puede intentar ejecutar esto después de que la página esté cargada para sobrescribir ColumnChart :
function socialBarChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('number', 'Errors'); data.addRows([ ['bla', 53], ['bla', 5] ]); var options = { title:'Social', width: 600, height: 200, animation: { "startup": true, duration: 1500, easing: 'out' } }; var chart = new google.visualization.BarChart(document.getElementById('Social')); chart.draw(data, options); } // Then call this : socialBarChart()Es una buena práctica usar camelCase con un primer carácter en minúsculas para nombrar su función; de lo contrario, parecerá un constructor de clase.