Hello,
On this topic, I'll se this project as reference : http://ko.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
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.
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?