EnglishEl control Chart (Grafica) nos permite crear fácilmente muchos tipos de graficas en aplicaciones Windows y en aplicaciones ASP.NET.
Si estas usando .NET 3.5 (Visual Studio 2008), necesitaras descargar un instalador aparte de la pagina de descarga de Microsoft. Opcionalmente puedes descargar un Add-on para Visual Studio 2008 que agregara el control Chart al Cuadro de Herramientas.
Comenzando con .NET 4 (Visual Studio 2010), el control Microsoft Chart es parte del framework. No es necesario descargar nada mas.
Crea un nueva Aplicación Web ASP.NET y agrega una referencia a System.Web.DataVisualization.
Si estas utilizando Visual Studio 2010 o si instalaste el Add-on para Visual Studio 2008, veras el control Chart en el Cuadro de Herramientas debajo de la sección Datos.
Antes de poder utilizar el control Chart, es necesario establecer un manejador http (http handler) en el web.config para la ruta ChartImg.axd.
Para .NET 3.5, agrega lo siguiente dentro de la sección <system.web>.
<httpHandlers>
<add path="ChartImg.axd" verb="GET,HEAD" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>
</httpHandlers>
Y aquà esta para .NET 4.
<httpHandlers>
<add path="ChartImg.axd" verb="GET,HEAD" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" validate="false"/>
</httpHandlers>
Asà es como el navegador solicitara la grafica del servidor . Si no agregas este manejador http al web.config, recibirás el siguiente error.
Error al ejecutar la solicitud secundaria para ChartImg.axd
Para utilizar el control Chart en una pagina, necesitaras registrarlo primero asÃ:
<%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>
Si quieres hacer el control disponible para todas la paginas en la aplicación, puedes registral el control Chart en el web.config:
<pages>
<controls>
<add tagPrefix="asp" namespace="System.Web.UI.DataVisualization.Charting" assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
</controls>
</pages>
Solo cambia la versión si estas utilizando .NET 3.5.
Vamos a agregar un par de graficas a una pagina web. Utilizare la pagina Default.aspx.
<%@ Page Title="Chart Sample" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="ChartSample._Default" %>
<%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:Chart ID="Chart1" runat="server" Width="400px" Height="300px" Palette="BrightPastel" BackColor="Silver" BackSecondaryColor="White" BackGradientStyle="TopBottom">
<Series>
<asp:Series Name="Series1" ChartType="Column" ChartArea="ChartArea1">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1" BackSecondaryColor="White" BackColor="Gainsboro" BackGradientStyle="DiagonalLeft">
</asp:ChartArea>
</ChartAreas>
<Titles>
<asp:Title Text="Sales per Month" />
</Titles>
<BorderSkin SkinStyle="Emboss" />
</asp:Chart>
<asp:Chart ID="Chart2" runat="server" Width="400px" Height="300px" Palette="BrightPastel" BackColor="Silver" BackSecondaryColor="White" BackGradientStyle="TopBottom">
<Series>
<asp:Series Name="Series1" ChartType="Pie" ChartArea="ChartArea1" Legend="Default" Label="#PERCENT{P2}" LegendText="#VALX">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1" BackColor="Transparent">
</asp:ChartArea>
</ChartAreas>
<Titles>
<asp:Title Text="Sales by Department" />
</Titles>
<Legends>
<asp:Legend Name="Default" BackSecondaryColor="White" BackColor="Gainsboro" BackGradientStyle="DiagonalLeft" />
</Legends>
<BorderSkin SkinStyle="Emboss" />
</asp:Chart>
</asp:Content>
La primera grafica será una grafica de columnas, y la segunda será una grafica circular, también conocida como grafica de pastel. Observa como establecimos las dimensiones, los colores, los tÃtulos y formatos de etiquetas. También establecimos un cuadro de leyendas para las segunda grafica.
También podrÃamos definir las listas de puntos para nuestras series aquÃ. Pero en este caso, agregaremos los puntos con código.
Vamos a definir los datos que usaremos para poblar las graficas. Mostrare dos tipos de orÃgenes de datos que podemos utilizar para poblar los puntos de las graficas. Agrega una nueva clase al proyecto y nómbrala DataAccess.
Para la primer grafica, utilizaremos un DataTable para representar información de una base de datos. Para la segunda grafica, usaremos una colección de objetos para representar un modelo en una aplicación.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
namespace ChartSample
{
public class DataAccess
{
public static DataTable GetSalesPerMonth()
{
DataTable dt = new DataTable();
DataColumn col = new DataColumn();
col.ColumnName = "Month";
col.DataType = typeof(String);
dt.Columns.Add(col);
col = new DataColumn();
col.ColumnName = "Sales";
col.DataType = typeof(Decimal);
dt.Columns.Add(col);
DataRow row = dt.NewRow();
row["Month"] = "July";
row["Sales"] = 122000m;
dt.Rows.Add(row);
row = dt.NewRow();
row["Month"] = "August";
row["Sales"] = 96000m;
dt.Rows.Add(row);
row = dt.NewRow();
row["Month"] = "September";
row["Sales"] = 135000m;
dt.Rows.Add(row);
dt.AcceptChanges();
return dt;
}
public static IEnumerable<Sale> GetSalesByDepartment()
{
List<Sale> sales = new List<Sale>();
Sale s = new Sale();
s.Department = "Service";
s.Sales = 35000m;
sales.Add(s);
s = new Sale();
s.Department = "Stores";
s.Sales = 60000m;
sales.Add(s);
s = new Sale();
s.Department = "Internet";
s.Sales = 40000m;
sales.Add(s);
return sales;
}
}
public class Sale
{
public String Department { get; set; }
public Decimal Sales { get; set; }
}
}
En una aplicación real estos métodos probablemente leerÃan la información de una base de datos, pero para mantener el ejemplo simple, he codificado la información. El primer método retorna un objeto DataTable, mientras que el segundo retorna una lista de objetos.
Ahora abre el archivo Default.aspx.cs y agrega el código a continuación.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
namespace ChartSample
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
BindCharts();
}
}
private void BindCharts()
{
DataTable dt = DataAccess.GetSalesPerMonth();
DataView data = new DataView(dt);
Chart1.Series["Series1"].Points.DataBind(data, "Month", "Sales", "");
IEnumerable<Sale> data2= DataAccess.GetSalesByDepartment();
Chart2.Series["Series1"].Points.DataBind(data2, "Department", "Sales", "");
}
}
}
Una grafica puede tener múltiples series, y una serie no es mas que una colección de puntos. Cada punto tiene un valor X y un valor Y.
PodrÃamos utilizar un ciclo para añadir cada punto a la propiedad Points. Este podrÃa ser el caso si estuviéramos capturando los valores del usuario por ejemplo.
Cuando ya tenemos información de otra fuente, como una base de datos, simplemente llamamos el método DataBind.
El primer parámetro es una colección IEnumerable, tal como List. Esta es la razón por la que no podemos utilizar el objeto DataTable directamente y necesitamos crear un objeto DataView.
El segundo parámetro es el nombre del campo o propiedad para los valores X, y el tercer parámetro es el campo o propiedad para los valores Y.
Ejecuta el proyecto.
Por favor deja tus comentarios.