Control para gráficos lineales con ASP.NET

graficar el control párrafo en 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í.

Una gráfica lineal se utiliza para representar series de datos que han sido recolectados en un tiempo específico. Los datos se representan en una gráfica en intervalos de tiempo y se dibuja una línea conectando los puntos resultantes.

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.

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

¿Cómo crear gráficas lineales 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.

Este control incluye las gráfica de barras que puedes ver aquí. Y lo que tienes que hacer es lo siguiente:

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

gráfico de control libre asp.net

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

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

control de gráfico asp.net gratis

4 # Configuramos las Siguientes Propiedades:

Tipográfica = "Línea". Con esto indicamos que se va a crear una gráfica circular.

TipoAnimacion = "easeInOutElastic". Animación que tendrá la gráfica.

El código HTML quedaria de la siguiente Manera:

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

<%@ 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
                        </h2>
                    </header>
                    <div class="panel-body" style="background: #f2f2f2">
                        <JI:Chart ID="Chart1" runat="server" TipoGrafica="Line" TipoAnimacion="easeInExpo" />
                    </div>
                </section>
            </div>
            <div class="col-md-6">
                <section class="panel">
                    <header class="panel-heading ">
                        <h2 class="panel-title">Segundo ejemplo
                        </h2>
                    </header>
                    <div class="panel-body" style="background: #f2f2f2">
                        <JI:Chart ID="Chart2" runat="server" />
                    </div>
                </section>
            </div>
        </div>
    </form>
</body>
</html>

# 5 Creamos el Código de Servidor VB.NET

El código del queda Como Sigue (el código this comentado En Cada Línea Para Que no hay problema ningún Tengas):

Imports DeveloperJI.ChartJI
Imports System.Globalization

Public Class Line
    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
        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 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)", "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))
        '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
        ventasyComprasPorMes()
    End Sub

    Protected Sub ventasyComprasPorMes()
        '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:
        For i = 0 To 11
            _etiquetas.Add(Left(CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(i + 1), 3))
        Next
        'Asignamos las etiquetas a la gráfica
        Chart2.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(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"))
        'Se asignan los valores a la gráfica
        Chart2.Info = strDataSet
    End Sub

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

End Class

C#

int[] strArrayValores = {5,20,10,15,12,6,18,13,9,14,20,25};
	int[] strArrayVentas = {10,15,12,18,13,2,15,10,13,8,13,21};
	protected void Page_Load(object sender, System.EventArgs e)
	{
		List<string> _etiquetas = new List<string>();
		//En este caso las etiquetas seran las siguientes:  
		for (i = 0; i <= 11; i++) {
			_etiquetas.Add(Strings.Left(CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(i + 1), 3));
		}

		//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  
		List<informacion> strDataSet = new List<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)", "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));
		//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;
		ventasyComprasPorMes();
	}

	protected void ventasyComprasPorMes()
	{
		//Creamos una lista, que representa las etiquetas que apareceran en la gráfica  
		List<string> _etiquetas = new List<string>();
		//En este caso las etiquetas seran las siguientes:  
		for (i = 0; i <= 11; i++) {
			_etiquetas.Add(Strings.Left(CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(i + 1), 3));
		}
		//Asignamos las etiquetas a la gráfica  
		Chart2.Valores = _etiquetas;
		//Creamos un lista de tipo INFORMACIÓN que sera donde almacenemos la información de cada serie de la grafica  
		List<informacion> strDataSet = new List<informacion>();
		//asignamos los calores, en este caso se creo una función para llenar la lista de información          
		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"));
		//Se asignan los valores a la gráfica  
		Chart2.Info = strDataSet;
	}

	public informacion generaDatosxMes(string fill, string strokr, string opcion)
	{
		informacion valor2 = 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  
		List<string> objDatos = new List<string>();
		Random rng = new Random();
		//valores de las barras en este caso con un random  
		for (i = 0; i <= 11; i++) {
			if (opcion == 1) {
				objDatos.Add(Convert.ToInt32(strArrayValores(i)));
			} else {
				objDatos.Add(Convert.ToInt32(strArrayVentas(i)));
			}
		}
		rng = null;
		valor2.Data = objDatos;
		objDatos = null;
		return valor2;
	}

	public informacion generaDatos(string fill, string strokr, string pointColor, string pointStrokeColor, int rnd1, int rnd2)
	{
		informacion valor2 = 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  
		List<string> objDatos = new List<string>();
		Random rng = new Random();
		//valores de las barras en este caso con un random  
		for (i = 0; i <= 11; i++) {
			objDatos.Add(Convert.ToInt32(rng.Next(rnd1, rnd2)));
		}
		rng = null;
		valor2.Data = objDatos;
		objDatos = null;
		return valor2;
	}

Si Tienes duda de la implementation o Sugerencias Envía tus comentarios.