¿Cómo crear graficas circulares con ASP.NET?

control asp.net para graficas gratis

Los reportes en los proyectos web son el pan de cada día, por eso hoy voy hablar de un control ASP.NET que podemos utilizar para hacer gráficas de pastel o también llamados gráficos circulares, gráficos de torta o gráficas de 360 grados.

El control es muy sencillo de utilizar 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.

Este control incluye las gráfica de barras que puedes ver aquí.

#1 Descargar el control de esta liga

#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 para crear gráficas con asp.net

#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.

graficas en mi sitio web con asp.net

4# Configuramos las siguientes propiedades:

Tipográfica="Pie". Con esto indicamos que se va a crear una gráfica circular.
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" CodeBehind="Pie.aspx.vb" Inherits="Graficas.Pie" %>

<%@ 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">
                        Primer ejemplo chart pie
                    </h2>
                </header>
                <div class="panel-body">
                    <JI:Chart ID="Chart2" runat="server" TipoGrafica="Pie"  />
                </div>
            </section>
        </div>
        <div class="col-md-6">
            <section class="panel">
                <header class="panel-heading ">
                    <h2 class="panel-title">
                        Segundo ejemplo chart pie
                    </h2>
                </header>
                <div class="panel-body">
<JI:Chart ID="Chart1" runat="server" TipoGrafica="Pie" />
                </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 DeveloperJI.ChartJI
Public Class Pie
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        'Creamos una lista para agregar los datos de cada parte de la gráfica
        Dim DatosChart As New List(Of pieData)
        '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 3 rebanadas del circulo. La suma de los valores debe ser 100
        DatosChart.Add(CargarDatosGrafica("#584A5E", "Opción 1", pieData.aling.center, "#cacaca", "10", "30"))
        DatosChart.Add(CargarDatosGrafica("#384A5E", "Opción 2", pieData.aling.right, "#cacaca", "16", "15"))
        DatosChart.Add(CargarDatosGrafica("#844A5E", "Opción 3", pieData.aling.left, "#ffffff", "20", "55"))
        'Asignamos los valores
        Chart1.PieDatos = DatosChart
        DatosChart = Nothing
        'Lo mismo para otra gráfica circular
        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"))
        Chart2.PieDatos = DatosChart
        DatosChart = Nothing
    End Sub
    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.