sábado, 28 de enero de 2017

crear gráfica de barras con ASP.NET

No Comments
CompartirCompartir




Para crear cualquier tipo de proyectos de desarrollo necesitamos incluir reportes con gráficas, para tener un mejor funcionamiento y un control absoluto.
Paso: 1 Descargar desde el botón.
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. Aparecerá 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:
view plaincopy to clipboardprint?
  1. <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="chart_Default" %>  
  2.   
  3. <%@ Register Assembly="ChartJI" Namespace="DeveloperJI.ChartJI" TagPrefix="JI" %>  
  4.   
  5. <!DOCTYPE html>  
  6.   
  7. <html xmlns="http://www.w3.org/1999/xhtml">  
  8. <head runat="server">  
  9. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  10.     <title></title>  
  11. </head>  
  12. <body>  
  13.     <form id="form1" runat="server">  
  14.     <div>  
  15.         <JI:Chart ID="Chart1" runat="server" TipoGrafica="Bar" TipoAnimacion="easeOutQuint" FontSize="12" Height="310" Width="650" />  
  16.     </div>  
  17.     </form>  
  18. </body>  
  19. </html>  
Paso 5. Creamos el código de servidor el cual queda como sigue:

view plaincopy to clipboardprint?
  1. 'se importa la referencia a la gráfica  
  2. Imports DeveloperJI.ChartJI  
  3. Partial Class chart_Default  
  4.     Inherits System.Web.UI.Page  
  5.     Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load  
  6.         'Creamos una lista, que representa las etiquetas que apareceran en la gráfica  
  7.         Dim _etiquetas As New List(Of String)  
  8.         'En este caso las etiquetas seran las siguientes:  
  9.         _etiquetas.Add("Conjunto 1")  
  10.         _etiquetas.Add("Conjunto 2")  
  11.         _etiquetas.Add("Conjunto 3")  
  12.         _etiquetas.Add("Conjunto 4")  
  13.         'Asignamos las etiquetas a la gráfica  
  14.         Chart1.Valores = _etiquetas  
  15.         'Creamos un lista de tipo INFORMACIÓN que sera donde almacenemos la información de cada serie de la grafica  
  16.         Dim strDataSet As New List(Of informacion)  
  17.         'asignamos los calores, en este caso se creo una función para llenar la lista de información  
  18.         strDataSet.Add(generaDatos("rgba(220,220,220,0.5)", "rgba(220,220,220,1)", 10, 50))  
  19.         strDataSet.Add(generaDatos("rgba(151,187,205,0.5)", "rgba(151,187,205,1)", 15, 80))  
  20.         strDataSet.Add(generaDatos("rgba(217,112,65,0.5)", "rgba(217,112,65,1)", 10, 100))  
  21.         strDataSet.Add(generaDatos("rgba(88,74,94,0.5)", "rgba(88,74,94,1)", 50, 90))  
  22.         'Se asignan los valores a la gráfica  
  23.         Chart1.Info = strDataSet  
  24.     End Sub  
  25.     Function generaDatos(fill As String, strokr As String, rnd1 As Integer, rnd2 As Integer) As informacion  
  26.         Dim valor2 As New informacion  
  27.         'Representa el color de relleno de la barra (Pueden tener transparencia)  
  28.         valor2.FillColor = fill  
  29.         'Representa el color del borde de la barra (Pueden tener transparencia)  
  30.         valor2.StrokeColor = strokr  
  31.         'Se crea una lista de tipo string para los valores para cada barra  
  32.         Dim objDatos As New List(Of String)  
  33.         Dim rng As New Random  
  34.         'valores de las barras en este caso con un random  
  35.         objDatos.Add(CInt(rng.Next(rnd1, rnd2)))  
  36.         objDatos.Add(CInt(rng.Next(rnd1, rnd2)))  
  37.         objDatos.Add(CInt(rng.Next(rnd1, rnd2)))  
  38.         objDatos.Add(CInt(rng.Next(rnd1, rnd2)))  
  39.         rng = Nothing  
  40.         valor2.Data = objDatos  
  41.         objDatos = Nothing  
  42.         Return valor2  
  43.     End Function  
  44. End Class  


Todos Los Derechos Reservados por Fego Tutoriales 

0 comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)