Usando JavaScript en Gambas3: Creación de gráficas

Usando JavaScript en  Gambas3: Creación de gráficas

Gambas3, posee un componente llamado gb.gt4.webkit, que nos proporciona un nuevo control llamado WebView. Este control es capaz de cargar paginas web, incluso ejecutar javascript.


Os traigo dos ejemplo2 de creación de gráficas, mediante javascript, y uso de la libreria Chart.js y Chart.js.legent, que es capaz de representar gráficas.

ejemplo 1

Ahora otro ejemplo, para hacer una gráfica usando datos de una base de datos Sqlite3:

ejemplo 2

Código Fuente:
ejemplo 1: gráficas
ejemplo 2: gráficas a partir de una base de datos sqlite3

Nota:
3/03/2014:
Otro ejemplo realizado por Shordi en www.gambas-es.org: Ejemplo De Gráficos De Tarta, Donut Y Barras Utilizando La Librería JsChart A Partir De Una Tabla O Consulta.

Fuentes:
http://www.gambas-es.org/viewtopic.php?f=5&t=3665&start=0

https://github.com/nnnick/Chart.js

https://github.com/bebraw/Chart.js.legend/

Ploticus: herramienta para hacer gráficas

Ploticus: 

Herramienta para hacer gráficas 

Seguramente muchos conoceréis a gnu plot ( http://www.gnuplot.info/ ), como herramienta libre  para realizar gráficas de todo tipo. Pero buscando por internet y foros, encontré a Ploticus, que es más simple de usar, con bastantes tipo de gráficas y nos puede servir también.

Podéis ver en su galería de ejemplos, todo tipo de gráficos y sus códigos fuentes de como hacerlos:

• http://ploticus.sourceforge.net/gallery/index.html
• http://ploticus.sourceforge.net/doc/prefab_gallery.html

Ejemplo de uso: Gráfica de Resultados De Alumnos

Yo me he hecho mi propia gráfica con datos a partir de un ejemplo (http://ploticus.sourceforge.net/gallery/students.htm)  

Nota:

En azul pongo los datos que he modificado del ejemplo original.

Código fuente: (archivo examenes.txt,  se describe el tipo de gráfica y lleva incluido los datos)

#set COLORLIST = red,yellow,blue,green,orange,pink,black,white
// added scg 8/4/04.. allows spaces to be represented using underscores..
#proc settings
  encodenames: yes
#proc page
pagesize: 7 4
#if @DEVICE in gif,png
  scale: 1
#endif
#proc getdata
fieldnameheader: yes
#intrailer // get data from end of this file
#endproc   //necessary in order to do the following computation involving NRECORDS
// compute XMAX (number of records+1 for bar graphs)
#set XMAX = $arith(@NRECORDS+1)
// set up area
#proc areadef
title: Grafica de Resultados
rectangle: 1 1 6 3
xrange: 0 @XMAX
yrange: 0 100   // no way currently to do autorange on variable # of fields
xaxis.stubs: datafield=1
xaxis.label: Estudiantes
yaxis.stubs: inc 10
yaxis.label: Puntuacion
// initialize loop variables
#set I = 3
#set NCLUST = $arith(@NFIELDS-2)
// start loop
#loop
  // set vars for this iteration
  #set FNAME = $fieldname(@I)   // this function is new
  #set ICLUST = $arith(@I-2)
  #set COLOR = $nmember(@ICLUST,@COLORLIST)
  // do bars
  #proc bars
  lenfield: @I
  cluster: @ICLUST / @NCLUST
  color: @COLOR
#hideund
  legendlabel: @FNAME
#showund
  barwidth: 0.1
  // update I and see if time to stop..
  #set I = $arith(@I+1)
  #if @I > @NFIELDS
    #break
  #endif
#endloop
// slap on the legend
#proc legend
format: singleline
location: 1 0.5
sep: 0.5
// here's the data
#proc trailer
data:
id group Aprobados Suspensos Matricula IndeExam_d
Julio N 44 45 71 89
Eva N 56 44 54 36
Jorge B 46 63 28 87
Isa B 42 28 39 49
Manuel B 52 74 84 66

Para crear la imagen, en la terminal escribimos:

• $ploticus -png examenes.txt

Y se crea un archivo de imagen tipo .png con el nombre: out.png

Saludos


Fuente: http://ploticus.sourceforge.net/doc/welcome.html

Ejemplo de uso de Arbol Binario: El juego de Preguntas y Respuestas

Árbol Binario:

Preguntas y Respuestas

Os traigo en esta ocasión un ejemplo de uso de árbol binario, en gambas 3.2.

Se trata del conocido juego Preguntas/Respuestas.  Donde el programa intenta adivinar la cosa o animal que piensas haciéndote preguntas, y dándote la posible respuesta.  Y sino, "aprenderá" para que la próxima vez sea capaz de responderte correctamente.

También es capaz de mostrarte, los datos, en forma de gráfico, para que veas como se están "estructurando" las preguntas y respuestas

Enlace de descarga:

Ejecutable .gambas version Gambas3.2

Codigo Fuente

Nota:
Para representar los gráfico, debes de tener instalado el programa  graphviz 
vease la entrada de http://jsbsan.blogspot.com.es/2012/07/dotgambas-diagramas-de-tus-programas.html

Aqui os dejo un video para que veais como se usa:

Fuentes:
http://www.graphviz.org/Home.php
http://www.gulic.org/almacen/httlaclwp/chap20.htm

DotGambas: Diagramas de tus programas

DotGambas

Es un programa que lee tu proyecto  en Gambas3 y genera un diagrama informado de los formularios, módulos, clases, funciones, subrutinas , propiedades que usa tu programa y dibuja flechas para indicar las relaciones entre cada uno.

El programa utiliza varios algoritmos para dibujar los diagramas
            - dot
            - fdp
            - osage

Y los ficheros que genera son: (los crea en la carpeta /tmp)
            - grafico.txt: es un fichero de texto plano con la definición del gráfico
            - grafico.png: fichero grafico que lo puedes ver con cualquier visor.
            - grafico.svg: fichero .svg, que lo puedes editar con inkscape

Te enseño un ejemplo:

Leyenda:
     Rectángulo: Son funciones indicando el tipo de valor que devuelve.
     Pentágonos: Son subrutinas o métodos
     Cuadrilátero: Propieades
     Elipse: hace referencia a una clase, formulario o modulo
   
     Flechas: Indican llamadas a subrutinas o funciones
     Flecha Doble Roja-Azul: llamadas a instancias a clases o formularios

Notas:

a) Los archivos que se generan estan en el directorio: /tmp

Se crean dos:

   - grafico.txt

   - grafico.png o grafico.svg (segun la opción elegida)

b) Para crear los graficos debes de tener instalado el programa graphviz

     En ubuntu y derivadas:

              sudo apt-get install graphviz

c) Para editar los archivo .svg, debes de tener instalado el programa inkscape

    En ubuntu y derivadas:

              sudo apt-get install inkscape

d) Dependiendo de la complejidad del proyecto, algunos algoritmos dan problemas al crear el resultado gráfico (ya sea .png o .svg)


Enlace de descarga: DotGambas. version 0.0.4

Enlaces interesantes:
Pagina web de graphviz:  http://www.graphviz.org/Home.php
Pdf. donde se explica como funciona dot: http://www.graphviz.org/pdf/dotguide.pdf