Foros aprenderaprogramar.com

Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: pedro,, en 21 de Febrero 2016, 15:32

Título: Dibujar gráficos con JavaScript Librerías frameworks Google chart tools CU01194E
Publicado por: pedro,, en 21 de Febrero 2016, 15:32
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:

(http://i1336.photobucket.com/albums/o646/alejrod872/Curso%20JavaScript/CU01194E_5_zpsxu9uwysr.jpg)

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.
Título: Re:Dibujar gráficos con JavaScript Librerías frameworks Google chart tools CU01194E
Publicado por: Mario R. Rancel en 24 de Febrero 2016, 09:15
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