¿Cómo crear gráfica de barras con ASP.NET?

¿Cómo crear gráfica de barras con ASP.NET?

En la gran mayoría de proyectos de desarrollo necesitamos incluir reportes con gráficas, pero eso en este artículo les mostrare un control que estoy desarrollando para crear gráficas, en esta ocasión veremos la gráfica de barras, si tienen alguna sugerencia o encuentran algo que se le pueda agregar, se los agradeceré que me envíen sus comentarios.

Bueno, sin más les muestro su funcionamiento.

Paso 1. Descargar el control.

Paso 2. Agregar el control al cuadro de herramientas. En mi caso la voy agregar en la pestaña “General”, debe aparecer como en la siguiente imagen.

jquery chart with asp.net

Paso 3. Arrastra el control a la página donde va a crear la gráfica. Aparecera la referencia donde registra el control y el control chart.

gráficas con asp.net

Paso 4. Configuramos las siguientes propiedades:

  • TipoGrafica="Bar". Con esto indicamos que se va a crear una gráfica de barras.
  • TipoAnimacion="easeOutQuint". Animación que tendrá la gráfica.
  • FontSize="12". Tamaño de letra de las etiquetas de la gráfica.

El código HTML quedaría de la siguiente manera:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="chart_Default" %>

<%@ Register Assembly="ChartJI" Namespace="DeveloperJI.ChartJI" TagPrefix="JI" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <JI:Chart ID="Chart1" runat="server" TipoGrafica="Bar" TipoAnimacion="easeOutQuint" FontSize="12" Height="310" Width="650" />
    </div>
    </form>
</body>
</html>

Paso 5. Creamos el código de servidor el cual queda como sigue:

'se importa la referencia a la gráfica
Imports DeveloperJI.ChartJI
Partial Class chart_Default
    Inherits System.Web.UI.Page
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        'Creamos una lista, que representa las etiquetas que apareceran en la gráfica
        Dim _etiquetas As New List(Of String)
        'En este caso las etiquetas seran las siguientes:
        _etiquetas.Add("Conjunto 1")
        _etiquetas.Add("Conjunto 2")
        _etiquetas.Add("Conjunto 3")
        _etiquetas.Add("Conjunto 4")
        'Asignamos las etiquetas a la gráfica
        Chart1.Valores = _etiquetas
        'Creamos un lista de tipo INFORMACIÓN que sera donde almacenemos la información de cada serie de la grafica
        Dim strDataSet As New List(Of informacion)
        'asignamos los calores, en este caso se creo una función para llenar la lista de información
        strDataSet.Add(generaDatos("rgba(220,220,220,0.5)", "rgba(220,220,220,1)", 10, 50))
        strDataSet.Add(generaDatos("rgba(151,187,205,0.5)", "rgba(151,187,205,1)", 15, 80))
        strDataSet.Add(generaDatos("rgba(217,112,65,0.5)", "rgba(217,112,65,1)", 10, 100))
        strDataSet.Add(generaDatos("rgba(88,74,94,0.5)", "rgba(88,74,94,1)", 50, 90))
        'Se asignan los valores a la gráfica
        Chart1.Info = strDataSet
    End Sub
    Function generaDatos(fill As String, strokr As String, rnd1 As Integer, rnd2 As Integer) As informacion
        Dim valor2 As New informacion
        'Representa el color de relleno de la barra (Pueden tener transparencia)
        valor2.FillColor = fill
        'Representa el color del borde de la barra (Pueden tener transparencia)
        valor2.StrokeColor = strokr
        'Se crea una lista de tipo string para los valores para cada barra
        Dim objDatos As New List(Of String)
        Dim rng As New Random
        'valores de las barras en este caso con un random
        objDatos.Add(CInt(rng.Next(rnd1, rnd2)))
        objDatos.Add(CInt(rng.Next(rnd1, rnd2)))
        objDatos.Add(CInt(rng.Next(rnd1, rnd2)))
        objDatos.Add(CInt(rng.Next(rnd1, rnd2)))
        rng = Nothing
        valor2.Data = objDatos
        objDatos = Nothing
        Return valor2
    End Function
End Class

Si tienes duda de la implementación o sugerencias envía tus comentarios.

Compartir

Comentarios (7)

  • Aldair Aquino Responder

    Disculpe, y para pasarlo a C# me pudiera apoyar, se lo agradeceria mucho, gracias !!

    Wednesday, May 21, 2014 6:29 AM
  • Aldair Aquino Responder

    Me pudiera apoyar a pasarlo a lenguaje C# , gracias !!

    Wednesday, May 21, 2014 6:31 AM
  • Aldair Aquino Responder

    Bueno ya lo logre pasar, ntp , estaba sencillo !!

    Wednesday, May 21, 2014 6:33 AM
  • Luis Felipe Responder

    Muy buen apunte, muy facil de implementar

    Thursday, February 12, 2015 3:14 PM
    • José Estrada Responder

      Que bueno que te fue facil de implementar

      2/12/2015 3:15:41 PM
  • Katty Responder

    Hola , esta excelente ... Sabes como puedo crear un grafico extrayendo los datos de un archivo txt?

    Wednesday, July 22, 2015 7:03 PM
  • Luis Carlos Responder

    Buenas tardes, adquirí el control de gráficas de barras, que esta muy completo, justo lo que necesitaba, implemente el ejemplo que ustedes muetran en la demo funciona bien. Necesito mostar un gráfico con la informacion de una consulta por medio de un procedimiento almacenado (datatable). Agradezco la ayuda al respecto. Saludos cordiales atte: Luis Carlos, Costa Rica.

    Thursday, June 30, 2016 2:09 PM

Animate deja un comentario!!!

Eres un humano?

Últimos Tweets

Contáctanos

  • Dirección: Plutarco Elias Calles 243, Granjas México, Iztacalco, DF.

  • Teléfono:55-2712-3820 o 55-4164-9484

  • Email: info@developerji.com