Mostrar datos en un gráfico con ASP.NET Web Pages (Razor)

Artículo
03/18/2024

En este artículo se explica cómo usar un gráfico para mostrar datos en un sitio web de ASP.NET Web Pages (Razor) mediante el asistente Chart.

Aprenderá lo siguiente:

Cómo mostrar datos en un gráfico.

Cómo aplicar estilo a los gráficos mediante temas integrados.

Cómo guardar gráficos y cómo almacenarlos en caché para mejorar el rendimiento.

Las características de programación de ASP.NET presentadas en el artículo son:

El asistente Chart.

Nota:

La información de este artículo se aplica a ASP.NET Web Pages 1.0 y Web Pages 2.

Asistente de gráficos

Si quiere mostrar los datos en formato gráfico, puede usar el asistente Chart. El asistente Chart puede representar una imagen que muestre datos en diversos tipos de gráficos. Admite muchas opciones de formato y etiquetado. El asistente Chart puede representar más de 30 tipos de gráficos, incluidos todos los tipos de gráficos con los que puede que ya esté familiarizado, como los de Microsoft Excel u otras herramientas: gráficos de áreas, gráficos de barras, gráficos de columnas, gráficos de líneas y gráficos circulares, junto con gráficos más especializados, como los gráficos de cotizaciones.

Gráfico de áreas	Gráfico de barras
Gráfico de columnas	Gráfico de líneas
Gráfico circular	Gráfico de cotizaciones

Elemento de gráfico

Los gráficos muestran datos y elementos adicionales, como leyendas, ejes, series, etc. En la imagen siguiente se muestran muchos de los elementos del gráfico que puede personalizar al usar el asistente Chart. En este artículo se muestra cómo establecer algunos de estos elementos (no todos).

Descripción: Imagen que muestra los elementos del gráfico

Creación de un gráfico a partir de datos

Los datos que se muestran en un gráfico pueden proceder de una matriz, de los resultados devueltos desde una base de datos o de los datos que están en un archivo XML.

Uso de una matriz

Como se explica en Introducción a la programación de ASP.NET Web Pages usando la sintaxis Razor, una matriz le permite almacenar una colección de elementos similares en una sola variable. Puede usar matrices para contener los datos que desea incluir en el gráfico.

En este procedimiento se muestra cómo crear un gráfico a partir de datos de matrices mediante el tipo de gráfico predeterminado. También indica cómo mostrar el gráfico dentro de la página.

Cree un nuevo archivo denominado ChartArrayBasic.cshtml.
Reemplace el contenido existente por lo siguiente:
```
@{
    var myChart = new Chart(width: 600, height: 400)
        .AddTitle("Chart Title")
        .AddSeries(
            name: "Employee",
            xValue: new[] {  "Peter", "Andrew", "Julie", "Mary", "Dave" },
            yValues: new[] { "2", "6", "4", "5", "3" })
        .Write();
}
```
El código crea primero un nuevo gráfico y establece su anchura y altura. Especifique el título del gráfico mediante el método AddTitle. Para agregar datos, use el método AddSeries. En este ejemplo, utilizará los parámetros name, xValue y yValues del método AddSeries. El parámetro name se muestra en la leyenda de gráfico. El parámetro xValue contiene una matriz de datos que se muestran a lo largo del eje horizontal del gráfico. El parámetro yValues contiene una matriz de datos que se utiliza para trazar los puntos verticales del gráfico.

El método Write representa realmente el gráfico. En este caso, dado que no especificó ningún tipo de gráfico, el asistente Chart representa su gráfico predeterminado, un gráfico de columnas.
Ejecute la página en el explorador. El explorador muestra el gráfico.

Uso de una consulta de base de datos para datos de gráficos

Si la información que desea incluir en un gráfico está en una base de datos, puede ejecutar una consulta de la base de datos y, a continuación, usar los datos de los resultados para crear el gráfico. Este procedimiento muestra cómo leer y mostrar los datos de la base de datos creada en el artículo Introducción al uso de una base de datos en sitios de ASP.NET Web Pages.

Agregue una carpeta App_Data a la raíz del sitio web si la carpeta aún no existe.
En la carpeta App_Data, agregue el archivo de base de datos denominado SmallBakery.sdf que se describe en Introducción al uso de una base de datos en sitios de ASP.NET Web Pages.
Cree un nuevo archivo denominado ChartDataQuery.cshtml.
Reemplace el contenido existente por lo siguiente:
```
@{
    var db = Database.Open("SmallBakery");
    var data = db.Query("SELECT Name, Price FROM Product");
    var myChart = new Chart(width: 600, height: 400)
        .AddTitle("Product Sales")
        .DataBindTable(dataSource: data, xField: "Name")
        .Write();
}
```
El código abre primero la base de datos SmallBakery y la asigna a una variable denominada db. Esta variable representa un objeto Database que se puede usar para leer y escribir en la base de datos. A continuación, el código ejecuta una consulta SQL para obtener el nombre y el precio de cada producto. El código crea un nuevo gráfico y pasa una consulta de base de datos a él llamando al método DataBindTable del gráfico. Este método toma dos parámetros: el parámetro dataSource es para los datos de la consulta y el parámetro xField permite establecer qué columna de datos se usa para el eje X del gráfico.

Como alternativa al uso del método DataBindTable, puede utilizar el método AddSeries del asistente Chart. El método AddSeries le permite definir los parámetros xValue y yValues. Por ejemplo, en lugar de usar el método DataBindTable de esta manera:
```
.DataBindTable(data, "Name")
```
Puede usar el método AddSeries así:
```
.AddSeries("Default",
    xValue: data, xField: "Name",
    yValues: data, yFields: "Price")
```
Ambos representan los mismos resultados. El método AddSeries es más flexible porque puede especificar el tipo de gráfico y los datos de forma más explícita, pero el método DataBindTable es más fácil de usar si no necesita una flexibilidad adicional.
Ejecute la página en un explorador.

Uso de datos XML

La tercera opción para el gráfico es usar un archivo XML como datos del gráfico. Esto requiere que el archivo XML también tenga un archivo de esquema (archivo .xsd) que describa la estructura XML. Este procedimiento muestra cómo leer datos de un archivo XML.

En la carpeta App_Data, cree un nuevo archivo XML denominado data.xml.

Reemplace el XML existente con algunos datos XML sobre los empleados de una empresa ficticia.

<?xml version="1.0" standalone="yes" ?>
<NewDataSet xmlns="http://tempuri.org/data.xsd">
    <Employee>
        <Name>Erin</Name>
        <Sales>10440</Sales>
    </Employee>
    <Employee>
        <Name>Kim</Name>
        <Sales>17772</Sales>
    </Employee>
    <Employee>
        <Name>Dean</Name>
        <Sales>23880</Sales>
    </Employee>
    <Employee>
        <Name>David</Name>
        <Sales>7663</Sales>
    </Employee>
    <Employee>
        <Name>Sanjay</Name>
        <Sales>21773</Sales>
    </Employee>
    <Employee>
        <Name>Michelle</Name>
        <Sales>32294</Sales>
    </Employee>
</NewDataSet>

En la carpeta App_Data, cree un nuevo archivo XML denominado data.xsd. (Tenga en cuenta que la extensión esta vez es .xsd).

Reemplace el XML existente por lo siguiente:

<?xml version="1.0" ?>
<xs:schema
    id="NewDataSet"
    targetNamespace="http://tempuri.org/data.xsd"
    xmlns:mstns="http://tempuri.org/data.xsd"
    xmlns="http://tempuri.org/data.xsd"
    xmlns:xs="http://www.w3.org/2001/XMLSchema"
    xmlns:msdata="urn:schemas-microsoft-com:xml-msdata"
    attributeFormDefault="qualified"
    elementFormDefault="qualified">
    <xs:element name="NewDataSet"
        msdata:IsDataSet="true"
        msdata:EnforceConstraints="False">
        <xs:complexType>
            <xs:choice maxOccurs="unbounded">
                <xs:element name="Employee">
                    <xs:complexType>
                        <xs:sequence>
                            <xs:element
                                name="Name"
                                type="xs:string"
                                minOccurs="0" />
                            <xs:element
                                name="Sales"
                                    type="xs:double"
                                    minOccurs="0" />
                        </xs:sequence>
                    </xs:complexType>
                </xs:element>
            </xs:choice>
        </xs:complexType>
    </xs:element>
</xs:schema>

En la raíz del sitio web, cree un nuevo archivo denominado ChartDataXML.cshtml.
Reemplace el contenido existente por lo siguiente:
```
@using System.Data;
@{
    var dataSet = new DataSet();
    dataSet.ReadXmlSchema(Server.MapPath("~/App_Data/data.xsd"));
    dataSet.ReadXml(Server.MapPath("~/App_Data/data.xml"));
    var dataView = new DataView(dataSet.Tables[0]);

    var myChart = new Chart(width: 600, height: 400)
        .AddTitle("Sales Per Employee")
        .AddSeries("Default", chartType: "Pie",
            xValue: dataView, xField: "Name",
            yValues: dataView, yFields: "Sales")
        .Write();
}
```
El código crea primero un objeto DataSet. Este objeto se usa para administrar los datos que se leen del archivo XML y organizarlos según la información del archivo de esquema. (Observe que la parte superior del código incluye la instrucción using SystemData. Esto es necesario para poder trabajar con el objeto DataSet. Para más información, consulte Instrucciones "Using" y nombres completos más adelante en este artículo).

A continuación, el código crea un objeto DataView basado en el conjunto de datos. La vista de datos proporciona un objeto al que el gráfico se puede enlazar, es decir, en el cual puede leer y trazar. El gráfico se enlaza a los datos mediante el método AddSeries, como vio anteriormente al incluir en el gráfico los datos de la matriz, excepto que esta vez los parámetros xValue y yValues se establecen en el objeto DataView.

En este ejemplo también se muestra cómo especificar un tipo de gráfico determinado. Cuando los datos se agregan en el método AddSeries, el parámetro chartType también se establece para mostrar un gráfico circular.
Ejecute la página en un explorador.

Sugerencia

Instrucciones "Using" y nombres completos

La instancia de .NET Framework que usa ASP.NET Web Pages con sintaxis de Razor se basa en muchos miles de componentes (clases). Para que sea manejable el uso de todas estas clases, se organizan en espacios de nombres, los cuales presentan cierto parecido con las bibliotecas. Por ejemplo, el espacio de nombres System.Web contiene clases que admiten la comunicación entre exploradores y servidores, el espacio de nombres System.Xml contiene clases que se usan para crear y leer archivos XML, y el espacio de nombres System.Data contiene clases que le permiten trabajar con datos.

Para acceder a cualquier clase determinada en .NET Framework, el código debe saber no solo el nombre de la clase, sino también el espacio de nombres en el que se encuentra. Por ejemplo, para usar el asistente Chart, el código debe buscar la clase System.Web.Helpers.Chart, que combina el espacio de nombres (System.Web.Helpers) con el nombre de clase (Chart). Esto se conoce como el nombre completo de la clase: su ubicación completa e inequívoca dentro de la inmensidad de .NET Framework. En el código, tendría el siguiente aspecto:

var myChart = new System.Web.Helpers.Chart(width: 600, height: 400) // etc.

Sin embargo, es complicado (y propicio a errores) tener que usar estos nombres largos y completos cada vez que quiera hacer referencia a una clase o asistente. Por tanto, para facilitar el uso de los nombres de clase, puede importar los espacios de nombres que le interesen, que normalmente serán solo un puñado de entre los muchos espacios de nombres de .NET Framework. Si ha importado un espacio de nombres, puede usar solo un nombre de clase (Chart) en lugar del nombre completo (System.Web.Helpers.Chart). Cuando el código se ejecuta y encuentra un nombre de clase, puede buscar solo los espacios de nombres que ha importado para encontrar esa clase.

Cuando se usa ASP.NET Web Pages con sintaxis de Razor para crear páginas web, normalmente se usa el mismo conjunto de clases cada vez, incluida la clase WebPage, los distintos asistentes, etc. Para ahorrarle el trabajo de importar los espacios de nombres pertinentes cada vez que cree un sitio web, ASP.NET se configura para que importe automáticamente un conjunto de espacios de nombres principales para cada sitio web. Por eso no ha tenido que tratar con espacios de nombres ni importar hasta ahora; todas las clases con las que ha trabajado están en espacios de nombres que ya se han importado automáticamente.

Sin embargo, a veces es necesario trabajar con una clase que no esté en un espacio de nombres que se importe automáticamente. En ese caso, puede usar el nombre completo de esa clase o importar manualmente el espacio de nombres que contiene la clase. Para importar un espacio de nombres, use la instrucción using (import en Visual Basic), como vio en un ejemplo anterior del artículo.

Por ejemplo, la clase DataSet está en el espacio de nombres System.Data. El espacio de nombres System.Data no está disponible automáticamente para páginas de Razor de ASP.NET. Por lo tanto, para trabajar con la clase DataSet con su nombre completo, puede usar un código similar al siguiente:

var dataSet = new System.Data.DataSet();

Si tiene que usar la clase DataSet repetidamente, puede importar un espacio de nombres como este y, a continuación, usar solo el nombre de clase en el código:

@using System.Data;
@{
    var dataSet = new DataSet();
    // etc.
}

Puede agregar instrucciones using para cualquier otro espacio de nombres de .NET Framework al que quiera hacer referencia. Sin embargo, como se indica, no es necesario hacerlo a menudo, ya que la mayoría de las clases con las que trabajará están en espacios de nombres que se importan automáticamente mediante ASP.NET para su uso en páginas .cshtml y .vbhtml.

Mostrar gráficos dentro de una página web

En los ejemplos que ha visto hasta ahora, se crea un gráfico y, a continuación, el gráfico se representa directamente en el explorador como un gráfico. Sin embargo, en muchos casos, quiere mostrar un gráfico como parte de una página, no solo por sí mismo en el explorador. Para ello, se requiere un proceso de dos pasos. El primer paso es crear una página que genere el gráfico, como ya ha visto.

El segundo paso es mostrar la imagen resultante en otra página. Para mostrar la imagen, use un elemento HTML <img> de la misma manera que mostraría cualquier imagen. Sin embargo, en lugar de hacer referencia a un archivo .jpg o .png, el elemento <img> hace referencia al archivo .cshtml que contiene el asistente Chart que crea el gráfico. Cuando se ejecuta la página para mostrar, el elemento <img> obtiene la salida del asistente Chart y representa el gráfico.

Captura de pantalla de los gráficos que se muestran dentro de una página web

Cree un archivo denominado ShowChart.cshtml.

Reemplace el contenido existente por lo siguiente:

<!DOCTYPE html>
<html>
  <head>
    <title>Chart Example</title>
  </head>
  <body>
    <h1>Chart Example</h1>
    <p>The following chart is generated by the <em>ChartArrayBasic.cshtml</em> file, but is shown
       in this page.</p>
    <p><img src="ChartArrayBasic.cshtml" /> </p>
  </body>
</html>

El código usa el elemento <img> para mostrar el gráfico que creó anteriormente en el archivo ChartArrayBasic.cshtml.

Ejecute la página web en un explorador. El archivo ShowChart.cshtml muestra la imagen del gráfico en función del código contenido en el archivo ChartArrayBasic.cshtml.

Aplicar estilo a un gráfico

El asistente Chart admite un gran número de opciones que le permiten personalizar la apariencia del gráfico. Puede establecer colores, fuentes, bordes, etc. Una manera fácil de personalizar la apariencia de un gráfico es usar un tema. Los temas son colecciones de información que especifican cómo representar un gráfico mediante fuentes, colores, etiquetas, paletas, bordes y efectos. (Tenga en cuenta que el estilo de un gráfico no indica el tipo de gráfico).

En la tabla siguiente se enumeran los temas integrados.

Tema	Descripción
`Vanilla`	Muestra columnas rojas en un fondo blanco.
`Blue`	Muestra columnas azules en un fondo degradado azul.
`Green`	Muestra columnas azules en un fondo degradado verde.
`Yellow`	Muestra columnas naranjas en un fondo degradado amarillo.
`Vanilla3D`	Muestra columnas rojas 3D en un fondo blanco.

Puede especificar el tema que se va a usar al crear un nuevo gráfico.

Cree un nuevo archivo denominado ChartStyleGreen.cshtml.

Reemplace el contenido existente de la página por lo siguiente:

@{
    var db = Database.Open("SmallBakery");
    var data = db.Query("SELECT Name, Price FROM Product");
    var myChart = new Chart(width: 600,
                        height: 400,
                        theme: ChartTheme.Green)
        .AddTitle("Product Sales")
        .DataBindTable(data, "Name")
        .Write();
}

Este código es el mismo que el ejemplo anterior que usa la base de datos para los datos, pero agrega el parámetro theme cuando crea el objeto Chart. A continuación se muestra el código cambiado:

var myChart = new Chart(width: 600,
                    height: 400,
                    theme: ChartTheme.Green)

Ejecute la página en un explorador. Verá los mismos datos que antes, pero el gráfico parece más acabado:

Guardar un gráfico

Cuando usa el asistente Chart como ha visto hasta ahora en este artículo, el asistente vuelve a crear el gráfico desde cero cada vez que se invoca. Si es necesario, el código del gráfico también vuelve a consultar la base de datos o vuelve a leer el archivo XML para obtener los datos. En algunos casos, hacerlo puede ser una operación compleja, como cuando la base de datos que está consultando es grande o si el archivo XML contiene una gran cantidad de datos. Incluso si el gráfico no implica una gran cantidad de datos, el proceso de creación dinámica de una imagen ocupa los recursos del servidor y, si muchas personas solicitan la página o páginas que muestran el gráfico, puede haber un impacto en el rendimiento de su sitio web.

Para ayudar a reducir el potencial impacto en el rendimiento de crear un gráfico, puede crear un gráfico la primera vez que lo necesite y luego guardarlo. Cuando se vuelva a necesitar el gráfico, en lugar de volver a generarlo, solo tiene que recuperar la versión guardada y representarla.

Puede guardar un gráfico de estas maneras:

Almacene en caché el gráfico en la memoria del equipo (en el servidor).
Guarde el gráfico como un archivo de imagen.
Guarde el gráfico como un archivo XML. Esta opción le permite modificar el gráfico antes de guardarlo.

Almacenamiento en caché de un gráfico

Después de crear un gráfico, puede almacenarlo en caché. El almacenamiento en caché de un gráfico significa que no tiene que volver a crearse si es necesario volver a mostrarlo. Al guardar un gráfico en la memoria caché, se le asigna una clave que debe ser única para ese gráfico.

Los gráficos guardados en la memoria caché se pueden quitar si el servidor se ejecuta con poca memoria. Además, la memoria caché se borra si la aplicación se reinicia por cualquier motivo. Por lo tanto, la manera estándar de trabajar con un gráfico almacenado en caché es comprobar siempre si está disponible en la memoria caché y, si no es así, crearlo o recrearlo.

En la raíz de su sitio web, cree un archivo denominado ShowCachedChart.cshtml.
Reemplace el contenido existente por lo siguiente:
```
<!DOCTYPE html>
<html>
    <head>
        <title>Chart Example</title>
    </head>
<body>
    <h1>Chart Example</h1>
    <img src="ChartSaveToCache.cshtml?key=myChartKey" />
    <p><a href="ClearCache.cshtml">Clear cache</a></p>
</body>
</html>
```
La etiqueta <img> incluye un atributo src que apunta al archivo ChartSaveToCache.cshtml y pasa una clave a la página como una cadena de consulta. La clave contiene el valor "myChartKey". El archivo ChartSaveToCache.cshtml contiene el asistente Chart que crea el gráfico. Creará esta página en un momento.

Al final de la página hay un vínculo a una página denominada ClearCache.cshtml. Esa es una página que también creará en breve. Solo necesita ClearCache.cshtml para probar el almacenamiento en caché de este ejemplo; no es un vínculo o página que normalmente incluiría al trabajar con gráficos almacenados en caché.
En la raíz de su sitio web, cree un nuevo archivo denominado ChartSaveToCache.cshtml.
Reemplace el contenido existente por lo siguiente:
```
@{
    var chartKey = Request["key"];
    if (chartKey != null) {
        var cachedChart = Chart.GetFromCache(key: chartKey);
        if (cachedChart == null) {
            cachedChart = new Chart(600, 400);
            cachedChart.AddTitle("Cached Chart -- Cached at " + DateTime.Now);
            cachedChart.AddSeries(
               name: "Employee",
               axisLabel: "Name",
               xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" },
               yValues: new[] { "2", "6", "4", "5", "3" });
            cachedChart.SaveToCache(key: chartKey,
               minutesToCache: 2,
               slidingExpiration: false);
        }
        Chart.WriteFromCache(chartKey);
    }
}
```
El código comprueba primero si se pasó algo como valor de clave en la cadena de consulta. Si es así, el código intenta leer un gráfico de la memoria caché llamando al método GetFromCache y pasándole la clave. Si resulta que no hay nada en la memoria caché con esa clave (lo que sucederá la primera vez que se solicite el gráfico), el código creará el gráfico como de costumbre. Cuando finalice el gráfico, el código lo guarda en la memoria caché llamando a SaveToCache. Ese método requiere una clave (para que el gráfico se pueda solicitar más adelante) y la cantidad de tiempo que el gráfico se debe guardar en la memoria caché. (La hora exacta en que almacenaría en caché un gráfico dependerá de la frecuencia con la que pensó que los datos que representa podrían cambiar). El método SaveToCache también requiere un parámetro slidingExpiration: si este está establecido en true, el contador de tiempo de espera se restablecerá cada vez que se acceda al gráfico. En este caso, significa que la entrada de caché del gráfico expira 2 minutos después de la última vez que alguien accedió al gráfico. (La alternativa a la expiración variable es la expiración absoluta, lo que significa que la entrada de caché expiraría exactamente 2 minutos después de que se colocara en la memoria caché, independientemente de la frecuencia con la que se hubiera accedido a ella).

Por último, el código usa el método WriteFromCache para recuperar y representar el gráfico de la memoria caché. Tenga en cuenta que este método está fuera del bloque if que comprueba la caché, porque obtendrá el gráfico de la caché tanto si el gráfico estaba ahí desde el principio como si tuvo que ser generado y guardado en la caché.

Observe que en el ejemplo, el método AddTitle incluye una marca de tiempo. (Esta agrega la fecha y hora actuales, DateTime.Now, al título).
Cree una nueva página denominada ClearCache.cshtml y reemplace su contenido por el siguiente:
```
@{
    WebCache.Remove("myChartKey");
}
<!DOCTYPE html>
<html lang="en">
  <body>
    <p>Cache has been cleared.</p>
    <p>Return to <a href="ShowCachedChart.cshtml">ShowCachedChart.cshtml</a></p>
  </body>
</html>
```
En esta página se usa el asistente WebCache para eliminar el gráfico almacenado en caché en ChartSaveToCache.cshtml. Como se indicó anteriormente, normalmente no es necesario tener una página como esta. Lo va a crear aquí solo para facilitar la prueba del almacenamiento en caché.
Ejecute la página web ShowCachedChart.cshtml en un explorador. La página muestra la imagen del gráfico en función del código contenido en el archivo ChartSaveToCache.cshtml. Tome nota de lo que indica la marca de tiempo en el título del gráfico.
Cierre el explorador.
Vuelva a ejecutar ShowCachedChart.cshtml. Observe que la marca de tiempo es la misma que antes, lo que indica que el gráfico no se ha regenerado, sino que se leyó de la memoria caché.
En ShowCachedChart.cshtml, haga clic en el vínculo Borrar caché. Esto le lleva a ClearCache.cshtml, que informa de que se ha borrado la memoria caché.
Haga clic en el vínculo Volver a ShowCachedChart.cshtml o vuelva a ejecutar ShowCachedChart.cshtml desde WebMatrix. Tenga en cuenta que esta vez ha cambiado la marca de tiempo, porque se ha borrado la memoria caché. Por lo tanto, el código tenía que volver a generar el gráfico y volver a colocarlo en la memoria caché.

Guardar un gráfico como un archivo de imagen

También puede guardar un gráfico como un archivo de imagen (por ejemplo, como un archivo .jpg) en el servidor. A continuación, puede usar el archivo de imagen de la forma en que lo haría con cualquier imagen. La ventaja es que el archivo se almacena en lugar de guardarlo en una memoria caché temporal. Puede guardar una nueva imagen del gráfico en diferentes momentos (por ejemplo, cada hora) y, a continuación, mantener un registro permanente de los cambios que se producen con el tiempo. Tenga en cuenta que debe asegurarse de que la aplicación web tiene permiso para guardar un archivo en la carpeta del servidor en el que desea colocar el archivo de imagen.

En la raíz del sitio web, cree una carpeta denominada _ChartFiles si aún no existe.
En la raíz de su sitio web, cree un nuevo archivo denominado ChartSave.cshtml.

Reemplace el contenido existente por lo siguiente:

@{
    var filePathName = "_ChartFiles/chart01.jpg";
    if (!File.Exists(Server.MapPath(filePathName))) {
        var chartImage = new Chart(600, 400);
        chartImage.AddTitle("Chart Title");
        chartImage.AddSeries(
                name: "Employee",
                axisLabel: "Name",
                xValue: new[] {  "Peter", "Andrew", "Julie", "Mary", "Dave" },
                yValues: new[] { "2", "6", "4", "5", "3" });
        chartImage.Save(path: filePathName);
    }
}
<!DOCTYPE html>
<html>
    <head>
        <title>Chart Example</title>
    </head>
    <body>
        <img src="@filePathName" />
    </body>
</html>

El código comprueba primero si el archivo .jpg existe llamando al método File.Exists. Si el archivo no existe, el código crea un nuevo Chart a partir de una matriz. Esta vez, el código llama al método Save y pasa el parámetro path para especificar la ruta de acceso y el nombre de archivo donde guardar el gráfico. En el cuerpo de la página, un elemento <img> usa la ruta de acceso para apuntar al archivo .jpg que se va a mostrar.

Ejecute el archivo ChartSave.cshtml.
Vuelva a WebMatrix. Observe que se ha guardado un archivo de imagen denominado chart01.jpg en la carpeta _ChartFiles.

Guardar un gráfico como archivo XML

Por último, puede guardar un gráfico como un archivo XML en el servidor. Una ventaja de usar este método sobre el almacenamiento en caché del gráfico o guardar el gráfico en un archivo es que podría modificar el XML antes de mostrar el gráfico si lo desea. Su aplicación debe contar con permisos de lectura/escritura para la carpeta del servidor donde desea colocar el archivo de imagen.

En la raíz de su sitio web, cree un nuevo archivo denominado ChartSaveXml.cshtml.
Reemplace el contenido existente por lo siguiente:
```
@{
    Chart chartXml;
    var filePathName = "_ChartFiles/XmlChart.xml";
    if (File.Exists(Server.MapPath(filePathName))) {
        chartXml = new Chart(width: 600,
                             height: 400,
                             themePath: filePathName);
    }
    else {
        chartXml = new Chart(width: 600,
                             height: 400);
        chartXml.AddTitle("Chart Title -- Saved at " + DateTime.Now);
        chartXml.AddSeries(
            name: "Employee",
            axisLabel: "Name",
            xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" },
            yValues: new[] { "2", "6", "4", "5", "3" });
        chartXml.SaveXml(path: filePathName);
    }
    chartXml.Write();
}
```
Este código es similar al código que vio anteriormente para almacenar un gráfico en la memoria caché, excepto que usa un archivo XML. El código comprueba primero si el archivo XML existe llamando al método File.Exists. Si el archivo existe, el código crea un nuevo objeto Chart y pasa el nombre de archivo como parámetro themePath. Esto crea el gráfico en función de lo que se encuentra en el archivo XML. Si el archivo XML aún no existe, el código crea un gráfico como normal y, a continuación, llama a SaveXml para guardarlo. El gráfico se representa mediante el método Write, como ha visto antes.

Al igual que con la página que muestra el almacenamiento en caché, este código incluye una marca de tiempo en el título del gráfico.

Cree una página denominada ChartDisplayXMLChart.cshtml y agregue el marcado siguiente:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Display chart from XML</title>
  </head>
  <body>
    <img src="ChartSaveXML.cshtml" />
  </body>
</html>

Ejecute la página ChartDisplayXMLChart.cshtml. Se muestra el gráfico. Tome nota de la marca de tiempo del título del gráfico.
Cierre el explorador.
En WebMatrix, haga clic con el botón derecho en la carpeta _ChartFiles, haga clic en Actualizar y, a continuación, abra la carpeta. El asistente creó el archivo XMLChart.xml de esta carpeta mediante el asistente Chart.
Ejecute la página ChartDisplayXMLChart.cshtml de nuevo. El gráfico muestra la misma marca de tiempo que la primera vez que ejecutó la página. Esto se debe a que el gráfico se genera a partir del XML que guardó anteriormente.
En WebMatrix, abra la carpeta _ChartFiles y elimine el archivo XMLChart.xml.
Ejecute la página ChartDisplayXMLChart.cshtml una vez más. Esta vez, la marca de tiempo se actualiza, porque el asistente Chart tuvo que volver a crear el archivo XML. Si lo desea, compruebe la carpeta _ChartFiles y observe que el archivo XML está presente de nuevo.

Recursos adicionales

Introducción al uso de una base de datos en sitios de ASP.NET Web Pages
Uso del almacenamiento en caché en sitios de ASP.NET Web Pages para mejorar el rendimiento
Clase Chart (referencia de la API ASP.NET Web Pages en MSDN)

Compartir a través de

Mostrar datos en un gráfico con ASP.NET Web Pages (Razor)

Asistente de gráficos

Elemento de gráfico

Creación de un gráfico a partir de datos

Uso de una matriz

Uso de una consulta de base de datos para datos de gráficos

Uso de datos XML

Instrucciones "Using" y nombres completos

Mostrar gráficos dentro de una página web

Aplicar estilo a un gráfico

Guardar un gráfico

Almacenamiento en caché de un gráfico

Guardar un gráfico como un archivo de imagen

Guardar un gráfico como archivo XML

Recursos adicionales

Comentarios

Recursos adicionales