Hi,
The marker size behavior is broken in 17.2 (as compared to 16.1). In the following sample, 16.1 correctly sets the radius of the circular marker. In 17.2, the bubbles show up in some arbitrary size (not the radius given in RadiusMemberPath), and changes when the chart is resized. Is there anyway the 16.1 behavior can be replicated in 17.2 XamDataChart?
<Window x:Class="DataChartAxisLabels.BubbleSeriesWindow" xmlns="">schemas.microsoft.com/.../presentation" xmlns:x="">schemas.microsoft.com/.../xaml" xmlns:ig="">schemas.infragistics.com/xaml" xmlns:local="clr-namespace:DataChartAxisLabels" Title="MainWindow" Height="700" Width="500"> <ig:XamDataChart > <ig:XamDataChart.Resources><local:BubbleDataSample x:Key="BubbleDataSample"/>
</ig:XamDataChart.Resources> <ig:XamDataChart.Axes> <ig:NumericXAxis x:Name="numericXAxis" MinimumValue="0" MaximumValue="200" Interval="20" /> <ig:NumericYAxis x:Name="numericYAxis" MinimumValue="0" MaximumValue="200" Interval="20" /> </ig:XamDataChart.Axes> <ig:XamDataChart.Series> <!-- ========================================================================== --> <ig:BubbleSeries ItemsSource="{StaticResource BubbleDataSample}" XAxis="{Binding ElementName=numericXAxis}" YAxis="{Binding ElementName=numericYAxis}" XMemberPath="X" YMemberPath="Y" RadiusMemberPath="Radius" > </ig:BubbleSeries> <!-- ========================================================================== --> </ig:XamDataChart.Series> </ig:XamDataChart></Window>
The same code above results
16.1
17.2
Regards,
Anu
Hello Anu,
I have been investigating into your requirement in this case, and between versions 16.1 and 17.2, the behavior of the BubbleSeries in the XamDataChart changed. In 16.1, the BubbleSeries would scale the sizes of your bubbles directly from the radius values, but in version 17.2, it is more of a "relative" scaling to each of the data values, instead.
In order to change the behavior back to the way it was in 16.1, I would recommend setting the RadiusScale property of the BubbleSeries. This property takes a SizeScale object, which has a MaximumValue and a MinimumValue property. If you set these MaximumValue and MinimumValue properties to your minimum and maximum radius value from your data item, respectively, the BubbleSeries will act as it did in 16.1.
I am attaching a sample project to demonstrate usage of the SizeScale object with a BubbleSeries. I hope this helps.
Please let me know if you have any other questions or concerns on this matter.
XamDataChartBubbleSeriesCase.zip
Hi Andrew,
This works, thanks!
Now, There are two more XamDataChart changes which I am trying to revert -
1. The marker stroke thickness which changed from .5 to 2. I have been able to fix this by providing an updated style to the chart (not ideal, would prefer this use the Series thickness rather than yet another arbitrary value).
2. The legend template for a marker with FillScale set to a ValueBrushScale with provided BrushCollection. In 16.1, the legend's brush was a blend of the given brushes. Now it looks blank / white.
Regards, Anu
Thank you for your update on this matter. I am glad you were able to resolve points 1 and 2 using a MarkerTemplate and a the BubbleSeries.MarkerBrush. I have to admit, though, I am unsure which version of 16.1 you are using where the BubbleSeries marker badge reflects the ValueBrushScale in this case. I have tested the sample project I had sent you against the base version (16.1.20161.1000) and the latest version (16.1.20161.2231) of Infragistics for WPF 2016.1, and this does not appear to be the case.
Regarding the dash array, as far as I can see, this was never supported. I have spoken with my colleagues on this, and this was intentional, as the pattern that you provide for a dash array for a particular series may not be able to be well represented in the Legend. The recommended way to go about doing this is to use a LegendItemBadgeTemplate for your series. If you would like to see this possibly implemented in a future version, I would recommend suggesting a new product idea for it at our WPF ideas site.
Regarding the overlay misalignment, this appears to be an issue with the default styling of the LegendItemTemplate for the ValueOverlay. As such, to work around this, I would recommend bringing in this default template and setting the Margin on the root element to “4” instead of the current “1.” This template can be found in the generic.shared.xaml file commonly found at the following directory:
C:\Program Files (x86)\Infragistics\<your version here>\WPF\DefaultStyles\XamDataChart
Inside, there is a DataTemplate with an x:Key of “OverlayLegendItemTemplate” where the StackPanel has a Margin of ‘1’. If you set this to ‘4’ and then bind the ValueOverlay’s LegendItemTemplate to it, you will resolve this issue.
I have attached a sample project to demonstrate this workaround.
This is unexpected behavior, and as such, I have asked our engineering staff to examine it further. To ensure it receives attention, I have logged it in our internal tracking systems with a development ID of 255621. I have also created you a private support case with an ID of CAS-197040-Y9K8G3 so that you can track this issue. You can access it here.
XamDataChartBubbleSeriesCaseWorkaround.zip
Thanks again!
Regarding the value brush legend, the version we use is 16.1.20161.1000. The attaching code + screenshot of how the legend would be shown without any template changes.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ig:XamDataChart Legend="{Binding ElementName=legend}">
<ig:XamDataChart.Resources>
<bubbleData:BubbleDataSample x:Key="BubbleDataSample"/>
</ig:XamDataChart.Resources>
<ig:XamDataChart.Axes>
<ig:NumericXAxis x:Name="numericXAxis" MinimumValue="0" MaximumValue="200" Interval="20" />
<ig:NumericYAxis x:Name="numericYAxis" MinimumValue="0" MaximumValue="200" Interval="20" />
</ig:XamDataChart.Axes>
<ig:XamDataChart.Series>
<ig:BubbleSeries ItemsSource="{StaticResource BubbleDataSample}"
XAxis="{Binding ElementName=numericXAxis}"
YAxis="{Binding ElementName=numericYAxis}"
XMemberPath="X"
YMemberPath="Y"
RadiusMemberPath="Radius"
FillMemberPath="Fill"
Thickness=".5"
MarkerType="Tetragram" MarkerOutline="Transparent" MarkerBrush="#FF9E73C1"
Title="Tetra">
<ig:BubbleSeries.RadiusScale>
<ig:SizeScale IsLogarithmic="False" MaximumValue="50" MinimumValue="10"/>
</ig:BubbleSeries.RadiusScale>
<ig:BubbleSeries.FillScale>
<ig:ValueBrushScale MinimumValue="0" MaximumValue="1">
<ig:ValueBrushScale.Brushes>
<SolidColorBrush>Green</SolidColorBrush>
<SolidColorBrush>Red</SolidColorBrush>
</ig:ValueBrushScale.Brushes>
</ig:ValueBrushScale>
</ig:BubbleSeries.FillScale>
</ig:BubbleSeries>
</ig:XamDataChart.Series>
</ig:XamDataChart>
<StackPanel Grid.Column="1">
<ig:Legend x:Name="legend" Padding="5" Margin="-14,0,-4,0"
VerticalAlignment="Top" HorizontalAlignment="Center" Orientation="Vertical" >
</ig:Legend>
</StackPanel>
</Grid>
and
public class BubbleDataSample : BubbleDataCollection
{
public BubbleDataSample()
List<BubbleDataPoint> items = new List<BubbleDataPoint>
new BubbleDataPoint {X = 100, Y = 100, Radius = 50, Fill = 0},
new BubbleDataPoint {X = 80, Y = 80, Radius = 35, Fill = 1 },
new BubbleDataPoint {X = 80, Y = 160, Radius = 35, Fill = 0 },
new BubbleDataPoint {X = 160, Y = 80, Radius = 35, Fill = 1 },
new BubbleDataPoint {X = 160, Y = 160, Radius = 35, Fill = 0 },
new BubbleDataPoint {X = 60, Y = 60, Radius = 25, Fill = 1 },
new BubbleDataPoint {X = 60, Y = 140, Radius = 25, Fill = 0 },
new BubbleDataPoint {X = 140, Y = 60, Radius = 25, Fill = 1 },
new BubbleDataPoint {X = 140, Y = 140, Radius = 25, Fill = 0 },
new BubbleDataPoint {X = 40, Y = 40, Radius = 15, Fill = 1 },
new BubbleDataPoint {X = 40, Y = 120, Radius = 15, Fill = 0 },
new BubbleDataPoint {X = 120, Y = 40, Radius = 15, Fill = 1 },
new BubbleDataPoint {X = 120, Y = 120, Radius = 15, Fill = 0 },
new BubbleDataPoint {X = 20, Y = 20, Radius = 10, Fill = 1 },
new BubbleDataPoint {X = 20, Y = 180, Radius = 10, Fill = 0},
new BubbleDataPoint {X = 180, Y = 20, Radius = 10, Fill = 1 },
new BubbleDataPoint {X = 180, Y = 180, Radius = 10, Fill = 0}
};
var sortedItems = items.OrderByDescending(item => item.Radius).ToArray();
for (int i = 0; i < sortedItems.Length; i++)
sortedItems[i].Label = "Item " + (i + 1);
this.Add(sortedItems[i]);
}
Thank you for your update on this matter.
I have checked your sample code against version 16.1.20161.1000, and I am seeing the same behavior. I had thought that you were expecting to see a gradient in the Legend item badge in this case, but as shown, this was never the case, and if a MarkerBrush is assigned, that brush will show up in the Legend item badge.
Perhaps I have misunderstood you in this case? What is the behavior you are expecting to see?
As you saw in the sample, there is no MarkerBrush on the Series, yet in 16.1 the legend item badge has some color (not sure how the color is assigned - some default?).
In 17.2, the legend item badge has no color at all if there is no MarkerBrush. I think the change to use the MarkerBrush is fine, as earlier it was auto assigned / defaulted.
It appears that you are setting the MarkerOutline property to "Transparent" in your code, which is the outer stroke color of the bubbles in the BubbleSeries. The default MarkerBrush for a BubbleSeries in 17.2 is white, and so by not setting this and setting a Transparent MarkerOutline, you will essentially have a white, borderless circle as the legend badge. If your Legend is white in this case, I wouldn't expect you to be able to see anything, and I believe this is likely what is happening here. As such, I would recommend continuing to set the MarkerBrush in this case.