|     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

____________________________

169D.- JavaScript y gráficos estadísticos. Barra. Línea. Tarta. Chart.

p169D_javascript__graficos.aia

- Vamos ver gráficos estadísticos, escribimos 6 valores numéricos en los Camposdetextos, Pulsamos el Botón y saldrá unos gráficos estadísticos con barras, líneas o círculos, como veremos en este tutorial.

- El proceso de dibujo lo hará los archivos de JavaScript.

___________________________
- Barras.

- Vamos a utilizar el API de esta página:

- http://www.chartjs.org/docs/

- De https://github.com/chartjs/Chart.js bajamos el Chart.js-master.zip, lo descomprimimos en nuestro ordenador.

- NOTA: los archivos necesarios: Chart.bundle.js y utils.js se encuentran en la aplicación de este tutorial, así que no hace falta que los bajes de internet.

- Una vez descomprimido localizaremos el archivo utils.js

            \Chart.js-master\Chart.js-master\samples\utils.js

- También bajaremos un archivo de https://cdnjs.com/libraries/Chart.js/, concretamente bajaremos Chart.bundle.js

https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js

-----------------------------------------------------------------------------------------

- Volvemos a la página de documentación http://www.chartjs.org/docs/ y localizamos este código.

- Las dimensiones del Canvas será las de la pantalla (horizontal), las cambiaremos a:

<canvas id="myChart" width="300" height="100"></canvas>

- Los datos de los valores (data : [12, 19, 3, 5, 2, 3]) están fijos, nosotros los cambiaremos para poderlos modificar desde la aplicación.

- Con el código anterior vamos a crear nuestro archivo barras.htm con JavaScript:

jbarras.htm
<!doctype html>
<html>
<head><meta charset="utf-8">
    <title>Bar Chart</title>
    <script src="Chart.bundle.js"></script>
    <script src="utils.js"></script>
    <style>
    canvas {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
    </style>
</head>

<body>
        <canvas id="myChart" width="300" height="100"></canvas>
<script>
var   datos =  window.AppInventor.getWebViewString() ;
      datos = datos.split(","); 

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
           // data: [12, 19, 3, 5, 2, 3],
           data: datos,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
// Juan Antonio Villalpando
</script>
</body>
</html>

- Fíjate que he puesto los archivos necesarios en la raíz.

<script src="Chart.bundle.js"></script>
<script src="utils.js"></script>

- Estas son las líneas que toman la información enviada desde la aplicación

var datos = window.AppInventor.getWebViewString();
    datos = datos.split(",");

- Así introducimos los datos en la parte de cálculo. Anulo la línea de datos fijos mediante dos //

// data: [12, 19, 3, 5, 2, 3],
data: datos,

_________________
- Diseño.

- El Intervalo del Reloj lo ponemos a 500.

- Subimos los archivos barras.htm, Chart.bundle.js y utils.js

_________________
- Bloques.

_________________
- Gráfico con líneas.

- Añado el archivo lineas.htm para poder ver otro tipo de gráfico, en este caso con dos líneas.

- Los datos de la línea roja los puedo modificar mediante la aplicación, en cambio los de la línea azul están fijos en el archivo lineas.htm

- El Diseño es el mismo que el anterior. Subimos el archivo lineas.htm

- En los Bloques ponemos la dirección de lineas.htm

jlineas.htm
<!doctype html>
<html>
<head><meta charset="utf-8">
    <title>Líneas</title>
    <script src="Chart.bundle.js"></script>
    <script src="utils.js"></script>
    <style>
    canvas {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
    </style>
</head>

<body>
        <div style="width:75%;">
        <canvas id="canvas"></canvas>
    </div>
       
<script>
var   datos =  window.AppInventor.getWebViewString() ;
        datos = datos.split(","); 
        

var ctx = document.getElementById("canvas");
var myChart = new Chart(ctx, {
    type: 'line',
   data: {
                labels: ["January", "February", "March", "April", "May", "June"],
                datasets: [{
                    label: "Variables - Rojo",
                    backgroundColor: window.chartColors.red,
                    borderColor: window.chartColors.red,
                    // data: [65, 59, 80, 81, 56, 55],
                    data: datos,
                    fill: false,
                }, {
                    label: "Fijos - Azul",
                    fill: false,
                    backgroundColor: window.chartColors.blue,
                    borderColor: window.chartColors.blue,
                    data: [12, 10, 4, 11, 3, 9],
                }]
            },
            options: {
                responsive: true,
                title:{
                    display:true,
                    text:'Chart.js Line Chart'
                },
                tooltips: {
                    mode: 'index',
                    intersect: false,
                },
                hover: {
                    mode: 'nearest',
                    intersect: true
                },
                scales: {
                    xAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Month'
                        }
                    }],
                    yAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Value'
                        }
                    }]
                }
        }
});
// Juan Antonio Villalpando
</script>
</body>
</html>

_________________
- Tarta.

- Añado el archivo tarta.htm para poder ver otro tipo de gráfico, en este caso con círculos.

- El Diseño es el mismo que el anterior. Subimos el archivo tarta.htm

- En los Bloques ponemos la dirección de tarta.htm

jtarta.htm
<!doctype html>
<html>
<head><meta charset="utf-8">
    <title>Tarta</title>
    <script src="Chart.bundle.js"></script>
    <script src="utils.js"></script>
    <style>
    canvas {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
    </style>
</head>

<body>
       <canvas id="canvas" width="300" height="100"></canvas>

<script>
var   datos =  window.AppInventor.getWebViewString() ;
        datos = datos.split(","); 
        
var ctx = document.getElementById("canvas");
var myChart = new Chart(ctx, {
    // type: 'doughnut',
    type: 'pie',
       data:{
        labels: [
            "Rojo",
            "Azul",
            "Amarillo",
            "Verde",
            "Violeta",
            "Naranja"
        ],
        datasets: [
            {
                // data: [30, 5, 10, 2, 20, 15],
                data: datos,
                backgroundColor: [
                    "#FF6384",
                    "#36A2EB",
                    "#FFCE56",
                    "#009900",
                    "#FF33FF",
                    "#FF6633"                    
                ],
                hoverBackgroundColor: [
                    "#FF6384",
                    "#36A2EB",
                    "#FFCE56",
                    "#009900",
                    "#FF33FF",
                    "#FF6633"
                ]
            }]
    },
            options: {
            responsive: true,
            legend: {
                display: true
            },
            tooltips: {
                enabled: true,
            }
        }     
});
// Juan Antonio Villalpando
</script>
</body>
</html>

_________________
- Comentarios.

- El proceso de los gráficos es el siguiente:

1.- En el BODY creamos el canvas

<canvas id="canvas" width="300" height="100"></canvas>

- Es importante el nombre, en este caso se llama "canvas" y las dimensiones.

2.- En el SCRIPT indicamos que el canvas irá en el documento (página web)

var ctx = document.getElementById("canvas");

3.- Ponemos el tipo de gráfico, sus datos y sus opciones

var myPieChart = new Chart(ctx,{
type: 'pie',
data: data,
options: options
});

4.- El data y las options podrían ir en apartados separados, pero en este tutorial he puesto todo dentro del Chart.

_________________
- Tarta con elección de etiquetas.

p169D_javascript__graficos_etiquetas.aia

- Vamos a modificar el código anterior para que el usuario además de introducir los valores de los datos numéricos, pueda introducir el nombre de las etiquetas, es decir:

labels:["Rojo","Azul","Amarillo","Verde","Violeta","Naranja"]

- Para ello vamos a añadir seis CamposDeTexto.

_________________
- Diseño.

_________________
- Bloques.

 

jtarta2.htm
<!doctype html>
<html>
<head><meta charset="utf-8">
    <title>Tarta</title>
    <script src="Chart.bundle.js"></script>
    <script src="utils.js"></script>
    <style>
    canvas {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
    </style>
</head>

<body>
       <canvas id="canvas" width="300" height="100"></canvas>

<script>
var   datos =  window.AppInventor.getWebViewString() ;
        partes = datos.split(":"); 
        datos = partes[0].split(","); 
		etiquetas = partes[1].split(","); 
        
var ctx = document.getElementById("canvas");
var myChart = new Chart(ctx, {
    // type: 'doughnut',
    type: 'pie',
       data:{
        labels: etiquetas,
        datasets: [
            {
                // data: [30, 5, 10, 2, 20, 15],
                data: datos,
                backgroundColor: [
                    "#FF6384",
                    "#36A2EB",
                    "#FFCE56",
                    "#009900",
                    "#FF33FF",
                    "#FF6633"                    
                ],
                hoverBackgroundColor: [
                    "#FF6384",
                    "#36A2EB",
                    "#FFCE56",
                    "#009900",
                    "#FF33FF",
                    "#FF6633"
                ]
            }]
    },
            options: {
            responsive: true,
            legend: {
                display: true
            },
            tooltips: {
                enabled: true,
            }
        }     
});
// Juan Antonio Villalpando
</script>
</body>
</html>

_________________
- Comentarios.

- En este caso enviamos

7,4,11,6,9,3:Rojo,Azul,Amarillo,Verde,Violeta,Naranja

- Cuando llega al Script se divide split por :

partes[0] = 7,4,11,6,9,3

partes[1] = Rojo,Azul,Amarillo,Verde,Violeta,Naranja

- Luego creamos el arrays datos y el arrays etiquetas.

- Para crear estos arrays ponemos

datos = partes[0].split(",");
etiquetas = partes[1].split(",");

- Luego en la parte donde estaban las etiquetas

labels: etiquetas,

_________________
- Propuestas.

- Ve al directorio de ejemplos \Chart.js-master\Chart.js-master\samples y adapta otros tipos de gráficos.

- Ve a la documentación y estudia las propiedades de cada tipo de gráfico.

__________________________________

 

- 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