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

Estrada Web Group
Administrador
¿Cómo crear gráfica de barras con ASP.NET?

graficas con jquery y javascript

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 artículo:

Más artículos geniales

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla ;