|
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> |
- También puedes insertar la información de un archivo.
- Creas un archivo llamado archivo.txt con este contenido: 8,6,12,3,9,2
- Lo Subes al assets.
- Pones un componente Archivo y lo cargas mediante nombreDeArchivo: //archivo.txt
______________________________________
- Enviamos los datos mediante un archivo.txt y los elementos del eje X:
[Enero, Febrero, Marzo, Abril, Mayo, Junio]
- Mediante la barra vertical separamos los meses de los datos.
- En el código obtenemos etiquetas y datos.
jlineas2.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 recibidos = window.AppInventor.getWebViewString() ;
recibidos = recibidos.split("|");
var etiquetas = recibidos[0].split(",");
var datos = recibidos[1].split(",");
var ctx = document.getElementById("canvas");
var myChart = new Chart(ctx, {
type: 'line',
data: {
// labels: ["January","February","March","April","May","June"],
labels: etiquetas,
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> |
- Otra opción que podemos contemplar es poner las dos variables en el mismo archivo, es decir en archivo.txt
a,8
b,6
c,12
d,3
e,9
f,2
- Separamos los valores x,y
_________________
- 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.
__________________________________
|
