Gráficos en ASP.NET: Línea/Torta/Radial/otros (free y comerciales) … en HTML/CSS, Imágenes, Javascript, Flash y Silverlight

He aquí un simple pero extenso listado de componentes para insertar gráficos en ASP.NET, pero no solo queda ahí sino también para insertar gráficos en paginas HTML mediante Javascript, Flash, Silverlight y hasta con puro CSS.
Hace bastante tenia este post en "borrador" hasta que un amigo virtual (eso que uno gana en los newsgroup y foros) Javier Santamaría me dio pie para postearlo por aquí para tenerlos de referencia.
También por que en estos días mi amiga Gabriela  necesitaba mostrar sus datos de su sistema de encuesta, retome de nuevo este post.

Al mejor estilo de listado como de articulo anterior:
            Manuales, libros, enlaces sobre ASP.NET 2.0

Aquí se viene un recopilación de componentes para crear gráficos en ASP.NET…algunos son componentes del lado del servidor que nos ayudan a renderizar en gráficos de imagen, Javascript , Flash y/o Silverlight

El orden aquí no es importante, es decir no es que recomiendo el primero de cada lista. Solo que asi ya quedo guardado mientras lo iba completando al post. Para cada caso particular y como el desarrollador se sienta mas "comodo/a gusto" y por supuesto los requerimientos del usuario final.

NOTA: Si deseas insertar otro mas… escríbeme un comentario

FREE

  • Microsoft Chart Controls for Microsoft .NET Framework 3.5
  • WebChart – Free Chart control for ASP.NET (renderiza en imagen png, jpg, gif)
  • Logi Report 
  • ASP.NET Resource Kit (aqui venían componente comerciales con licencia free, habia que registrarse, pero ya quedo en la historia. No están disponibles los enlaces)
  • Reports Starter Kit (ejemplo de graficos como imagen para utilizar)
  • Nplot – Free charting library for .NET (para asp.net y para winform)
  • WebChart: Roll your own ASP.NET Chart Control (CodeProject)
  • ZedGraph. (Recomendación de Javier Santamaría)
  • Basados en Flash:
    • FusionCharts Free v2 (gráficos en Flash y XML, no es un componente)
    • amCharts (graficos en Flash, componente para ASP.NET)
    • Open Flash Chart y ASP.NET (en Flash)
    • Gráficas Flash para todos. Basados en XML y Flash (free)
    • XML/SWF Charts
  • Basados en Silverlight
    • VISIfire. Open Source Data Visualization Component
    • Silverlight Toolkit
    • Silverlight 2.0 Pie Chart (Beta)
  • Basados en javascript:
    • jQuery: fgCharting
    • jQuery: jqChart
    • jQuery: Sparkline . Incrustar pequeños graficos inline
    • jQuery: Flot. Flot is a pure Javascript plotting library for jQuery.
    • Emprise JavaScript Charts. La versión personal es free
    • PlotKit – Javascript Chart
    • AjaxMGraph (XHTML y CSS)
    • WebFx Chart
  • Basados en CSS:
    • Dynamic Pie Chart with CSS
    • SAC Simple Accessible Charts
    • CSS for bar graph
    • Bar Chart with CSS
  • Frameworks para graficar en web
    • Google Chart API
    • Google Visualization API Gallery
    • Yahoo! UI Library: Charts
  • Mas componentes para graficar
    http://www.asp.net/community/control-gallery/browse.aspx?category=7

 

 

MANUALMENTE ("artesanalmente")

Utilizando System.Drawing…

 

COMERCIALES

  • Dundas Charts
  • ComponentoONE
  • ChartDirector for .NET.
  • Nevron Chart for .NET
  • Infragistics
  • .netCHARTING
  • Office Web Components (COM)
  • Software Siglo XXI team 
  • RChart 2.1 for .NET

 

…con mas detalle…

 

FREE

 


  • Microsoft Chart Controls for Microsoft .NET Framework 3.5

Por fin Microsoft saca su propio componente de controles (mmm! es Dundas Chart por si te parece conocida la interfaz)… todavía no lo utilice. Hace un par de días nos comentaba elBruno en este articulo:

Ejemplos: Samples Environment for Microsoft Chart Controls (ASP.NET y Winform)
Algunos enlaces:

 

  • WebChart – Free Chart control for ASP.NET

 

  • Logi Report


Reportes basados en XML. Interesante herramienta para generar reportes y exportarlos a muchos formatos (Excel, Word, CSV, HTML y PDF), y poder tener acciones/eventos a una fila/encabezado o reporte completo. Podemos generar a partir de un template de PDF o Excel.
Integración con .NET/J2EE, ASP.NET

Logi Report

Requerimientos:

  • Microsoft Internet Information Server (IIS)
  • Microsoft .NET Framework
  • MDAC 2.7 or higher (Windows 2003 has MDAC 2.8 preinstalled)
  • ODBC or OLEDB compliant database (such as MSDE, SQL server, or Oracle) connectivity

 

  • ASP.NET Resource Kit

Aquí ya toco de oído, porque este enlace en alguno momento lo comentaron los newsgroups. Ahora no funciona, lo dejo por aqui para “recordarlo”.
Un poco de historia….
No se si esto servirá para asp.net 2.0, pero bueno lo dejo por aqui para que si alguien lo lee conozca que algunas vez teniamos componentes comerciales free!! (ComponentOne Studio for ASP.NET, Infragistics WebGrid part of NetAdvantage 2004, IP*Works! CC ICharge Component, Sax.net Security for ASP.NET, telerik r.a.d.rotator and r.a.d. spell components.)
ASP.NET Resource Kit trae el ComponentOne Studio for ASP.NET con licencia, pero hay que registrarse (y la web para registrarse ya no funciona)
http://msdn.microsoft.com/asp.net/asprk/ >> este enlace ya no funciona ;( ahora es aquí (un poco mas largo)
http://www.microsoft.com/downloads/details.aspx?FamilyID=aef6aa76-ab88-4264-87b4-8e946ef584d7&displaylang=en

 

 

  • Reports Starter Kit

(Esto lo aporto el gran Juan T. Llibre) Aquí  dentro tenemos ejemplos de gráficos… parece que amándolo artesanalmente. Pero podemos aprovechar el ejemplo para nuestros proyectos.
http://www.asp.net/StarterKits/DownloadReports.aspx?tabindex=0&tabid=1
image

 

  • Nplot – Free charting library for .NET

image

Esto lo vi pero nunca lo llegue a probar tanto para ASP.NET como para Winform.
http://netcontrols.org/nplot/wiki/

Estadísticas de su utilización(Febrero 2008) http://www.scimatic.com/?q=node/229 

 

image image image image

 

  • WebChart: Roll your own ASP.NET Chart Control (Codeproject)

Es un poco antiguo el articulo Junio/2003, pero por ahí puede alguien modificar para utilizarlo en proyectos de ASP.NET 2.0
Url: http://www.codeproject.com/KB/custom-controls/webchart.aspx
image image

 

 

  • ZedGraph

URL: http://zedgraph.org/wiki/index.php?title=Main_Page
Articulo en CodeProject: A flexible charting library for .NET (by JChampion)

image image image image  image

 

  • FusionCharts Free v2

Aqui hay que escribir un poco de XML, ya que los gráficos son película flash que hay que enviarles los datos y configuración mediante un xml, ya sea por querystring, o por flashvar. O sea no esta integrado a nuestor IDE, pero nos brinda de un modo sencillo poder incrustar gráficos rápidamente.

 

 

  • amCharts

Al igual que el anterior paquete, amChart renderiza con una película flash, que podemos cargarla desde un xml, dentro de la misma pagina, o recuperarlo desde un url diferente, logrando así que nuestro gráfico sea dinámico y muy estilizado.
Aqui si existe un componente para ASP.NET para manipularlo desde el codigo, para no estar generando esos lindos tag de xml, y para enlazarlos a nuestros proveedores de datos.

 

 

 

  • Open Flash Chart y ASP.NET

Basados en un articulo en buayacorp, sobre estas dos tecnologías.
Url del articulo: http://www.buayacorp.com/archivos/graficos-con-open-flash-chart-y-aspnet/
Open Flash: http://teethgrinder.co.uk/open-flash-chart/
Open Flash Librería para .NET: http://teethgrinder.co.uk/open-flash-chart/dot-net.php
(existen para Java, Perl, Python, Ruby and Rails y PHP…)
image image image
Solución en Visual Studio 2008 (del articulo de Alex en buayacorp)

 

 

  • Gráficas Flash para todos

XML y Flash.. listo para utilizar
URL: http://www.soitu.es/soitu/2008/03/25/met/1206461193_108279.html
image image

 

  • XML/SWF Charts

XML y Flash.. listo para utilizar
URL: http://www.maani.us/xml_charts/index.php
Licencia: http://www.maani.us/xml_charts/index.php?menu=License
 

image

 

 

  • VISIfire. Open Source Data Visualization Component (Powered by Microsoft Silverlight)

URL: http://www.visifire.com/
Galeria: http://www.visifire.com/silverlight_charts_gallery.php
Licencia: http://www.visifire.com/license.php (Tiene licencia dual, tanto Open Source GPL 3.0 o Comercial)

image

 

 

  • Silverlight Toolkit

image Aqui podemos tener acceso a multiples add-ins que son controles para Silverlight

URL: http://www.codeplex.com/Silverlight/
Charting: http://www.codeplex.com/Silverlight/Wiki/View.aspx?title=Silverlight%20Toolkit%20Overview%20Part%202&referringTitle=Home
image image

  • Silverlight 2.0 Pie Chart

URL: http://petermcg.wordpress.com/2008/05/18/silverlight-20-pie-chart/

image

 

  • jQuery: fgCharting

Aqui podemos visualizar un ejemplo de lo que podemos hacer con este libreria que es un plugin de jQuery, la empresa que nos brinda Filament Group

http://www.filamentgroup.com/lab/creating_accessible_charts_using_canvas_and_jquery/

Alli tambien hay un ejemplo para la descarga

 

  • jQuery: jqChart

Recien por la version 0.1, aqui el ejemplo:
 http://www.reach1to1.com/sandbox/jquery/jqchart/

image

 

  • jQuery: Sparkline

Generar pequeños graficos inline ya sea por incrustación HTML o medinate JS (Sparkline en wikipedia: Es un tipo de informacion grafica que repredenta una simple y condensada manera de visualizar variaciones y comparaciones)
URL: http://omnipotent.net/jquery.sparkline/

Ejemplos:

  • Mouse speed clip_image001
  • Inline clip_image002line graphs clip_image003
  • Bar charts clip_image004 negative values: clip_image005
  • Composite inline clip_image006
  • Inline with normal range clip_image007
  • Composite bar clip_image008
  • Discrete clip_image009
    Discrete with threshold clip_image010
  • Customize size and colours clip_image011
  • Tristate charts clip_image012
    (think games won, lost or drawn)
  • Tristate chart using a colour map: clip_image013
  • Pie charts clip_image014clip_image015clip_image016
  • Bullet charts
    clip_image017
    clip_image018
    clip_image019

 

  • jQuery: Flot

Sencillo para utilizar, lo interesante es la interactividad con el grafico y el zoom

URL: http://code.google.com/p/flot/
Ejemplos: http://people.iola.dk/olau/flot/examples/
image image image

 

  • Emprise Javascript Chart

Muychas propiedades “altamente deseables”: Plugin Free: 100% Pure JavaScript Charting Solution
Interactivo: Hints, Mouse Tracking, Mouse Events, Key Tracking and Events, Zooming, Scrolling, y Crosshairs
Axis Scaling, Auto Zooming, Scrolling, Stackable Series, Multiple Chart Types, Ajax-Driven Data, Customizable

URL: http://www.ejschart.com/
Ejemplos: http://www.ejschart.com/examples/index.php
Licencia: es Free (con algunas restricciones) para uso Personal en un solo sitio
http://www.ejschart.com/pricing.php

  image  image image image image

 

  • PlotKit – Javascript Chart

Framework Javascript para armar gráficos y presentarlos a través de HTML Canvas y SVG vía Adobe SVG Viewer
URL: http://www.liquidx.net/plotkit/
Tutorial: http://media.liquidx.net/js/plotkit-doc/PlotKit.QuickStart.html

image image image

 

  • AjaxMGraph

Basado en Prototype… simple
URL: http://dragan.yourtree.org/code/ajax-mgraph
Un Articulo: http://dragan.yourtree.org/blog/en/2007/03/31/ajax-mgraph/

image image

 

  • WebFx Chart

Interesante metodo de VML en IE o utiliza Canvas o SVG en cualquier otro browser. También tiene una forma de salida a Javascript
URL: http://webfx.eae.net/dhtml/chart/chart.html
Demo: http://webfx.eae.net/dhtml/chart/demo.html

image image image

 

  • Dynamic Pie Chart with CSS

Con imagenes de fondo y CSS…
image
la idea:

<div class="pie size35"></div> 
   <p class="percent">37%</p> 
</div> 


image

 

  • SAC Simple Accessible Charts

CSS.. es decir Accesible, Rapido, no quiere javascript (version basica), Redimensionable,  facil extension…

URL: http://www.grassegger.at/xperiment/sac-simple-accessible-charts-css/

Ejemplo: http://grassegger.at/xperimente/charts-daten-semantik-css/

image

 

  • CSS for bar graph

URL: http://applestooranges.com/blog/post/css-for-bar-graphs/?id=55

image image image

 

 

  • Bar Chart with CSS

URL: http://www.cssplay.co.uk/menu/barchart.html

image image

 

 

  • Google Chart API

Tener graficos rapidamente sin tener compoenentes extraños :), solamente referenciando una URL para obtener la imagen que genera Google por nosotros.

Mediante la URL formateamos los datos que necesita y listo! a utilizarlo

http://code.google.com/apis/chart/

Un articulo anterior Gráficos a la carta: Google Chart API

Componente .NET:

  • Google Visualization API

Aqui hay que escribir un poco de javascript (o encapsularlo en algun componente que lo haga por nosotros) para que Google nos renderice a SVG o VML, y en otros casos en una imagen

Existen tambien algunos graficos que renderizan a Flash.

Interesante es el tipo de consultas que podemos hacer tanto en queryString como en variables en JS ya que todo lo guarda en un Datatable, podemos hacer una consulta a una fuente de datos que se guarde en este objeto (no tiene nada que ver con del DataTable de .NET)

La galeria tiene los graficos tipicos: Area, Lineas, Tortas, Barras, pero tambien se pueden generar Word Cloud, Motion Chart, Panorama Analytics Gadget, Timeline Gadget, Time Series Chart, Gauge, Gantt

 

  • Yahoo! UI Library: Charts

Aqui la idea mediante sencillos js poder crear graficos en Flash

Todavia esta etapa experimental pero es bueno tenerla en mente

URL: http://developer.yahoo.com/yui/charts/ 
Ejemplo: http://developer.yahoo.com/yui/examples/charts/index.html 

[solo para Flash]

Aqui podemos destacar que podemos tener tambien ayuda si estamos desarrollando dentro de Flash ya que nos brindan una seria de componentes (para Flash y para Flex) llamado ASTRA (ActionScript Toolkit for Rich Applications) donde tenemos algo especial para graficos

http://developer.yahoo.com/flash/astra-flash/charts/

 

 

 

 

MANUALMENTE ("artesanalmente")

Manualmente, como siempre digo… "artesanalmente". Lo mas free de todos (hacerlo con nuestros propios dedos) con GDI+ dentro de System.Drawing

Ejemplos:

 

  


 

COMERCIALES

4 comentarios en “Gráficos en ASP.NET: Línea/Torta/Radial/otros (free y comerciales) … en HTML/CSS, Imágenes, Javascript, Flash y Silverlight”

  1. Excelente señor !!!, grandísimo artículo, enhorabuena.

    En sus proyectos, cuáles ha utilizado más y cuáles le parece más fácil de utilizar ?

    Estaría bien recopilar ahora para WinForms, a parte del ReporViewer.

    Gracias y saludos.

  2. Hola amigo, buscando en la web he llegado a tu sitio y debo felicitarte pues has hecho un trabajo muy bueno que ayuda a miles de usuarios.Me gustaria saber si alguna vez has utilizado alguno de estos graficos en proyectos hechos en SharePoint, o si al menos conoces cuales deestos software se pueden integrar con SharePoint MOSS 2007. Gracias!!!

  3. @Miguel angel
    Gracias por felicitaciones, y por los comentarios que hacen crecer a Geeks.ms
    Con respecto a Sharepoint, ultimamente tengo que hacer un proyecto web que se integre a SP y me dio dolores de cabeza el deploy :(, asi que es todo un tema que estoy EMPEZANDO a descubrir.
    No te podria ayudar de mucho.
    Se que por ejemplo hay gráficos que se integran muy cómodamente a listas:

    VISIFIRE
    http://hinsua.blogspot.com/2008/05/visifire-graficos-en-silverlight-para.html

    (esto lo encontre googleando) pero mas de eso no tuve todavía oportunidad de jugar con SP en algún proyecto. Espero que pronto lo puede hacer.

    Saludos

Deja un comentario

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