{"id":2286,"date":"2014-05-19T06:25:56","date_gmt":"2014-05-19T06:25:56","guid":{"rendered":"http:\/\/10.1.1.67:8116\/2015\/07\/28\/345-revision-v1\/"},"modified":"2023-10-11T09:36:00","modified_gmt":"2023-10-11T09:36:00","slug":"herramientas-para-la-visualizacion-de-datos-monitorizados","status":"publish","type":"post","link":"https:\/\/fractaliasystems.com\/en\/herramientas-para-la-visualizacion-de-datos-monitorizados\/","title":{"rendered":"Herramientas para la visualizaci\u00f3n de datos monitorizados"},"content":{"rendered":"<p>En los \u00faltimos a\u00f1os se ha producido una enorme <b>proliferaci\u00f3n de datos en bruto<\/b> que deben de ser procesados y preparados de una forma comprensible y visualmente atractiva para el usuario final.<\/p>\n<p>La mayor\u00eda de estas representaciones se integran en servicios web, y de muchas de ellas se espera que sean interactivas. Esto supone que el lenguaje de programaci\u00f3n utilizado en muchas ocasiones sea JavaScript y que los datos a tomar en muchos ocasiones, en formatos JSON.<\/p>\n<p>Desde Fractalia, hemos desarrollado un estudio de las principales herramientas que crean visualizaciones de datos. <!--more-->En este post, exponemos los resultados del an\u00e1lisis del estado del arte del software o librer\u00edas que permiten el desarrollo de un visualizador de gr\u00e1ficos.<\/p>\n<p>1.-<b> jqPlot <\/b><a href=\"http:\/\/www.jqplot.com\/\">http:\/\/www.jqplot.com\/<\/a><\/p>\n<p>Librer\u00eda escrita en JQuery<b> <\/b>y Javascript que utiliza el elemento Canvas para representar del lado del cliente gr\u00e1ficos din\u00e1micos por medio de programaci\u00f3n. Esta librer\u00eda destaca sobre todo por sus posibilidades y por ser el software que da opciones m\u00e1s avanzadas para generar gr\u00e1ficas y de modificaci\u00f3n din\u00e1mica. Por ejemplo, presenta hasta 9 ejes Y, adem\u00e1s permite introducir fechas en los ejes personalizables.<\/p>\n<p>Entre sus ventajas podemos destacar la versatilidad para la representaci\u00f3n gr\u00e1fica. Tambi\u00e9n consideramos importante destacar que se trata de un <b>software gratuito y de c\u00f3digo abierto<\/b>.<\/p>\n<p>Por otro lado, el principal inconveniente que se ha identificado de este software, es que bajo nuestro punto de vista est\u00e9tico la herramienta presenta gr\u00e1ficos visualmente menos atractivos y desde el punto de vista t\u00e9cnico, no ofrec\u00eda los mejores resultados frente a la versatilidad buscada.<\/p>\n<p>Un ejemplo de representaci\u00f3n gr\u00e1fica de jqPlot puede ser la siguiente.<\/p>\n<p><a href=\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/Ejemplo-representaci\u00f3n-gr\u00e1fica-con-librer\u00eda-gr\u00e1fica-jqPlot.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-382 aligncenter\" src=\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/Ejemplo-representaci\u00f3n-gr\u00e1fica-con-librer\u00eda-gr\u00e1fica-jqPlot.png\" alt=\"Ejemplo representaci\u00f3n gr\u00e1fica con librer\u00eda gr\u00e1fica  jqPlot\" width=\"524\" height=\"311\" \/><\/a><\/p>\n<p>2.-<b style=\"line-height: 1.5;\"> Highcharts <\/b><a style=\"line-height: 1.5;\" href=\"http:\/\/www.highcharts.com\/products\/highcharts\">http:\/\/www.highcharts.com\/products\/highcharts<\/a><\/p>\n<p>Biblioteca de gr\u00e1ficos escritos en JavaScript puro que ofrece una forma f\u00e1cil de a\u00f1adir gr\u00e1ficos interactivos a su sitio web o aplicaci\u00f3n web, basada en JQuery por lo que permite generar todo tipo de Charts.<\/p>\n<p>Funciona en todos los navegadores modernos, incluyendo el <b>iPhone \/ iPad<\/b> e Internet Explorer desde la versi\u00f3n 6. Se basa \u00fanicamente en tecnolog\u00edas de navegaci\u00f3n nativas que no requieren plugins secundarios del lado del cliente como Flash o Java.<\/p>\n<p>Una de las caracter\u00edsticas clave de Highcharts es que permite a los desarrolladores descargar el c\u00f3digo fuente y hacer sus propias ediciones. Esto permite modificaciones personales y una gran flexibilidad.<\/p>\n<p>Sin duda, se trata del software de <b>representaci\u00f3n gr\u00e1fica muy resolutivo<\/b>, de hecho, ha sido empleado para la representaci\u00f3n de par\u00e1metros ambientales prevenientes de una red de sensores de algunos programas comerciales que ya est\u00e1n en el mercado.<\/p>\n<p>El inconveniente que presente es que aunque existe una versi\u00f3n libre para aplicaciones no comerciales, es necesario contratar licencias de un coste m\u00ednimo de 90 $.<\/p>\n<p>Un ejemplo de representaci\u00f3n gr\u00e1fica realizara por Highcharts es:<\/p>\n<p><a href=\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/Ejemplo-representaci\u00f3n-gr\u00e1fica-con-librer\u00eda-gr\u00e1fica-Higchars.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-383 aligncenter\" src=\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/Ejemplo-representaci\u00f3n-gr\u00e1fica-con-librer\u00eda-gr\u00e1fica-Higchars.png\" alt=\"Ejemplo representaci\u00f3n gr\u00e1fica con librer\u00eda gr\u00e1fica  Highchars\" width=\"905\" height=\"414\" \/><\/a><\/p>\n<p><span style=\"line-height: 1.5;\">3.-\u00a0<\/span><b style=\"line-height: 1.5;\">jqWidgets <\/b><a style=\"line-height: 1.5;\" href=\"http:\/\/www.jqwidgets.com\/jquery-widgets-demo\/demos\/jqxchart\/\">http:\/\/www.jqwidgets.com\/jquery-widgets-demo\/demos\/jqxchart\/<\/a><\/p>\n<p>Visualizador gr\u00e1fico f\u00e1cil de usar. Basado en la librer\u00eda jQuery. Escrito 100% en JavaScript y utiliza los est\u00e1ndares del W3C como HTML5, CSS y SVG.<\/p>\n<p>Este software ofrece un \u00f3ptimo rendimiento en la representaci\u00f3n y visualizaci\u00f3n de alta calidad en todos los navegadores y dispositivos (PCs, ordenadores port\u00e1tiles, tabletas y tel\u00e9fonos m\u00f3viles). Detecta autom\u00e1ticamente las funciones del explorador y utiliza SVG o HTML5. Adem\u00e1s de admitir datos de tipo XML, CSV, TSV, JSON Y JSONP.<\/p>\n<p>jqWidgets se presenta como el \u00faltimo conjunto de herramientas de interfaz de usuario para la pr\u00f3xima generaci\u00f3n de desarrollo de aplicaciones de nube y se construyen enteramente en est\u00e1ndares y tecnolog\u00edas como HTML5, CSS, JavaScript y jQuery abiertos.<\/p>\n<p>El principal inconveniente que identificaos es que no es un visualizador gratuito.<\/p>\n<p>Un ejemplo de representaci\u00f3n gr\u00e1fica realizara por jqWigdets puede ser:<\/p>\n<p><a href=\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/Ejemplo-representaci\u00f3n-gr\u00e1fica-con-librer\u00eda-gr\u00e1fica-XX.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-384 aligncenter\" src=\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/Ejemplo-representaci\u00f3n-gr\u00e1fica-con-librer\u00eda-gr\u00e1fica-XX.png\" alt=\"Ejemplo representaci\u00f3n gr\u00e1fica con librer\u00eda gr\u00e1fica  jqWigdets\" width=\"689\" height=\"407\" \/><\/a><\/p>\n<p>4.-\u00a0<b>Kendo UI <\/b><a href=\"http:\/\/www.telerik.com\/kendo-ui\">http:\/\/www.telerik.com\/kendo-ui<\/a><\/p>\n<p>Librer\u00eda JavaScript para el desarrollo de aplicaciones web enriquecidas del lado del cliente, con diversas interfaces de usuario din\u00e1micas basadas en jQuery, con una incre\u00edble visualizaci\u00f3n de datos empleando HTML5.<\/p>\n<p>Kendo es un paquete de librer\u00edas listas para usar por los desarrolladores en p\u00e1ginas web din\u00e1micas enteramente realizadas con JavaScript y basadas en jQuery. Sin duda su fuerte son las interfaces de usuarios listas para incorporar en los proyectos web.<\/p>\n<p>La variedad de componentes para interfaces de usuario de kendo UI incluye men\u00fas din\u00e1micos, gr\u00e1ficas, paneles, ventanas, sistemas de upload de archivos, etc. En total son 13 tipos de distintos de widgets altamente personalizables y con funcionalidades realmente avanzadas.<\/p>\n<p>Adem\u00e1s esta librer\u00eda es compatible con todos los navegadores. De esta forma, tanto las funcionalidades del framework como los distintos widgets, corren perfectamente en Internet Explorer (desde la IE7 en adelante), Chrome o Firefox, tanto en los navegadores m\u00f3viles en plataformas como <b>iOS y Android.<\/b><\/p>\n<p>El principal inconveniente de este software es que aunque ya no est\u00e1 en versi\u00f3n Beta, <b>todav\u00eda no es totalmente estable<\/b>, por lo que de forma habitual se publican nuevas versiones sobre el mismo. Adem\u00e1s para emplearlo, es necesario adquirir una licencia comercial.<\/p>\n<p>Un ejemplo de representaci\u00f3n gr\u00e1fica realizara por Kendo UI puede ser:<\/p>\n<p><a href=\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/Ejemplo-representaci\u00f3n-gr\u00e1fica-con-librer\u00eda-gr\u00e1fica-Kendo-UI.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-385 aligncenter\" src=\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/Ejemplo-representaci\u00f3n-gr\u00e1fica-con-librer\u00eda-gr\u00e1fica-Kendo-UI.png\" alt=\"Ejemplo representaci\u00f3n gr\u00e1fica con librer\u00eda gr\u00e1fica  Kendo UI\" width=\"984\" height=\"510\" \/><\/a><\/p>\n<p><span style=\"line-height: 1.5;\">5.-\u00a0<\/span><b style=\"line-height: 1.5;\">Flot <\/b><a style=\"line-height: 1.5;\" href=\"http:\/\/www.flotcharts.org\/\">http:\/\/www.flotcharts.org\/<\/a><\/p>\n<p>Biblioteca JavaScript con un aspecto simple y atractivo que presenta caracter\u00edsticas interactivas.<\/p>\n<p>Se trata de una librer\u00eda gratuita y de c\u00f3digo abierto. Adem\u00e1s esta librer\u00eda se encuentra en la <b>comunidad de software libre GitHub<\/b>, considerada como la mayor anfitriona de c\u00f3digo del planeta, con m\u00e1s de 9,6 millones de repositorios. Se trata de una comunidad muy activa, muy acta para el desarrollo de proyectos novedosos.<\/p>\n<p>La navegabilidad es posible tanto en Internet Explorer, Chrome o Firefox como en navegadores m\u00f3viles en plataformas como <b>iOS y Android<\/b>. Por \u00faltimo, la inserci\u00f3n de datos se efect\u00faa con formato JSON. Adem\u00e1s consideramos que la manipulaci\u00f3n del c\u00f3digo es intuitiva y sencilla comprada con otros software analizados.<\/p>\n<p>Un ejemplo de representaci\u00f3n gr\u00e1fica realizara por Flot puede ser:<\/p>\n<p><a href=\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/Ejemplo-representaci\u00f3n-gr\u00e1fica-con-librer\u00eda-gr\u00e1fica-Flot.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-386 aligncenter\" src=\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/Ejemplo-representaci\u00f3n-gr\u00e1fica-con-librer\u00eda-gr\u00e1fica-Flot.png\" alt=\"Ejemplo representaci\u00f3n gr\u00e1fica con librer\u00eda gr\u00e1fica  Flot\" width=\"869\" height=\"467\" \/><\/a><\/p>\n<p>De entre las herramientas de visualizaci\u00f3n de datos analizadas, destacamos la herramienta de software gratuito <b>Flot<\/b>, dada la facilidad en\u00a0 el manejo de la misma, as\u00ed como por tratarse de una herramienta con navegabilidad tanto en PC como en tablets y smartphones y con respecto a las librer\u00edas de pago destacamos <b>Highcharts<\/b>, por la calidad de sus gr\u00e1ficas y por tratarse de una soluci\u00f3n multidispositvo.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En los \u00faltimos a\u00f1os se ha producido una enorme proliferaci\u00f3n de datos en bruto que deben de ser procesados y preparados de una forma comprensible y visualmente atractiva para el usuario final. La mayor\u00eda de estas representaciones se integran en servicios web, y de muchas de ellas se espera que sean interactivas. Esto supone que<br \/><a href=\"https:\/\/fractaliasystems.com\/en\/herramientas-para-la-visualizacion-de-datos-monitorizados\/\" class=\"more\">Read more<\/a><\/p>\n","protected":false},"author":2,"featured_media":-1,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-2286","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-it-fractalia"],"_links":{"self":[{"href":"https:\/\/fractaliasystems.com\/en\/wp-json\/wp\/v2\/posts\/2286","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fractaliasystems.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fractaliasystems.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fractaliasystems.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/fractaliasystems.com\/en\/wp-json\/wp\/v2\/comments?post=2286"}],"version-history":[{"count":1,"href":"https:\/\/fractaliasystems.com\/en\/wp-json\/wp\/v2\/posts\/2286\/revisions"}],"predecessor-version":[{"id":7147,"href":"https:\/\/fractaliasystems.com\/en\/wp-json\/wp\/v2\/posts\/2286\/revisions\/7147"}],"wp:attachment":[{"href":"https:\/\/fractaliasystems.com\/en\/wp-json\/wp\/v2\/media?parent=2286"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fractaliasystems.com\/en\/wp-json\/wp\/v2\/categories?post=2286"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fractaliasystems.com\/en\/wp-json\/wp\/v2\/tags?post=2286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}