en términos generales es una DLL libre para crear gráficas de diferentes tipos. hecho por:
Carlos Aguilar Mares © 2011 .http://www.carlosag.net/tools/webchart/
El ejemplo que se muestra a continuación es muy básico, pues tiene múltiples funcionalidades y varios tipos de gráficos (barra, lineas, Área, etc.) mismas que se pueden analizar por cuenta propia.
Manos a la obra!!!!
Para empezar
Utilizaremos Visual estudio con C #.
tenemos que ir a la pagina y descargar la DLL y guardarla en la carpeta: Bin
y agregar la referencia de dicho elemento.
Nuestro resultado final será algo parecido a esto:
 |
| Imagen PNG generada por webchart |
Agregando el Elemento WebChart
En la Pagina Html ("Graficos.aspx") se va a agregar el siguiente código (Lo importante esta en CAFE):
<%@ register tagprefix="Web" namespace="WebChart" assembly="WebChart"%>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Página sin título</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<web:chartcontrol runat="server" id="chcPastel" BorderStyle="Outset" Padding="20" >
</web:chartcontrol>
</div>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Página sin título</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<web:chartcontrol runat="server" id="chcPastel" BorderStyle="Outset" Padding="20" >
</web:chartcontrol>
</div>
</form>
</body>
</html>
Crear la Clase clWebChart para manipular los elementos del control:
using System;
using System.Data;
using System.Web;
using System.Collections.Generic;
using System.Drawing;
using WebChart;
using System.IO;
/// <summary>
/// Descripción breve de clWebChart
/// </summary>
public class clWebChart
{
private ChartControl _cControl = new ChartControl();
private List<oBasico> _coleccionBasica = new List<oBasico>();
private ChartPointCollection _coleccionPuntos = new ChartPointCollection();
protected Color[] CargaColores
{
get
{
List<oBasico> Listaitems = new List<oBasico>();
Listaitems = _coleccionBasica;
Color[] colors = new Color[Listaitems.Count];
int i = 0;
foreach (oBasico ObjActual in Listaitems)
{
colors[i] = ObjActual.Color;
i += 1;
}
return colors;
}
}
protected void ConfigurarControl(ChartControl cControl, Chart cChart)
{
_cControl = cControl;
_cControl.Width = 600;
_cControl.Height = 500;
_cControl.Font.Name = "Tahoma";
_cControl.Font.Size = 8;
_cControl.Border.Color = Color.DarkOrange;
_cControl.GridLines = WebChart.GridLines.Both;
_cControl.ForeColor = Color.Black;
_cControl.Legend.Position = LegendPosition.Left;
_cControl.ChartTitle.Font = new Font("Tahoma", 9, FontStyle.Bold);
_cControl.ChartTitle.ForeColor = Color.Black;
_cControl.ChartTitle.Text = "Titulo Principal";
Font fuente = new Font("Tahoma", 8);
_cControl.XTitle = new ChartText();
StringFormat formato = new StringFormat();
formato.LineAlignment = StringAlignment.Far;
_cControl.XTitle.StringFormat = formato;
_cControl.XTitle.Font = fuente;
_cControl.XTitle.Text = "Descripción de la grafica";
_cControl.Charts.Add(cChart);
_cControl.RedrawChart();
}
public clWebChart(){
// Esto va porque WebChart crear una carpeta donde almacena las imágenes que va generando
// pero no las elimina, así que nosotros la eliminamos por cuenta propia de esta forma.
DirectoryInfo dir = new DirectoryInfo(HttpContext.Current.Server.MapPath("~//") + "Webcharts");
if (dir.Exists && dir.GetFiles().Length > 0)
{
dir.Delete(true);
}
}
}
/// <summary>
/// Agregar nuevos items a la grafica de pastel.
/// </summary>
/// <param name="Descripcion">Descripción [string]</param>
/// <param name="color">Color [Color]</param>
/// <param name="Valor">el valor del item [int]</param>
public void AddItems(string Descripcion,Color color, int Valor)
{
List<oBasico> Listaitems = new List<oBasico>();
ChartPointCollection cPCol = new ChartPointCollection();
cPCol = _coleccionPuntos;
Listaitems = _coleccionBasica;
Listaitems.Add(new oBasico(Descripcion,color,Valor));
cPCol.Add(new ChartPoint(Valor.ToString(), Valor));
_coleccionPuntos = cPCol;
_coleccionBasica = Listaitems;
}
public void LlenaPastel(ChartControl cControl)
{
PieChart cChart = new PieChart(_coleccionPuntos);
// Configuracion General
cChart.DataLabels.Visible = true;
cChart.DataLabels.ForeColor = Color.Blue;
cChart.Shadow.Color = Color.LightGray;
cChart.Shadow.Visible = true;
cChart.Legend = "Leyenda";
cChart.LineMarker.Color = Color.Aquamarine;
// Colores personalizados
cChart.Colors = CargaColores;
// Agregar datos
cChart.DataSource = _coleccionBasica;
cChart.DataXValueField = "Legend";
cChart.DataYValueField = "Valor";
cChart.DataBind();
cChart.Explosion = 5;
// Siempre debe ir al Final para procesar el control
ConfigurarControl(cControl, cChart);
}
private class oBasico
{
private Color _color;
private string _legend;
private int _valor;
public oBasico(string desc,Color color, int valor)
{
_color = color;
_legend = desc;
_valor = valor;
}
public int Valor
{
get
{
return _valor;
}
set
{
_valor = value;
}
}
public Color Color
{
get
{
return _color;
}
set
{
_color = value;
}
}
public string Legend
{
get
{
return _legend;
}
set
{
_legend = value;
}
}
}
using System.Data;
using System.Web;
using System.Collections.Generic;
using System.Drawing;
using WebChart;
using System.IO;
/// <summary>
/// Descripción breve de clWebChart
/// </summary>
public class clWebChart
{
private ChartControl _cControl = new ChartControl();
private List<oBasico> _coleccionBasica = new List<oBasico>();
private ChartPointCollection _coleccionPuntos = new ChartPointCollection();
protected Color[] CargaColores
{
get
{
List<oBasico> Listaitems = new List<oBasico>();
Listaitems = _coleccionBasica;
Color[] colors = new Color[Listaitems.Count];
int i = 0;
foreach (oBasico ObjActual in Listaitems)
{
colors[i] = ObjActual.Color;
i += 1;
}
return colors;
}
}
protected void ConfigurarControl(ChartControl cControl, Chart cChart)
{
_cControl = cControl;
_cControl.Width = 600;
_cControl.Height = 500;
_cControl.Font.Name = "Tahoma";
_cControl.Font.Size = 8;
_cControl.Border.Color = Color.DarkOrange;
_cControl.GridLines = WebChart.GridLines.Both;
_cControl.ForeColor = Color.Black;
_cControl.Legend.Position = LegendPosition.Left;
_cControl.ChartTitle.Font = new Font("Tahoma", 9, FontStyle.Bold);
_cControl.ChartTitle.ForeColor = Color.Black;
_cControl.ChartTitle.Text = "Titulo Principal";
Font fuente = new Font("Tahoma", 8);
_cControl.XTitle = new ChartText();
StringFormat formato = new StringFormat();
formato.LineAlignment = StringAlignment.Far;
_cControl.XTitle.StringFormat = formato;
_cControl.XTitle.Font = fuente;
_cControl.XTitle.Text = "Descripción de la grafica";
_cControl.Charts.Add(cChart);
_cControl.RedrawChart();
}
public clWebChart(){
// Esto va porque WebChart crear una carpeta donde almacena las imágenes que va generando
// pero no las elimina, así que nosotros la eliminamos por cuenta propia de esta forma.
DirectoryInfo dir = new DirectoryInfo(HttpContext.Current.Server.MapPath("~//") + "Webcharts");
if (dir.Exists && dir.GetFiles().Length > 0)
{
dir.Delete(true);
}
}
}
/// <summary>
/// Agregar nuevos items a la grafica de pastel.
/// </summary>
/// <param name="Descripcion">Descripción [string]</param>
/// <param name="color">Color [Color]</param>
/// <param name="Valor">el valor del item [int]</param>
public void AddItems(string Descripcion,Color color, int Valor)
{
List<oBasico> Listaitems = new List<oBasico>();
ChartPointCollection cPCol = new ChartPointCollection();
cPCol = _coleccionPuntos;
Listaitems = _coleccionBasica;
Listaitems.Add(new oBasico(Descripcion,color,Valor));
cPCol.Add(new ChartPoint(Valor.ToString(), Valor));
_coleccionPuntos = cPCol;
_coleccionBasica = Listaitems;
}
public void LlenaPastel(ChartControl cControl)
{
PieChart cChart = new PieChart(_coleccionPuntos);
// Configuracion General
cChart.DataLabels.Visible = true;
cChart.DataLabels.ForeColor = Color.Blue;
cChart.Shadow.Color = Color.LightGray;
cChart.Shadow.Visible = true;
cChart.Legend = "Leyenda";
cChart.LineMarker.Color = Color.Aquamarine;
// Colores personalizados
cChart.Colors = CargaColores;
// Agregar datos
cChart.DataSource = _coleccionBasica;
cChart.DataXValueField = "Legend";
cChart.DataYValueField = "Valor";
cChart.DataBind();
cChart.Explosion = 5;
// Siempre debe ir al Final para procesar el control
ConfigurarControl(cControl, cChart);
}
private class oBasico
{
private Color _color;
private string _legend;
private int _valor;
public oBasico(string desc,Color color, int valor)
{
_color = color;
_legend = desc;
_valor = valor;
}
public int Valor
{
get
{
return _valor;
}
set
{
_valor = value;
}
}
public Color Color
{
get
{
return _color;
}
set
{
_color = value;
}
}
public string Legend
{
get
{
return _legend;
}
set
{
_legend = value;
}
}
}
Configurar el control desde el servidor ("Graficos.aspx.cs")
using System;
using System.Drawing;
public partial class Graficos : System.Web.UI.Page{
clWebChart cwGraf = new clWebChart();
if (!Page.IsPostBack){
int count=20;
Random rnd = new Random();
for (int i=10; i<count; i++){
cwGraf.AddItems("Item:" + i.ToString(),
Color.FromArgb(rnd.Next(255), rnd.Next(255), rnd.Next(255)),
rnd.Next(50));
}
// Llena grafica Pastel con datos
cwGraf.LlenaPastel(chcPastel);
}
}
using System.Drawing;
public partial class Graficos : System.Web.UI.Page{
clWebChart cwGraf = new clWebChart();
if (!Page.IsPostBack){
int count=20;
Random rnd = new Random();
for (int i=10; i<count; i++){
cwGraf.AddItems("Item:" + i.ToString(),
Color.FromArgb(rnd.Next(255), rnd.Next(255), rnd.Next(255)),
rnd.Next(50));
}
// Llena grafica Pastel con datos
cwGraf.LlenaPastel(chcPastel);
}
}
