Hello,
On this topic, I'll se this project as reference : http://es.infragistics.com/community/forums/p/96839/477946.aspx
I want to design a few things :
-Display axis X and Y like this : http://gyazo.com/4512ad3761bff3ccc0411f5ae50617e4
-Squares need to be with max size between two points : http://gyazo.com/1470cfeafbafad0cd50f1599f313274f
-Display color scale at the column 1 and not in the DataChart that is in the column 0 by default
-The tooltip is open only when the user between 2 or 4 squares like here : http://gyazo.com/799b7d647d4f759d65ee835810dbc7e8, and axes values need to be highlited.
Thanks for your help
Hi teamtim,
- For the X and Y axis, are you referring to the tickmarks? You can extend the tickmarks in the chart so they stick out a bit similar to in that screenshot by setting the TickLength property on the axis. Please keep in mind that this only affects the major tickmarks (tickmarks that have a label next to them). Minor tickmarks cannot be extended past the chart boundaries.
- The square sizes are entirely up to the DataTemplate that is rendering them. If you are using a bubble series then you should be able to set their size while using the SizeScale property. Don't manually set the width and height in your template and it should automatically adjust the marker size for you. If not you can always bind to whatever you set the RadiusScale to be and use that to calculate the size that you want.
- I'm not sure what you mean by "displaying color scale at column 1 and not in DataChart that is in column 0 by default".
- The tooltip will appear when the mouse is over the marker for the series. As for axis value highlighting, are you talking about highlighting the actual axis label values that appear at the bottom? What are you expecting will cause the axis to highlight?
I manage to set the tickmarks property, so it's good.
The square size need to be dynamic because sometimes I display 4 or 6 squares to 50 squares, so I can't choose a size because the display will not be good.
Here is my code :
<ig:XamDataChart x:Name="DataChart" Grid.Row="1" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" HorizontalZoomable="True" VerticalZoomable="True" Visibility="{Binding Path=Visibility}">
<ig:XamDataChart.Axes> <ig:NumericXAxis x:Name="XAxis" IsLogarithmic="True" LogarithmBase="150" MaximumValue="150" TickLength="2" MinimumValue="0"> <ig:NumericXAxis.Scaler> <ig:HorizontalLinearScaler /> </ig:NumericXAxis.Scaler> </ig:NumericXAxis> <ig:NumericYAxis x:Name="YAxis" IsLogarithmic="True" LogarithmBase="25" MaximumValue="25" TickLength="2" MinimumValue="0"> <ig:NumericYAxis.Scaler> <ig:VerticalLogarithmicScaler /> </ig:NumericYAxis.Scaler> </ig:NumericYAxis>
</ig:XamDataChart.Axes> <ig:XamDataChart.Series> <ig:BubbleSeries BorderThickness="2" FillMemberPath="ValueZ" ItemsSource="{Binding Path=Collection}" MarkerType="Square" RadiusMemberPath="ValueZ" XAxis="{Binding ElementName=XAxis}" XMemberPath="ValueX" YAxis="{Binding ElementName=YAxis}" YMemberPath="ValueY">
<ig:BubbleSeries.RadiusScale> <ig:SizeScale/> </ig:BubbleSeries.RadiusScale> <ig:BubbleSeries.FillScale> <ig:ValueBrushScale Brushes="{StaticResource BubbleFillBrushCollection}" IsLogarithmic="False" MaximumValue="23" MinimumValue="0" /> </ig:BubbleSeries.FillScale> </ig:BubbleSeries> </ig:XamDataChart.Series> </ig:XamDataChart>
Display the color scale at the right of the graph and not inside.
At each cross between x and y axis, if there is a mouseover display the tooltip of the point next to it.
The point can be y-1 or y+1 depends if the mouseover is at the limit of the graph.
The XamDataChart can't size the squares like this for you on it's own. You need to tell it how big you want each square to be. That's what the RadiusScale property is for. You point it towards a property in your data source that will determine the size of the bubble. This will in turn make your marker the appropriate size. If you need the size to be dynamic then it will need to be calculated at run time based on the number of data points present in the series and then assigned to the data points size property.
For the color scale, are you talking about the ScaleLegend? http://help.infragistics.com/doc/WPF/2015.1/CLR4.0/?page=DataChart_Legends.html
The legend is a separate control from the XamDataChart so you can place it anywhere.
Unfortunately tooltips will only show if you are hovering the mouse over a series marker. If your mouse is placed between two data points and it is not physically over one of the markers then no tooltip will show.
Out of curiosity, what kind of graph are you trying to create? I am not familiar with the type of graph where each data point is sized equally with the other data points to fill the available space.
The size of the square is completely determined by the underlying value for the node. The only way to keep the size of the square the same as all the other ones is to make sure the value used for each node is the same. Take a look at my attached sample for a basic heatmap example. In my data I have a property called SizeValue which is used by the NodeBinder to control the size of the node relative to other nodes. I set each data item to use the same value for SizeValue so that each node is the same size. I then have a HeatValue property which is used by the ColorMapper to map the color of the node. This is what really creates the heatmap.
Thanks for your post.
High density scatter isn't good for my case because full space of plot need to be with color.
Heat Treemap is good, but the size of sqares aren't the same, for my use, only color need to change like a real heatmap.
Scale depends of values, I have max and min value, so the control need to calculate color scale if I give it in some bindings.
Regards
We have a number of ways for creating heatmaps, two of which you have seen already. We also have the XamTreemap which can be configured into a heatmap: http://es.infragistics.com/samples/wpf/treemap/heat-treemap. The XamDataChart also has something called a High Density Scatter Series which is good for generating a heatmap-like graph if you have a lot of data.
Unfortunately at this time we do not have a control dedicated to heatmaps so using one of the above approaches is the only option at the moment.
Can you explain the "with scale" part of "I want to create a real heatmap, with scale." As I pointed out we have a number of ways you can render a heatmap but I'm not sure I understand the "with scale" part of your requirement. Depending on what this is, one control might be better suited for this.
For the size, I understand that I need to calculate the size.
For the color scale, it's a fill scall with values and colors like 10 for blue and 50 for red.
I want to create a real heatmap, with scale. Not like this partial one : http://es.infragistics.com/community/blogs/kiril_matev/archive/2013/04/30/switch-the-lights-on-with-2d-data-with-a-heatmap-control.aspx
I try from http://es.infragistics.com/community/blogs/marina_stoyanova/archive/2014/02/06/building-a-heatmap-with-wpf-grids.aspx, but result are not user friendly.
So I don't know wich control to use.