Chart en C# - Control para Graficos en Windows Form


El siguiente articulo es un pequeño tutorial sobre como utilizar el Control "Chart" de .NET para crear gráficos en una aplicación, en este caso una aplicación para Windows, para su funcionamiento es simple y permite ayudarnos para crear gráficos en alguna de nuestras aplicaciones donde sea necesario este tipo de implementacion, así que tendremos que crear un proyecto nuevo del tipo Windows Form donde necesitaremos principalmente los siguientes componentes:
- 3 Controles Textbox para ingresar los valores al gráfico.
- 2 Botones para las 2 diferentes acciones que realizaremos.
- 1 Control Chart que si no lo ubican se encuentra en la sección Data de su Visual Studio o Visual C# Express.

De tal forma que el resultado sea similar al de la imagen mostrada, ahora pasaremos al código para el primer botón que se encargara de asignar los valores al control Chart.

TUTORIAL C#:



En el evento clic del botón incluiremos el siguiente código, recuerden que ustedes pueden modificar a su gusto las propiedades del Chart como son la combinación de colores etcétera:

private void button1_Click(object sender, EventArgs e){
// Arreglos del Grafico
string[] seriesArray = { "Categoria 1", "Categoria 2", "Categoria 3" };
  int[] pointsArray = { Convert.ToInt32(textBox1.Text), Convert.ToInt32(textBox2.Text), Convert.ToInt32(textBox3.Text) };
// Se modifica la Paleta de Colores a utilizar por el control.
  this.chart1.Palette = ChartColorPalette.SeaGreen;
// Se agrega un titulo al Grafico.
  this.chart1.Titles.Add("Categorias");
// Agregar las Series al Grafico.
for (int i = 0; i < seriesArray.Length; i++)
{
// Aqui se agregan las series o Categorias.
  Series series = this.chart1.Series.Add(seriesArray[i]);
// Aqui se agregan los Valores.
series.Points.Add(pointsArray[i]);
  } 
}

Una vez realizado esto ya quedara listo nuestro gráfico para los valores que ingresemos manualmente mediante nuestro formulario, pero como extra a este proyecto ademas podemos exportar nuestro gráfico y guardarlo como imagen con el siguiente código c#:

private void button2_Click(object sender, EventArgs e)
{
SaveFileDialog saveFileDialog1 = new SaveFileDialog();
saveFileDialog1.Filter = "JPeg Imagen|*.jpg|Bitmap Imagen|*.bmp|PNG Imagen|*.png";
saveFileDialog1.Title = "Guardar Grafico en Imagen";
saveFileDialog1.ShowDialog();
if (saveFileDialog1.FileName != "")
{
System.IO.FileStream fs =
(System.IO.FileStream)saveFileDialog1.OpenFile();
switch (saveFileDialog1.FilterIndex)
{
case 1:
this.chart1.SaveImage(fs, ChartImageFormat.Jpeg);
  break;
case 2:
this.chart1.SaveImage(fs, ChartImageFormat.Bmp);
  break;
case 3:
this.chart1.SaveImage(fs, ChartImageFormat.Png);
break;
}
fs.Close();
}
}

Y con eso tenemos listo nuestro gráfico, ahora podemos explorar otras opciones y jugar un poco con el codigo, espero les haya sido de utilidad saludos.

Comentarios

  1. Muy bueno el tutorial.
    Saludos

    ResponderEliminar
    Respuestas
    1. Gracias por comentar, espero que te haya servido.

      Eliminar
    2. WOW JUSTO LO QUE ESTABA BUSCANDO !!
      FELICIDAES ESTA MUY BUENO ESTE BLOG

      Eliminar
  2. A mi no me agrega nada de "Series series = this.chart1.Series.Add(seriesArray[i]);" No encuentra la declaración de esa variable. Si pudieras poner las clases que usas XD

    ResponderEliminar
    Respuestas
    1. using System.Windows.Forms.DataVisualization.Charting;

      Te recomiendo que cuando tengas esos detalles des clic derecho en la palabra que no te reconoce en este caso Series, y en la caja de dialogo donde te muestre Resolve te dará la opción de agregar los using que hagan falta.

      Eliminar
    2. Gracias amigo. Esto no es facebook pero un "like" (Y). XD

      Eliminar
    3. No es Facebook pero podemos recibir +1 o comparte este articulo en tu Facebook ;)

      Eliminar
  3. Disculpa. pero no encuentro el contro CHART en mi VS 2010 .... como lo puedo mostrar en mi barra de herramientas?

    ResponderEliminar
    Respuestas
    1. Se encuentra en el Apartado Data no en el All Windows Form

      Eliminar
  4. Cuando usas el método Add , no se superponen los datos?

    ResponderEliminar
    Respuestas
    1. Si te refieres Al Add del Boton donde agregas valores al gráfico, la respuesta es Si.

      Eliminar
  5. Gracias!!! muy buen blog jjeje^^

    ResponderEliminar
  6. yo ya tengo los arreglos y al querer poner Series series = this.chart1.Series.Add(datos[i]); me marca error desde this, pense que por que el arreglo esataba declarado en int, pero ya lo cambie y sigue igual

    ResponderEliminar
  7. me aparece este error (cannot convert method group 'add' to non-delegate type 'system.windows.forms.datavisualization.charting.series' did you intend to invoke the method?)

    ResponderEliminar
  8. Excelente lo que estaba buscando Gracias

    ResponderEliminar
  9. Muy buen tuto, pero para manejar graficas en tiempo real como lo podria hacer siempre con el chart o necesitaria algo mas.

    ResponderEliminar
  10. Buen tutorial, solo una cuestion el chart que yo uso lo tengo conectado a una base de datos y en las seies so es una pero no me devuelve todos los datos solo unos 5 datos y me gustaria ponerlo de tal manera que salgan todos los que se hallan elegido por consulta, las ocnsultas las tengo y funcionan pero aun asi no me devuelven todos los datos, espero haberme explicado y si me podrias orientar te lo agradeceria. de antemano gracias. Aqui te dejo mi corrreo por si me puedes ayudar tusk_of_tiger@hotmail.com

    ResponderEliminar
  11. como seria para asp.net

    ResponderEliminar
  12. el tuto estubo muy bn pero no encuentro la menra de hacerlo en asp.net c# 3.5

    ResponderEliminar
  13. Cuando tuve que hacer esto en asp.net tuve que utilizar controles creados por terceros, en mi caso los Rad Controls de Telerik.

    ResponderEliminar
  14. hola Irving Flores me podrias decir por favor que usign utilizaste en SaveFileDialog saveFileDialog1 = new SaveFileDialog(); y como puedo colocarle numeros porcentuales a las barras por ejemplo un "95%" a una barra dependiendo de lo que tenga el textbox muchas gracias de antemano

    ResponderEliminar
    Respuestas
    1. Como consejo cuando un using no este definido para algo que necesitas basta con dar clic derecho en la palabra SaveFileDialog en este caso y en Resolve o Resolver dependiendo del lenguaje de tu Visual Studio tienes la función de agregar los using que te hagan falta. sobre los números porcentuales no lo he intentado aun y no se si se pueda hacer concatenandolo.

      Eliminar
    2. cuando le doy clic derecho no me aparece la opción que me dices por favor me podrias mandar el using que se necesita para este caso muchas gracias

      Eliminar
    3. Gracias por el tutorial, pero tengo el mismo error SaveFileDialog saveFileDialog1 = new SaveFileDialog(); y no es de using no sale ninguna opcion, estoy trabajando aspx. Te agradezco la ayuda porfa

      Eliminar
  15. Te felicito por el post y el blog, me esta ayudando mucho

    ResponderEliminar
  16. Al volver a introducir datos me aparece una opcion de argument exception en series :/

    ResponderEliminar
  17. me puedes pasar un ejemplo este es mi correo
    erickaurazo@gmail.com

    ResponderEliminar
  18. Gracias, solo te falto como colocar las referencias en mi caso en Visual Studio 2012, pero busque como gracias

    ResponderEliminar
  19. Hola Irving, tengo un problema al exportar datos desde un datagridview a un gráfico usando Chart control en visual C# 2010.
    Necesito que al seleccionar distintas columnas del datagridview, éste me genere un gráfico específico de lo seleccionado. Es posible? teniendo en cuenta que en el datagridview hay datos de tipo fecha, strings y enteros. Cómo me puedes ayudar?

    ResponderEliminar
  20. Hola, tengo que hacer un grafico con 15 series y el problema es que me grafica a todas las series amontonadas en el centro... Como hago para separarlas un poco mas y que no queden todas juntas? Gracias...

    ResponderEliminar
  21. Como le puedo hacer para extraer datos de un documento con extension .txt

    ResponderEliminar
  22. Exelente lo suyo , realmente exelente.

    ResponderEliminar
  23. Hola!, tengo que cambiar el tipo de grafico con este ejercicio de este blog, pero no se como hacerlo, creo que el codigo para cambiar el tipo de grafica va en el boton, y eh intentado hacerlo con esto, chart1.Series["series"].ChartType = SeriesChartType.Line; y otra cosa, no se que significa esta parte ["series"]. Alguna idea gracias...

    ResponderEliminar
    Respuestas
    1. De casualidad lograste cambiar el tipo de grafico ?
      Estoy en ese problema ahora

      Eliminar
  24. Muchas gracias! ¡Es genial! También puede probar la función de gráficos de barra asp.net a partir de shieldui, que yo he descubierto recientemente, mira aquí: https://demos.shieldui.com/mvc/bar-chart/axis-marker. Se puede personalizar tantas veces como quiera, son magníficas!

    ResponderEliminar

Publicar un comentario

Entradas populares de este blog

Llenar un DropdownList con Datos ASP.NET C#

Añadir Items a un ListBox desde un Control Textbox C#

Crear un DataTable desde Codigo