Lunes, Septiembre 16, 2019

Gráficas, Python, html y javascript, interesante combinación

Gráficas, Python, html y javascript, interesante combinación

En esta última versión de My-Weather-Indicator, al introducir Evolution, que permite ver la evolución del tiempo en las siguientes horas, estuve barajando diferentes alternativas, en lo que a tecnología a emplear se refiere.

En primer lugar, estuve buscando alguna librería, que permitiera de una forma sencilla e intuitiva el poder explotar la potencia de Python combinada con Gtk+ 3.0. Sin embargo, el problema residía en que aquellas que utilizaban Python 3.X no utilizaban PyGObject, y viceversa. Esto me llevó a la idea de desarrollar mi propia librería, aprovechando las posibilidades que ofrece Cairo.

Evidentemente, por falta de tiempo, estuve buscando alguna solución alternativa, que pasara por el empleo de alguna tecnología ya implementada… y caí en una combinación ideal: Python + html + javascript

Dygraphs

Dygraphs es una librería de Javascript que permite realizar gráficos interactivos. Está diseñado para mostrar series de datos que permita al usuario explorar, navegar e interpretarlos.

Características

Algunas de las características de esta librería de Javascript son las siguientes:

  • No necesita del uso de servidores externos o Flash
  • Funciona también con Internet Explorer
  • Se trata de una librería realmente ligera, con capacidad adaptativa (responsive design)
  • Permite mostrar los valores al pasar el ratón sobre el gráfico
  • Permite mostrar bandas de error
  • Tiene zoom interactivo
  • Permite mostrar anotaciones en los gráficos
  • Permite el uso de periodos ajustables
  • Compativle con el API de visualización de Google

Realmente, para el uso inicial que le pensaba dar a esta librería es mas que suficiente, aunque para mi gusto, se queda algo corta en lo que se refiere al diseño de la misma.

Uso

El uso es tan sencillo como incluir el script en la declaración de cabecera de la hoja en cuestión, y en el cuerpo definir los puntos que deben aparecer en el gráfico.


<html>
<head>
<script type="text/javascript"
  src="/dygraph-combined.js"></script>
</head>
<body>
<div id="graphdiv"></div>
<script type="text/javascript">
  g = new Dygraph(
    // containing div
    document.getElementById("graphdiv"),
    // CSV or path to a CSV file.
    "Date,Temperature\n" +
    "2008-05-07,75\n" +
    "2008-05-08,70\n" +
    "2008-05-09,80\n"
  );
</script>
</body>
</html>

Interacción con Python

Para interaccionar con Python, utilizo Webkit. La operación es tan sencilla como asignar a un evento de modificación de título de Webkit la acción a tomar:


        self.viewer = WebKit.WebView()
        self.scrolledwindow1.add(self.viewer)
        self.scrolledwindow1.set_size_request(900,600)
        self.viewer.connect('title-changed', self.title_changed)
        self.viewer.open('file://' + comun.HTML_GRAPH)

Y el siguiente paso es definir la acción a tomar


        def title_changed(self, widget, frame, title):
            if title != 'null':
            self.message_queue.put(title)
            self.work()
        def work(self):
            while Gtk.events_pending():
                Gtk.main_iteration()            
            again = False
            msg = self.web_recv()
            if msg:
                try:
                    msg = from_json(msg)
                    print('This is the message %s'%(msg))
                except:
                    msg = None
                again = True
            if msg == 'exit':
                self.close_application(None)    
        def web_recv(self):
            if self.message_queue.empty():
                return None
            else:
                msg = self.message_queue.get()
                print('recivied: %s'%(msg))
                return msg

De esta forma, el primer paso es enviar la información a html para que la convierta en gráfico:


    data = 'Fecha,Temperature,Humidity\\n' +\
    '2008-05-07,75,20\\n' +\
    '2008-05-08,70,30\\n' +\
    '2008-05-09,80,40\\n'
    self.viewer.execute_script(data)

Conclusiones

Lo cierto es que se trata de una tecnología relativamente sencilla de implementar, sobre todo si tenemos en cuenta que una vez desarrollada, podemos emplearla con todo tipo de páginas. Por ejemplo, en el caso de My-Weather-Indicator, es la misma tecnología que empleo para mostrar los mapas meteorológicos. Sencillo pero muy efectivo.

De cualquier forma, y tal y como mencionaba en la introducción, mi objetivo es desarrollar, una librería en Python en combinación con PyGObject y Cairo, que permita mostrar gráficos, tanto de series como gráficos de tarta y demás de forma sencilla y muy intuitiva. Aunque esto es probable que tenga que esperar algo mas, porque ultimamente se me está acumulando mucho faena

 

Fuente: atareao

Compártelo. ¡Gracias!

 
Grupo Digital de Ayuda! Laboratorio Linux! - Linux para todos.

¿Quién está en línea?

Hay 91 invitados y ningún miembro en línea

Contador de Visitas

10011343
Hoy Hoy 1314
Ayer Ayer 2484
Esta semana Esta semana 1314
Este mes Este mes 42976
Total de Visitas Total de Visitas 10011343

Día con más
visitantes

08-21-2019 : 3737

Gracias por su visita