El control Chart, incluído en el Silverlight Toolkit, nos permite mostrar datos de forma gráfica. Recientemente mi amigo Jorge Levy tuvo la necesidad de hacer una gráfica de barras sin las líneas de fondo mostradas por default:
Resultó que esto es algo muy sencillo de hacer, pero no tan obvio:
|
1 |
<div class="csharpcode"><pre class="alt"><span class="lnum"> 1: </span><span class="kwrd"><</span><span class="html">chartingToolkit:Chart</span> <span class="attr">Margin</span><span class="kwrd">="109,62,116,64"</span> |
|
1 |
<span class="lnum"> 2: </span> <span class="attr">Title</span><span class="kwrd">="Chart Title"</span><span class="kwrd">></span> |
|
1 |
<span class="lnum"> 3: </span> <span class="kwrd"><</span><span class="html">chartingToolkit:Chart.Axes</span><span class="kwrd">></span> |
|
1 |
<span class="lnum"> 4: </span> <span class="kwrd"><</span><span class="html">chartingToolkit:LinearAxis</span> <span class="attr">Orientation</span><span class="kwrd">="Y"</span> |
|
1 |
<span class="lnum"> 5: </span> <span class="attr">ShowGridLines</span><span class="kwrd">="False"</span> <span class="kwrd">/></span> |
|
1 |
<span class="lnum"> 6: </span> <span class="kwrd"></</span><span class="html">chartingToolkit:Chart.Axes</span><span class="kwrd">></span> |
|
1 |
<span class="lnum"> 7: </span> <span class="kwrd"><</span><span class="html">chartingToolkit:Chart.DataContext</span><span class="kwrd">></span> |
|
1 |
<span class="lnum"> 8: </span> <span class="kwrd"><</span><span class="html">PointCollection</span><span class="kwrd">></span> |
|
1 |
<span class="lnum"> 9: </span> <span class="kwrd"><</span><span class="html">Point</span><span class="kwrd">></span>1,10<span class="kwrd"></</span><span class="html">Point</span><span class="kwrd">></span> |
|
1 |
<span class="lnum"> 10: </span> <span class="kwrd"><</span><span class="html">Point</span><span class="kwrd">></span>2,20<span class="kwrd"></</span><span class="html">Point</span><span class="kwrd">></span> |
|
1 |
<span class="lnum"> 11: </span> <span class="kwrd"><</span><span class="html">Point</span><span class="kwrd">></span>3,30<span class="kwrd"></</span><span class="html">Point</span><span class="kwrd">></span> |
|
1 |
<span class="lnum"> 12: </span> <span class="kwrd"><</span><span class="html">Point</span><span class="kwrd">></span>4,40<span class="kwrd"></</span><span class="html">Point</span><span class="kwrd">></span> |
|
1 |
<span class="lnum"> 13: </span> <span class="kwrd"></</span><span class="html">PointCollection</span><span class="kwrd">></span> |
|
1 |
<span class="lnum"> 14: </span> <span class="kwrd"></</span><span class="html">chartingToolkit:Chart.DataContext</span><span class="kwrd">></span> |
|
1 |
<span class="lnum"> 15: </span> <span class="kwrd"><</span><span class="html">chartingToolkit:ColumnSeries</span> <span class="attr">DependentValuePath</span><span class="kwrd">="X"</span> |
|
1 |
<span class="lnum"> 16: </span> <span class="attr">IndependentValuePath</span><span class="kwrd">="Y"</span> |
|
1 |
<span class="lnum"> 17: </span> <span class="attr">ItemsSource</span><span class="kwrd">="{Binding}"</span> <span class="kwrd">/></span> |
|
1 |
<span class="lnum"> 18: </span><span class="kwrd"></</span><span class="html">chartingToolkit:Chart</span><span class="kwrd">></span> |
Aquí podemos observar que de la línea 3 a la 6 definimos la propiedad Axes de nuestro control Chart. Estamos indicando que tendremos un LinearAxis con orientación “Y” (las líneas muestran los valores para los datos en dicho eje) y definimos ShowGridLines como falso para evitar que aparezcan. El resultado es:




11 comments
Alex says:
Mar 16, 2011
hola, como puedo hacer un grafico de barras en xaml (y si es necesario vb, digo esto xq nose como hacerlo), usando como base un datagrid en donde el grafico cambie con respecto a la informacion que contenga el datagrid, osea si cambia el contenido del datagrid, el grafico cambiara automaticamente
saldos desde Ecuador
Alex says:
Mar 16, 2011
hola, como puedo hacer un grafico de barras en xaml (y si es necesario vb, digo esto xq nose como hacerlo), usando como base un datagrid en donde el grafico cambie con respecto a la informacion que contenga el datagrid, osea si cambia el contenido del datagrid, el grafico cambiara automaticamente
saldos desde Ecuador.
usando sl 4.0
JAMolina.com » Blog Archive » DataGrid, ColumnSeries y un toque de MVVM says:
Mar 17, 2011
[...] una pregunta pregunta en un post que había escrito previamente. La pregunta era como se puede cambiar una gráfica a la par con los [...]
Arturo Molina says:
Mar 17, 2011
Que tal Alex, como la respuesta esta un poquito larga, mejor hice un post aquí: http://jamolina.com/2011/03/datagrid-columnseries-y-un-toque-de-mvvm/
Alex says:
Mar 22, 2011
Arturo , gracias por responder.
aprecio tu ayuda, en verdad gracias… por lo que veo es silverlight 3.0 verdad..!! bueno si es asi, espero que sirva para el 4.0.
pido me disculpes por lo mal que me hice entender lo que te decia sobre el cambio o la variacion del grafico no es con un control como el que usasa en este ejemplo si mas bien el cambio del grafico con respecto a lo que presentes en le datagrid, por ejemplo lo que tengo es, un datagrid que se llena cuando yo escribo un dato en un texbox y doy clic en un boton que hace que se filtre informacion de una db, una informacion como por ejemplo los paises de america del sur, y al dar clic en el boton solo me me presentan los paises de america del sur con sus respectivos datos y con ellos el chart presenta los datos, si elijo paices de europa y doy clic en el boton esto hara que en le datagrid se mepresenten solo los paises de europa con toda su inofrmacion y el grafico en este instante que cambia la informacion del datagrid se cambia tambien el grafico.
eso es lo que necesito saber como hacer.
y nuevamente mil disculpas por no haberme explicado bien.
Arturo Molina says:
Mar 22, 2011
Que tal Alex, la aplicación está hecha en Silverlight 4, lo del “3″ es solo el nombre de la solución. Para lo que quieres hacer necesitarías enviar datos de tu vista al modelo y tener una especie de servicio que se encargara de filtar los datos para que te regrese sólo lo que quieres. También te recomiendo que le des un vistazo al control PivotViewer: http://silverlight.net/learn/pivotviewer/ que es muy útil para visualización de datos.
Alex says:
Mar 25, 2011
Que tal Arturo, otra vez molestandote, ya tengo el filtrado y trabaja bien, uso wcf ria service, no tengo problemas en conexion y filtrado de datos, mi problema es que nose como presentar los datos en forma grafica en el chart.. auxilioooooo
algo adicional ya que eres tan gentil en responderme, como hago para sumar, promediar valores ya que en el datagrid lo tengo agrupado, y algo mas deseo que se presente de forma que los datos no esten expandidos sino colapsados cuando yo haga un filtro, ya que se me presentan por defecto expandidos los grupos, el agrupamiento lo tengo hecho desde xaml asi como el filtrado de datos.
Salu2 Arturo.
Carlos says:
Mar 27, 2011
HOLA.
Como puedo eliminar el titulo de un grafico.
Gracias .
Alex says:
Mar 29, 2011
Q tal carlos, al colocar el control de pivotviewer y ejecutar me sale q Dim busyindicator as busyindicator (es ambiguo y se ha importado de “nombre del proyecto.controls, System.windows.comtrols”) y de ahi no paso ya q no me deja por ese inconveniente, mi pregunts es como lo resuelvo, lo mismo me pasa cuando agrego un control chart, por eso he tartado de buscar el control de chart de devxpress la version 10.2.5.
saludos.
Arturo Molina says:
Mar 30, 2011
Que tal Alex, para mandar los datos a la gráfica, checa este post: http://blogs.ligasilverlight.com/2011/03/datagrid-columnseries-y-un-toque-de-mvvm/
De lo otro que mencionas, creo que no te entiendo. ¿Podrías intentar mandarme un screenshot (aquí en los comentarios puedes poner imágenes) para ver mas o menos que es lo que necesitas? Si quieres crea un nuevo thread porque en este ya se está haciendo muy chiquito el espacio
Arturo Molina says:
Mar 30, 2011
Que tal Carlos, simplemente no especifiques nada en la propiedad Title del control Chart