Compartir a través de

Tutorial: Enlazar datos entre un gráfico y una base de datos

  • Artículo

Este tutorial muestra cómo enlazar datos desde una base de datos, así como el uso de la información sobre herramientas y el ajuste de las etiquetas de eje en el gráfico.

Para completar este tutorial, debe tener instalada la base de datos OLTP de ejemplo AdventureWorks2008 en la instancia de SQL Server (como SQL Server 2008 Express).Para instalar la base de datos de ejemplo, vaya a www.codeplex.com.

Enlazar datos desde una base de datos

Primero enlace los datos desde un control de origen de datos al control Chart y, a continuación, enlace columnas específicas desde el origen de datos al valor X y a los valores Y de una serie.

Para enlazar datos desde una base de datos a un gráfico

  1. En la superficie de diseño del formulario Windows Forms o de la aplicación web, arrastre y coloque el control Chart desde el Cuadro de herramientas:

  2. En la categoría Datos de la ventana Propiedades del control Chart, haga clic en la propiedad DataSourceID (ASP.NET) o en la propiedad DataSource (Windows Forms), haga clic en la flecha desplegable y, a continuación, seleccione <Nuevo origen de datos>.

  3. Seleccione Base de datos en la página Elegir un tipo de origen de datos y, a continuación, haga clic en Siguiente.

  4. En la página Elegir la conexión de datos, haga clic en Nueva conexión.

  5. En el cuadro de diálogo Agregar conexión, asegúrese de que el campo Origen de datos esté establecido en Microsoft SQL Server (SqlClient) y, a continuación, proporcione el nombre del servidor y el de la base de datos de la base de datos AdventureWorks2008.

  6. Haga clic en Probar conexión y luego en Aceptar.

  7. Haga clic en Siguiente dos veces.

  8. Seleccione Especificar una instrucción SQL en la página Configurar la instrucción Select y, a continuación, haga clic en Siguiente.

  9. Copie y pegue la siguiente consulta en el campo Instrucción SQL y, a continuación, haga clic en Siguiente.

    select LastName, SalesYTD, SalesLastYear 
  from HumanResources.Employee as e
  inner join Person.Person as p on e.BusinessEntityID = p.BusinessEntityID
  inner join Sales.SalesPerson as s on e.BusinessEntityID = s.BusinessEntityID

  10. Haga clic en Consulta de prueba y, a continuación, en Finalizar.

    Ya está enlazado un origen de datos SQL al control Chart con las columnas de datos especificadas en la consulta.

Para enlazar datos a los valores X e Y del gráfico

  1. Abra el editor de la colección Series para el control Chart.

  2. En la categoría Origen de datos de la ventana Propiedades de la serie predeterminada, haga clic en la propiedad XValueMember, después en la flecha desplegable y, a continuación, seleccione LastName.

    La lista desplegable XValueMember muestra todas las columnas devueltas por el origen de datos que está enlazado al control Chart.

  3. Haga clic en la propiedad YValueMembers, después en la flecha desplegable y, a continuación, seleccione SalesYTD.

    El valor X de la serie predeterminada ya está enlazado a la columna LastName y el primer valor Y de la serie predeterminada ya está enlazado a la columna SalesYTD.

  4. En el Editor de la colección de series, haga clic en Agregar y, a continuación, haga lo mismo en la nueva serie con los siguientes valores:

    Propiedad

    Valor

    XValueMember

    LastName

    YValueMembers

    SalesLastYear

  5. Haga clic en Aceptar.

  6. Ejecute la aplicación.

    Ahora puede ver dos series que muestran los puntos de datos que se rellenan automáticamente desde el origen de datos.Quizá también observe que el gráfico no muestra a todos los empleados. Se debe a que el control Chart ajusta automáticamente las etiquetas para facilitar la lectura.

Ajustar etiquetas y títulos de eje

Use la propiedad de colección Axes del Editor de la colección ChartArea para personalizar las etiquetas y los títulos de los ejes del área del gráfico.

Para ajustar las etiquetas de eje y agregar títulos

  1. Abra el editor de la colección ChartArea para el control Chart.

  2. En la ventana Propiedades del área del gráfico predeterminada, en la categoría Ejes, haga clic en la propiedad de colección Axes y, a continuación, haga clic en el botón de puntos suspensivos (…).De esta forma, se abre el Editor de la colección Axis.

    La colección Axes (matriz Axis) contiene los ejes del área de gráfico.

  3. En la categoría Etiquetas de la ventana Propiedades del eje X (principal), expanda la propiedad LabelStyle, establezca su propiedad Interval en 1 y, a continuación, compruebe que no esté establecida la propiedad IntervalStyle.

    De esta forma, el control Chart muestra la etiqueta de todos los puntos de datos que aparecen.

  4. En la categoría Título, establezca la propiedad Title en "Empleado".

  5. En la categoría Título de la ventana Propiedades del eje Y (principal), establezca la propiedad Title en "Ventas".

  6. Haga clic en Aceptar dos veces.

  7. Ejecute la aplicación.

    El control Chart muestra ahora a todos los empleados del eje X principal organizándolos automáticamente en un ángulo de 90 grados.

Agregar información sobre herramientas a las series

Ahora agregará información sobre herramientas a dos series para diferenciar los puntos de datos.

Para agregar información sobre herramientas a las series

  1. Vuelva a abrir el editor de la colección Series para el control Chart.

  2. Seleccione la primera serie.

  3. En la ventana Propiedades de la primera serie, en la categoría Área de mapa, establezca la propiedad Tooltip en "#VALX: #VAL ventas de este año.".

    Observe que si hace clic en el botón de puntos suspensivos del campo de valor de la propiedad Tooltip, se abre el Editor de palabras clave String.Este cuadro de diálogo le ayuda a compilar una cadena de información sobre herramientas con palabras clave.

  4. En la ventana Propiedades de la primera serie, en la categoría Área de mapa, establezca la propiedad Tooltip en "#VALX: #VAL ventas del año pasado.".

  5. Haga clic en Aceptar.

  6. Ejecute la aplicación y, a continuación, mantenga el cursor en la parte superior de cada punto de datos para ver su información sobre herramientas.

Paso siguiente

Ya ha aprendido cómo enlazar datos desde una base de datos, así como el uso de la información sobre herramientas y el ajuste de las etiquetas de eje en el gráfico.Para obtener información sobre cómo usar eventos con el fin de personalizar el gráfico, vea Tutorial: Personalizar un gráfico con eventos.

Vea también

Referencia

System.Windows.Forms.DataVisualization.Charting

System.Web.UI.DataVisualization.Charting

Conceptos

Enlazar datos a series

Otros recursos

Introducción