ASP.NET Web Pages - Chart Helper

Chart - uno de los muchos útiles ayudantes de ASP.NET Web.

Chart Helper

En el capítulo anterior, ya ha aprendido cómo usar un "ayudante" de ASP.NET.

Hasta ahora, ha aprendido cómo mostrar datos en una rejilla utilizando "WebGrid Helper".

Este capítulo explica cómo mostrar datos en gráficos, utilizando "Chart Helper".

"Chart Helper" puede crear diferentes tipos de imágenes de gráficos a través de varios formatos y etiquetas. Puede crear gráficos estándar, como gráficos de área, gráficos de barras, gráficos de columnas, gráficos de línea y gráficos de pizza, así como gráficos más profesionales (como gráficos de tendencias de acciones).

Los datos que se muestran en el gráfico pueden ser datos de un array, base de datos o archivo.

Gráfico desde un array

El siguiente ejemplo muestra el código que utiliza datos de un array para mostrar un gráfico:

Ejemplo

@{ 
var myChart = new Chart(width: 600, height: 400) 
   .AddTitle("Employees") 
   .AddSeries(chartType: "column",
      xValue: new[] {  "Peter", "Andrew", "Julie", "Mary", "Dave" }, 
      yValues: new[] { "2", "6", "4", "5", "3" }) 
   .Write();
}

Ejecutar Ejemplo

new Chart Crear un nuevo objeto de gráfico y establecer su anchura y altura.

AddTitle El método especifica el título del gráfico.

AddSeries El método agrega datos al gráfico.

chartType El parámetro define el tipo de gráfico.

xValue El parámetro define los valores del eje x.

yValues El parámetro define los valores del eje y.

Write() El método muestra el gráfico.

Gráfico desde la base de datos

Puede ejecutar primero una consulta de base de datos y luego usar los datos del resultado para crear un gráfico:

Ejemplo

@{ 
var db = Database.Open("SmallBakery") 
var dbdata = db.Query("SELECT Name, Price FROM Product") 
var myChart = new Chart(width: 600, height: 400) 
   .AddTitle("Ventas de Producto") 
   .DataBindTable(dataSource: dbdata, xField: "Name")
   .Write();
}

Ejecutar Ejemplo

var db = Database.Open Abrir la base de datos (y asignar el objeto de base de datos a la variable db).

var dbdata = db.Query Ejecutar una consulta de base de datos y guardar los resultados en dbdata.

new Chart Crear un nuevo objeto de gráfico y establecer su anchura y altura.

AddTitle El método especifica el título del gráfico.

DataBindTable El método bind la fuente de datos al gráfico.

Write() El método muestra el gráfico.

La alternativa al uso del método DataBindTable es utilizar AddSeries (véase el ejemplo anterior). DataBindTable es más fácil de usar, pero AddSeries es más escalable, ya que puede especificar con mayor precisión el gráfico y los datos:

Ejemplo

@{ 
var db = Database.Open("SmallBakery") 
var dbdata = db.Query("SELECT Name, Price FROM Product") 
var myChart = new Chart(width: 600, height: 400) 
   .AddTitle("Ventas de Producto") 
   .AddSeries(chartType:"Pie",
      xValue: dbdata, xField: "Name",
      yValues: dbdata, yFields: "Price")
   .Write();
}

Ejecutar Ejemplo

Gráficos desde datos XML

La tercera opción para generar gráficos es usar un archivo XML como datos del gráfico:

Ejemplo

@using System.Data;
@{
var dataSet = new DataSet()
dataSet.ReadXmlSchema(Server.MapPath("data.xsd"))
dataSet.ReadXml(Server.MapPath("data.xml"))
var dataView = new DataView(dataSet.Tables[0])
var myChart = new Chart(width: 600, height: 400)
   .AddTitle("Ventas por Empleado")
   .AddSeries("Default", chartType: "Pie",
      xValue: dataView, xField: "Name",
      yValues: dataView, yFields: "Sales")
   .Write();}
}

Ejecutar Ejemplo