¿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.
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.
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:
Cargando...
Artículos recientes
-
-
Cartelera Cinemex en tu celular con Windows Phone
26 junio 2013
