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

Introducció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

1 comentario en “Gráficas, Python, html y javascript, interesante combinación

  1. JE

    desde tiempo aca me cambie a fedora , deje un rato ubuntu , aun tengo un linux mint , pero no se tienes un paquete rpm ? , de esta aplicacion , digo igual y ya es mucho actualizarla y mantenerla pero me da esa curiosidad :B

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *