Autor Tema: Dibujar gráficos con JavaScript Librerías frameworks Google chart tools CU01194E  (Leído 2981 veces)

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Dejo el ejercicio opcional presentado en la entrega CU01194E del tutorial JavaScript desde cero.

Citar
EJERCICIO OPCIONAL
Este ejercicio no forma parte del curso, por eso se califica como opcional. El ejercicio consiste en ver un breve ejemplo de uso de una librería JavaScript para creación de un gráfico.
Considera que como resultado de realizar una encuesta a los clientes de un hotel se han obtenido estos resultados: 35 % insatisfechos, 42 % satisfechos y 23 % indiferentes.
Se pide utilizar una librería o framework JavaScript especializada en la creación de gráficos para crear un gráfico circular que refleje dichos resultados. El resultado a obtener debe ser similar a este:



Código: [Seleccionar]
<html>
  <head>
    <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(drawChart);
      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Insatisfecho',     35],
          ['Satisfecho',      42],
          ['Indiferente',  23]
        ]);

        var options = {
          title: 'Encuesta usuarios Hotel JavaScript'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>


La solución la saqué de Google chart tools: https://developers.google.com/chart/

Saludos.
« Última modificación: 24 de Febrero 2016, 09:12 por Mario R. Rancel »

Mario R. Rancel

  • Administrador
  • Experto
  • ********
  • APR2.COM
  • Mensajes: 1978
    • Ver Perfil
Buenos días Pedro, perfecto el ejercicio. La idea era ver cómo el uso de librerías nos puede facilitar enormemente resolver determinadas tareas... lo que queda claro con tu código

Saludos

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".