0

Quiero hacer que cuando el gráfico de google charts haya cargado completamente, la función que realizaría el botón se lance automáticamente. He intentado hacer un window.onload, pero creo que el setOnLoadCallback está haciendo algo que impide lo que intento.

También he probado a poner el código que ejecutaría el botón después del chart.draw(), pero no funciona. A ver si alguien sabe ayudarme. Gracias!!

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<input id="save-pdf" type="button" value="Save as PDF" disabled />
<div id="chart_div"></div>
<script>
	google.charts.load('current', {
		'packages':['geochart'],
		// Note: you will need to get a mapsApiKey for your project.
		// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
		'mapsApiKey': 'AIzaSyCBvatIme596a7vSTsiu6h9jakhY5gLnuY'
		});
		google.charts.setOnLoadCallback(drawRegionsMap);

		function drawRegionsMap() {
		    var data = google.visualization.arrayToDataTable([
			['Country', 'Nota media'],
			['ES-CL', 90],
			['ES-MD', 85],
			['ES-MC', 70],
			['ES-CT', 92],
			]);

			var options = {
			'title':'Map',
			'width': 480,
			'height': 480,
			region: 'ES',
			'resolution':'provinces',
			colorAxis: {minValue:60, maxValue:100, colors: ['white','#0080FF']},
			backgroundColor: 'white',
			datalessRegionColor: 'white',
			defaultColor: '#f5f5f5',


			};

			var chart_div = document.getElementById('chart_div');
			var chart = new google.visualization.GeoChart(chart_div);
			var btnSave = document.getElementById('save-pdf');

			google.visualization.events.addListener(chart, 'ready', function () {
			    btnSave.disabled = false;
			  });

			  btnSave.addEventListener('click', function () {
			    var doc = new jsPDF();
			    doc.addImage(chart.getImageURI(), 0, 0);
			    doc.save('chart.pdf');
			  }, false);

			chart.draw(data, options);
		}
</script>

1 respuesta 1

0

Solo debes agregar btnSave.click(); luego de activar el boton con btnSave.disabled = false;

Código modificado:

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<input id="save-pdf" type="button" value="Save as PDF" disabled />
<div id="chart_div"></div>
<script>
	google.charts.load('current', {
		'packages':['geochart'],
		// Note: you will need to get a mapsApiKey for your project.
		// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
		'mapsApiKey': 'AIzaSyCBvatIme596a7vSTsiu6h9jakhY5gLnuY'
		});
		google.charts.setOnLoadCallback(drawRegionsMap);

		function drawRegionsMap() {
		    var data = google.visualization.arrayToDataTable([
			['Country', 'Nota media'],
			['ES-CL', 90],
			['ES-MD', 85],
			['ES-MC', 70],
			['ES-CT', 92],
			]);

			var options = {
			'title':'Map',
			'width': 480,
			'height': 480,
			region: 'ES',
			'resolution':'provinces',
			colorAxis: {minValue:60, maxValue:100, colors: ['white','#0080FF']},
			backgroundColor: 'white',
			datalessRegionColor: 'white',
			defaultColor: '#f5f5f5',


			};

			var chart_div = document.getElementById('chart_div');
			var chart = new google.visualization.GeoChart(chart_div);
			var btnSave = document.getElementById('save-pdf');

			google.visualization.events.addListener(chart, 'ready', function () {
			    btnSave.disabled = false;
                btnSave.click();
			  });

			  btnSave.addEventListener('click', function () {
			    var doc = new jsPDF();
			    doc.addImage(chart.getImageURI(), 0, 0);
			    doc.save('chart.pdf');
			  }, false);

			chart.draw(data, options);
		}
</script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.