¿Cómo crear gráficas profesionales con ASP.NET?

chart control free for asp.net

Un gráfico o representación gráfica es un tipo de representación de datos, generalmente numéricos, mediante recursos gráficos (líneas, vectores, superficies o símbolos), para que se manifieste visualmente la relación matemática o correlación estadística que guardan entre sí.

Con este control para gráficos con ASP.NET, usted puede hacer gráficas de barras, lineales, circulares y de anillo, es un control que puede instalar en su cuadro de herramientas del visual studio y solo arrastrarlo a la página web donde quiere utilizarlo.

Gráfica de barras: se usa cuando se pretende resaltar la representación de porcentajes de datos que componen un total. Una gráfica de barras contiene barras verticales que representan valores numéricos. Las gráficas de barras son una manera de representar frecuencias; las frecuencias están asociadas con categorías. El objetivo es poner una barra de alto igual a la frecuencia. La gráfica de barras sirve para comparar y tener una representación gráfica de la diferencia de frecuencias o de intensidad de la característica numérica de interés.
Una gráfica lineal usted la puede utilizar para representar series de datos que han sido recolectados en un tiempo específico. Es útil al mostrar tendencias de comportamiento de un evento o proceso (incrementos, decrementos o tendencias sin variación). Permite visualizar cambios que sufren los procesos en un período de tiempo o comparar el desempeño obtenido después de implementar una solución en su sitio web.
Gráfico circular: permite ver la distribución interna de los datos que representan un hecho, en forma de porcentajes sobre un total. Se suele separar el sector correspondiente al mayor o menor valor, según lo que se desee destacar.
Los gráficos de anillos muestran los datos de los valores en formato de porcentajes de un total. Las categorías se representan mediante sectores individuales. Son idénticos en cuanto a funciones a los gráficos circulares.

Anteriormente he publicado artículos sobre las gráficas de barras y circulares, en esta ocasión hablare sobre las gráficas de barras, lineales, circulares y de anillo.

¿Cómo crear gráficas con ASP.NET?

Para explicar este punto vamos utilizar un control que es muy sencillo y si alguien tiene dudas o está batallando con la implementación del mismo, escríbanme en el apartado de comentarios o de contacto y enseguida les doy respuesta.

#1 Descargar el control de esta liga y también puede ver el demo aquí

#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. (Igual si tiene dudas en este paso puede escribirme en los comentarios.)

control free graph aspnet

#3 Arrastra el control a la página donde va a crear la gráfica.

Aparecerá la referencia donde registra el control y así mismo el control chart.

control aspnet chart

4# Configuramos las siguientes propiedades:

Tipográfica. Con esto indicamos que se va a crear una gráfica circular.

TipoAnimacion. Animación que tendrá la gráfica.

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

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="ControlChart.aspx.vb" Inherits="Graficas.ControlChart" %>

<%@ 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>
    <link href="css/estilo.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
        <div class="row">
            <div class="col-md-6">
                <section class="panel">
                    <header class="panel-heading ">
                        <h2 class="panel-title">Chart Bar
                        </h2>
                    </header>
                    <div class="panel-body" style="background: #f2f2f2">
                        <JI:Chart ID="chartBar" runat="server" />
                    </div>
                </section>
            </div>
            <div class="col-md-6">
                <section class="panel">
                    <header class="panel-heading ">
                        <h2 class="panel-title">Char Line
                        </h2>
                    </header>
                    <div class="panel-body" style="background: #f2f2f2">
                        <JI:Chart ID="chartLine" runat="server" TipoGrafica="Line" TipoAnimacion="easeInExpo" />
                    </div>
                </section>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <section class="panel">
                    <header class="panel-heading ">
                        <h2 class="panel-title">Chart pie
                        </h2>
                    </header>
                    <div class="panel-body">
                        <JI:Chart ID="chartPie" runat="server" TipoGrafica="Pie" />
                    </div>
                </section>
            </div>
            <div class="col-md-6">
                <section class="panel">
                    <header class="panel-heading ">
                        <h2 class="panel-title">Chart Doughnut
                        </h2>
                    </header>
                    <div class="panel-body">
                        <JI:Chart ID="chartDoughnut" runat="server" TipoGrafica="Doughnut" TipoAnimacion="easeInOutQuad" />
                    </div>
                </section>
            </div>



        </div>
    </form>
</body>
</html>

#5 Creamos el código de servidor

El código queda como sigue (el código esta comentado en cada línea para que no tengas ningún problema):

Imports System.Globalization
Imports DeveloperJI.ChartJI

Public Class ControlChart
    Inherits System.Web.UI.Page
    Dim strArrayValores() As Integer = {5, 20, 10, 15, 12, 6, 18, 13, 9, 14, 20, 25}
    Dim strArrayVentas() As Integer = {10, 15, 12, 18, 13, 2, 15, 10, 13, 8, 13, 21}
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        '''''CAHRT BAR AND LINE
        'Creamos una lista para agregar los datos de cada parte de la gráfica Bar y Line
        Dim _etiquetas As New List(Of String)
        'En este caso las etiquetas seran las siguientes:
        For i = 0 To 11
            _etiquetas.Add(Left(CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(i + 1), 3))
        Next

        ''''Asignamos las etiquetas a las gráficas en este caso los meses del año
        'Chart Bar asignar etiquetas
        chartBar.Valores = _etiquetas
        'Chart Line asignar etiquetas
        chartLine.Valores = _etiquetas
        _etiquetas = Nothing
        'Creamos un lista de tipo INFORMACIÓN que sera donde almacenemos la información de cada serie de la gráfica

        'asignamos los colores y valores, en este caso se creo una función para llenar la lista de información
        'Chart Bar
        chartBar.Info = agregarValoresBar()
        'Chart Line
        chartLine.Info = agregarValoresLine()
        'Se asignan los valores a la gráfica
        '''''CAHRT PIE  AND Doughnut
        'Creamos una lista para agregar los datos de cada parte de la gráfica pie
        'asignamos los valores llamando la función CargarDatosGrafica, 
        'donde le pasamos el color de fondo, la etiqueta, donde se mostrara la etiqueta,
        'color de fuente, tamaño de fuente y el valor. En este caso son 6 rebanadas del circulo. La suma de los valores debe ser 100
        Dim DatosChart As New List(Of pieData)
        DatosChart = New List(Of pieData)
        DatosChart.Add(CargarDatosGrafica("#058DC7", "Opción 1", pieData.aling.center, "#cacaca", "10", "30"))
        DatosChart.Add(CargarDatosGrafica("#50B432", "Opción 2", pieData.aling.center, "#cacaca", "10", "20"))
        DatosChart.Add(CargarDatosGrafica("#FF2626", "Opción 3", pieData.aling.center, "#cacaca", "10", "10"))
        DatosChart.Add(CargarDatosGrafica("#734BA9", "Opción 4", pieData.aling.center, "#cacaca", "10", "15"))
        DatosChart.Add(CargarDatosGrafica("#2BAAB1", "Opción 5", pieData.aling.center, "#cacaca", "10", "10"))
        DatosChart.Add(CargarDatosGrafica("#6888BE", "Opción 6", pieData.aling.center, "#cacaca", "10", "15"))
        chartPie.PieDatos = DatosChart
        DatosChart = Nothing
        ''Doughnut
        'En este caso las etiquetas seran las siguientes:
        _etiquetas = New List(Of String)
        _etiquetas.Add("Pagado")
        _etiquetas.Add("Pendiente")
        _etiquetas.Add("Recividas")
        _etiquetas.Add("Aceptada")
        _etiquetas.Add("Cancelada")
        chartDoughnut.Valores = _etiquetas
        DatosChart = New List(Of pieData)
        DatosChart.Add(CargarDatosGrafica("#058DC7", _etiquetas.Item(0).ToString, pieData.aling.center, "#cacaca", "10", "30"))
        DatosChart.Add(CargarDatosGrafica("#50B432", _etiquetas.Item(1).ToString, pieData.aling.center, "#cacaca", "10", "20"))
        DatosChart.Add(CargarDatosGrafica("#FF2626", _etiquetas.Item(2).ToString, pieData.aling.center, "#cacaca", "10", "10"))
        DatosChart.Add(CargarDatosGrafica("#734BA9", _etiquetas.Item(3).ToString, pieData.aling.center, "#cacaca", "10", "25"))
        DatosChart.Add(CargarDatosGrafica("#2BAAB1", _etiquetas.Item(4).ToString, pieData.aling.center, "#cacaca", "10", "15"))
        chartDoughnut.PieDatos = DatosChart
    End Sub

    Function agregarValoresBar()
        Dim strDataSet As New List(Of informacion)
        strDataSet.Add(generaDatosxMes("rgba(151,187,205,0.5)", "rgba(151,187,205,1)", "1"))
        strDataSet.Add(generaDatosxMes("rgba(227,97,89,0.7)", "rgba(227,97,89,1)", "2"))
        Return strDataSet
    End Function

    Function agregarValoresLine()
        Dim strDataSet As New List(Of informacion)
        strDataSet.Add(generaDatos("rgba(220,220,220,0)", "rgba(220,220,220,1)", "rgba(220,220,220,1)", "#000", 10, 50))
        strDataSet.Add(generaDatos("rgba(151,187,205,0)", "rgba(151,187,205,1)", "rgba(151,187,205,1)", "#000", 40, 80))
        Return strDataSet
    End Function

    Function generaDatos(fill As String, strokr As String, pointColor As String, pointStrokeColor 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
        valor2.PointColor = pointColor
        valor2.PointStrokeColor = pointStrokeColor
        valor2.BackColor = "rgba(151,187,205,.8)"
        '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
        For i = 0 To 11
            objDatos.Add(CInt(rng.Next(rnd1, rnd2)))
        Next
        rng = Nothing
        valor2.Data = objDatos
        objDatos = Nothing
        Return valor2
    End Function

    Function generaDatosxMes(fill As String, strokr As String, opcion As String) 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
        For i = 0 To 11
            If opcion = 1 Then
                objDatos.Add(CInt(strArrayValores(i)))
            Else
                objDatos.Add(CInt(strArrayVentas(i)))
            End If
        Next
        rng = Nothing
        valor2.Data = objDatos
        objDatos = Nothing
        Return valor2
    End Function

    Function CargarDatosGrafica(color As String, texto As String, alinea As pieData.aling, textcolor As String, txtFontSize As String, valor As String) As pieData
        Dim valor2 As New pieData
        valor2.Color = color
        valor2.Text = texto
        valor2.TextAlign = alinea
        valor2.TextColor = textcolor
        valor2.TextFontSize = txtFontSize
        valor2.Value = valor
        Return valor2
    End Function
End Class

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