|     Inicio    |   |         |  |   FOROS      |  |      |      
   Elastix - VoIP B4A (Basic4Android) App inventor 2 PHP - MySQL
  Estación meteorológica B4J (Basic4Java) ADB Shell - Android Arduino
  AutoIt (Programación) Visual Basic Script (VBS) FireBase (BD autoactualizable) NodeMCU como Arduino
  Teleco - Emisora de A.M. Visual Basic Cosas de Windows Webs interesantes
T Búsqueda en este sitio:


.

App inventor 2 en español
Cómo programar los teléfonos móviles con Android
mediante App inventor 2 - Juan Antonio Villalpando

-- Tutorial de iniciación de App Inventor 2 en español --

Volver al índice del tutorial

____________________________

169DD.- Gráficos estadísticos con Google Chart. Visor circular con aguja.

p169DD_googlechart.aia

- En el tutorial anterior: 169D_javascript_graficos.htm vimos cómo construir gráficos estadísticos de tipo tarta, líneas y barras mediante JavaScript.

- Ahora vamos a verlo con Google Chart.

- Google Chrome tiene una API en JavaScript para crear gráficos estadisticos en páginas web.

- Aquí tenemos las páginas de referencia de Google Chrome para tarta, línea y barras:

https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart

https://developers.google.com/chart/interactive/docs/gallery/linechart

https://developers.google.com/chart/interactive/docs/gallery/columnchart

- Otros tipos de gráficos:

https://developers.google.com/chart/interactive/docs/gallery

___________________________
- Archivo.

jgoogle_chart.htm
 
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
    // Juan A. Villalpando
    // kio4.com
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      datos =  window.AppInventor.getWebViewString() ;
      var array  = JSON.parse(datos);

      function drawChart() {
      var data = google.visualization.arrayToDataTable(array);

        var options = {
          title: 'Colores',
          is3D: true,
          colors:['red','cyan','yellow','green','magenta','orange'],
        };

         var chart = new google.visualization.PieChart(document.getElementById('grafico'));        // TARTA
       // var chart = new google.visualization.LineChart(document.getElementById('grafico'));      // LÍNEA
      // var chart = new google.visualization.ColumnChart(document.getElementById('grafico'))   // COLUMNAS
        chart.draw(data, options);
      } 
    </script>
  </head>
  <body>
    <div id="grafico" style="width: 500px; height: 200px"></div>
  </body>
</html>

- Según queramos que el dibujo sea de Tarta, Línea o Columnas, activaremos solamente una de esas tres líneas.

- El orden de colores de los trozos de la tarta es el indicado en colors.

_________________
- Diseño.

- Subimos el archivo google_chart.htm

- En las Propiedades de la Screen1 debe estar marcada ShowListAsJson.

_________________
- Bloques.

_________________
- Comentarios.

- Los números deben entrar en la lista como número, no como cadena, es decir si entraran como CampoDeTexto directo se guardarían así: "7"

- Para que entre como número 7, le he insertado el bloque de dar formato decimal al número.

_________________
- Propuestas.

- Intenta que cada barra tenga un color distinto.

_________________
__________________________________
__________________________________
- Visor circular con aguja.

p169DDD_google_gauge.aia

- Un gauge es un visor circular con aguja.

- https://developers.google.com/chart/interactive/docs/gallery/gauge

- Tiene un molesto parpadeo, pero aquí está por si alguien puede sacarle provecho.

_________________
- Archivo.

jgoogle_gauge.htm
 
<html>
  <head>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
      // Juan A. Villalpando
      google.charts.load('current', {'packages':['gauge']});
      google.charts.setOnLoadCallback(drawChart);
     datos =  window.AppInventor.getWebViewString();

       function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Temp', 80],
        ]);

        var options = {
          width: 400, height: 120,
          redFrom: 90, redTo: 100,
          yellowFrom:75, yellowTo: 90,
          minorTicks: 5
        };

        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

        chart.draw(data, options);
        data.setValue(0, 1, datos);
        chart.draw(data, options);
      }
      </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 120px;"></div>
  </body>
</html>

_________________
- Diseño.

_________________
- Bloques.

 

__________________________________

 
- Mi correo:
juana1991@yahoo.com
- KIO4.COM - Política de cookies. Textos e imágenes propiedad del autor:
© Juan A. Villalpando
No se permite la copia de información ni imágenes.
Usamos cookies propias y de terceros que entre otras cosas recogen datos sobre sus hábitos de navegación y realizan análisis de uso de nuestro sitio.
Si continúa navegando consideramos que acepta su uso. Acepto    Más información