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…
- Como generar imágenes en ASP.NET (por Matias Iacono – Publicado Febrero/2006)
http://mvpfiles.spaces.live.com/blog/cns!44A6F6B3589906F1!214.entry - Creación de imágenes en forma dinámica (por Braulio Núñez Lanza – Publicado en Noviembre/2004)
http://www.elguille.info/colabora/puntoNET/bnlbnl_imagenesDinamicamente.htm
- Gráfico tipo Torta (por Adrián Sergio Pulvirenti – Publicado Octubre/2004)
http://www.elguille.info/colabora/puntoNET/adripulvi_graficotorta.htm - ASP.NET Bar Chart Graph (Chris Goldfarb – Publicado en Agosto/2003)
http://www.codetoad.com/asp.net_graph.asp - Generar gráficos dinámicamente
http://www.mistrucos.net/truco-asp-net-generar-graficos-dinamicamente-726_3.htm
- Creating Graphics On-The-Fly with ASP.NET (By Matt Duckhouse) (este ejemplo es
http://www.15seconds.com/issue/020924.htm - Create Snazzy Web Charts and Graphics On the Fly with the .NET Framework (Scott Mitchell) – MSDN Magazine February 2002
http://msdn.microsoft.com/es-es/magazine/cc301375(en-us).aspx
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:
- Datavisualization.Charting.Chart: controles para crear gráficos en .net
http://geeks.ms/blogs/elbruno/archive/2008/10/26/net-datavisualization-charting-chart-controles-para-crear-gr-225-ficos-en-net.aspxEjemplos: Samples Environment for Microsoft Chart Controls (ASP.NET y Winform)
Algunos enlaces:
- Microsoft Chart Controls for Microsoft .NET Framework 3.5
- Microsoft Chart Controls for .NET Framework Documentation
- Microsoft Chart Controls Add-on for Microsoft Visual Studio 2008
- Microsoft Chart Controls for Microsoft .NET Framework 3.5 Language Pack
-
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
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
- Enlaces sobre ASP.NET Resource Kit:
- The ASP.NET Resource Kit Released
http://blogs.msdn.com/yhhuang/archive/2004/02/25/79678.aspx - ASP101: Microsoft Releases the ASP.NET Resource Kit
http://www.asp101.com/articles/john/aspnetreskit/default.asp
- The ASP.NET Resource Kit Released
-
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
-
Nplot – Free charting library for .NET
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
- Enlaces relacionados:
- ASP.NET Charting with NPlot
http://aspnet.4guysfromrolla.com/articles/072507-1.aspx
- ASP.NET Charting with NPlot
-
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
-
ZedGraph
URL: http://zedgraph.org/wiki/index.php?title=Main_Page
Articulo en CodeProject: A flexible charting library for .NET (by JChampion)
-
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.
- Url: http://www.fusioncharts.com/free/
- Ejemplo: http://www.fusioncharts.com/free/GalleryChart.asp?id=14
- Demos: http://www.fusioncharts.com/free/LiveDemos.asp?gMenuItemId=4
- Galería:
http://www.fusioncharts.com/free/Gallery.asp
- Documentación: http://www.fusioncharts.com/free/Docs/?gMenuItemId=19
- Licencia
-
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.
- Ejemplo gráfico de Torta: http://www.amcharts.com/pie/
- Ejemplo gráfico de Líneas: http://www.amcharts.com/line/
- http://www.amcharts.com/line/examples/1/
- Descargar: http://www.amcharts.com/download
- Componente ASP.NET: http://www.amcharts.com/aspnet/
- Otro componente: http://www.asp.net/community/control-gallery/Item.aspx?i=2595 (creo que es el mismo!)
- Licencia: Es free pero tiene un enlace a la web del creador.
- Ejemplo:
-
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…)
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
-
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
-
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)
-
Silverlight Toolkit
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
-
Silverlight 2.0 Pie Chart
URL: http://petermcg.wordpress.com/2008/05/18/silverlight-20-pie-chart/
-
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/
-
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:
-
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/
-
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, CustomizableURL: 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
-
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
-
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/
-
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
-
Dynamic Pie Chart with CSS
Con imagenes de fondo y CSS…
la idea:<div class="pie size35"></div> <p class="percent">37%</p> </div>
-
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/
-
CSS for bar graph
URL: http://applestooranges.com/blog/post/css-for-bar-graphs/?id=55
-
Bar Chart with CSS
URL: http://www.cssplay.co.uk/menu/barchart.html
-
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 utilizarlohttp://code.google.com/apis/chart/
Un articulo anterior Gráficos a la carta: Google Chart API
Componente .NET:
- .NET class library to work with Google Chart API
http://code.google.com/p/ngchart/- Google Chart API controls for Asp.NET
http://www.codeplex.com/GoogleChartNet
-
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 menteURL: 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
MANUALMENTE ("artesanalmente")
Manualmente, como siempre digo… "artesanalmente". Lo mas free de todos (hacerlo con nuestros propios dedos) con GDI+ dentro de System.Drawing
Ejemplos:
- Como generar imágenes en ASP.NET (por Matias Iacono – Publicado Febrero/2006)
Estoy mirando que Matías tiene varios artículos relacionados a imágenes que están recomendados.
http://mvpfiles.spaces.live.com/blog/cns!44A6F6B3589906F1!214.entry
- Creación de imágenes en forma dinámica (por Braulio Núñez Lanza – Publicado en Noviembre/2004)
http://www.elguille.info/colabora/puntoNET/bnlbnl_imagenesDinamicamente.htm - Gráfico tipo Torta (por Adrián Sergio Pulvirenti – Publicado Octubre/2004)
http://www.elguille.info/colabora/puntoNET/adripulvi_graficotorta.htm - ASP.NET Bar Chart Graph (Chris Goldfarb – Publicado en Agosto/2003)
http://www.codetoad.com/asp.net_graph.asp - Generar gráficos dinámicamente
http://www.mistrucos.net/truco-asp-net-generar-graficos-dinamicamente-726_3.htm - Creating Graphics On-The-Fly with ASP.NET (By Matt Duckhouse) (este ejemplo es
http://www.15seconds.com/issue/020924.htm - Create Snazzy Web Charts and Graphics On the Fly with the .NET Framework (Scott Mitchell) – MSDN Magazine February 2002
http://msdn.microsoft.com/es-es/magazine/cc301375(en-us).aspx
COMERCIALES
- Dundas Charts
- ComponentoONE
- ChartDirector for .NET.
http://www.advsofteng.com/cdnet.html - Nevron Chart for .NET
http://www.nevron.com/Charting.aspx?nav=ChartDotNetNav&content=ChartD…
- Infragistics – Powering the Presentation Layer
- .netCHARTING
- Office Web Components (COM)
Esto nunca utilice en producción solo en pruebas, así que desconozco las licencias que se necesitanhttp://support.microsoft.com/?scid=kb;es;315695
http://www.aspnetresources.com/articles/office_web_components.aspx
http://aspnet.4guysfromrolla.com/articles/080603-1.aspx
http://www.aspnetresources.com/blog/owc_object_model_and_terminology.aspx
- Software Siglo XXI team
http://www.softwaresigloxxi.comComponente: Super 2d/3d Graph Library (win/web)
- RChart 2.1 for .NET
http://www.java4less.com/chartsdotnet/chart.php
Impresionante!! sin palabras!! vaya trabajo recopilar toda esa información!!
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.
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!!!
@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