Un gráfico de sectores es un gráfico circular que se divide en pedazos que representan estadÃsticas. En aplicaciones web, los gráficos de sectores son muy útiles para mostrar datos estadÃsticos en porcentajes. Google Charts nos proporciona una manera sencilla de visualizar datos estadÃsticos en aplicaciones web. En este tutorial, te mostraremos cómo implementar y embeber un gráfico de sectores para mostrar datos demográficos en una página web utilizando Google Charts. También haremos que nuestro gráfico sea totalmente responsive para que se vea bien en todo tipo de resoluciones.
Crear gráfico de sectores con Google Charts
La Google Visualization API nos proporciona una vÃa rápida a la hora de crear gráficos de sectores en una página web. Puedes embeber un gráfico de sectores en cuestión de minutos utilizando Google Charts. El siguiente código crea un gráfico de sectores con Google Charts.
Codigo Javascript
Antes que nada, tienes que cargar la librerÃa de Google Chart.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
Utiliza el objeto chart con el callbacl drawChart. Debes especificar el id del div (piechart) en el método PieChart() cuando quieras mostrar el gráfico de sectores.
<script type="text/javascript"> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Language', 'Rating'], ['PHP', 79], ['JavaScript', 71], ['Swift', 68], ['SQL', 56], ['Java', 45], ['Perl', 45], ['Ruby', 35], ['Python', 30], ['AngularJS', 29], ['Node.js', 28], ['Objective-C', 19], ['C#', 17], ['C++', 15], ['C', 14] ]); var options = { title: 'Most Popular Programming Languages' }; var chart = new google.visualization.PieChart(document.getElementById('piechart')); chart.draw(data, options); } </script>
Código HTML
Crea un elemento div con id (piechart) para mostrar el Google Chart en él.
<div id="piechart" style="width: 900px; height: 500px;"></div>
Hacer que el gráfico de sectores sea responsive
Si lo que quieres es que tu gráfico de sectores se muestre correctamente en todo tipo de resoluciones , debes hacer que sea responsive. Para hacer que nuestro gráfico sea responsive debemos modificar nuestro código HTML y Javascript.
El siguiente código crea un gráfico de sectores responsive con CSS.
Código Javascript
Añade un ancho (width) y un alto (height) en el método draw().
<script type="text/javascript"> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Language', 'Rating'], ['PHP', 79], ['JavaScript', 71], ['Swift', 68], ['SQL', 56], ['Java', 45], ['Perl', 45], ['Ruby', 35], ['Python', 30], ['AngularJS', 29], ['Node.js', 28], ['Objective-C', 19], ['C#', 17], ['C++', 15], ['C', 14] ]); var options = { title: 'Most Popular Programming Languages', width: '100%', height: '500px' }; var chart = new google.visualization.PieChart(document.getElementById('piechart')); chart.draw(data, options); } </script>
Código HTML
Pon el div piechart en un div padre
<div id="chart_wrap"> <div id="piechart"></div> </div>
Código CSS
Añade el siguiente CSS para el div padre del div piechart y para el propio div piechart.
#chart_wrap { position: relative; padding-bottom: 100%; height: 0; overflow:hidden; } #piechart { position: absolute; top: 0; left: 0; width:100%; height:500px; }