Codigo ASP.Net - Agregar una grafica de datos.

Estuve buscando en Internet alguna solución para poner una pequeña grafica de barras o circular en una de las pantallas, de la aplicación de la empresa. Siempre había usado html para esto, una combinación de Css y las etiquetas de Table,Td y Tr. Pero en esta ocasion decidí que ya era tiempo de usar un verdadero gráfico. Además que si tenía toda la intención de usar un gráfico circular y en definitiva eso no se puede con html.

Existen varios controles comerciales entre ellos .netcharting, fxChart, etc. y de verdad baje la evaluación y me parecieron buenísimos, pero el precio no tanto.

Por ahi baje uno que tiene tiempo que es bastante famosillo y que se puede encontrar en www.carlosag.net llamado WebChart. Lo probe y no me gustó sinceramente no me gustó el tipo de graficos que genera. Es gratuito, muy sencillo y pero se ve muy burdo, asi que lo deseche.

Pero ayer como a eso de las 2:00 am, navegando en mi casa con la red inalámbrica de mi vecino (;)), encontré un maravilloso control. Solo permite dos tipos de gráficos Bar y Pie, pero lo importante es la buena calidad del gráfico que genera: http://www.codeproject.com/aspnet/webchart.asp
El autor del componente es un cuate que se autonombra BLONG.

Hoy me dí a la tarea de implementarlo en mi aplicación, no tiene mucha documentación, es mas, termine leyendo el codigo fuente del control para entender sobretodo las propiedades y los metodos. Pero la verdad es que en solo 20 min, mi aplicación ya tenía graficas (Y).

Creo que me tarde mas en escoger el formato final que en agregarlo. :D
Genera un archivo PNG, con lo cual permite mayor resolucion en el monitor.

Como siempre usé Web Matrix, es asi que el código lo pongo tal cual lo tengo en mi aplicación.

El codigo vb es:

Sub showChart (iD as Integer)
Dim connectionString As String = System.Configuration.ConfigurationSettings.AppSettings("MM_CONNECTION_STRING")
Dim dbConnection As System.Data.IDbConnection = New System.Data.OleDb.OleDbConnection(connectionString)

Dim queryString As String = "SELECT IDStatus....WHERE ID = @iD"
Dim dbCommand As System.Data.IDbCommand = New System.Data.OleDb.OleDbCommand
dbCommand.CommandText = queryString
dbCommand.Connection = dbConnection

Dim dbParam_iDSubasta As System.Data.IDataParameter = New System.Data.OleDb.OleDbParameter
dbParam_iDSubasta.ParameterName = "@ID"
dbParam_iDSubasta.Value = iD
dbParam_iDSubasta.DbType = System.Data.DbType.Int32
dbCommand.Parameters.Add(dbParam_iDSubasta)

dbConnection.Open
Dim dataReader As System.Data.IDataReader = dbCommand.ExecuteReader(System.Data.CommandBehavior.CloseConnection)

Dim sumaPagados as Integer
Dim sumaNoPagados as Integer
While dataReader.Read
Select dataReader("IDStatus")
Case 2, 3 ' se vendio
sumaNoPagados += 1 'vendido y pagado
Case 6 ' se reasigno
sumaNoPagados += 1 'reasignado y pagado
Case 4 'vendido y pagado
sumaPagados += 1 'vendido sin pago
Case 7 'reasignado y pagado
sumaPagados += 1 'reasignado sin pago
End Select
End While
If iD>0 Then
WebChart1.Visible=True
End If
WebChart1.WebChartItems.Add(New WebChartItem("NoPagados",sumaNoPagados,"False"))
WebChart1.WebChartItems.Add( New WebChartItem("Pagados", sumaPagados,"False"))

End Sub

Y en la parte de la pagina:

< blong:WebChart id="WebChart1" title="Gráfica Circular" runat="server" Type="Pie" Visible="False" ShowValues="True" Format="Png" Diameter="Small" >< /blong:WebChart >



Gracias BLONG
Listo!

Comentarios

Anónimo dijo…
Excelente por el dato, tienes un ejemplo de como utilizar graficos de barras??
Anónimo dijo…
hola:
Te paso que cuando los nombre de las leyendas son muy grandes, las palabras se cortan y no se ve ni siquiera el porcentaje
Anónimo dijo…
Hola

existe algun correo donde pudiera escribirte? lo que pasa es que hice lo mismo consulto la base de datos.. agrego las columnas a la grafica.. pero al mostrarlo en la pagina muestra el tipico cuadrito con una X y no se que pueda estar haciendo incorrecto.. mi correo es eury_as2@yahoo.com agradeceria muchisimo si me orientaras.

Entradas más populares de este blog

Yahoo! UI (yui) TabView como menu horizontal.

Truco: usar Firefox en el portal IDSE del IMSS

Visual Web Express Edition con MS Access Membership