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. I will answer your new questions in the order they were asked:
1. I am glad that you were able to resolve this using a Style for the chart. The best recommendation I can make in this case is usage of a MarkerTemplate for your series, as we do not currently have any sort of "Marker Stroke Thickness" property available on the BubbleSeries. You can read further about usage of a MarkerTemplate here.
2. As far as I am aware, the Legend brush was never tied to the ValueBrushScale that was provided, unless you use an ItemLegend and set the LabelMemberPath property of the BubbleSeries, which will show each item and the fill used for the bubble. I rebuilt the sample project above that I had sent you against the latest version of 16.1 (16.1.20161.2231), and the ActualMarkerBrush property is what is shown in the Legend, even when a ValueBrushScale is used.
In order to have a marker item in the Legend that is a gradient, I would recommend setting the MarkerBrush property of your BubbleSeries to a LinearGradientBrush made up of the colors in your ValueBrushScale's Brushes collection. The ValueBrushScale will override this in the UI as long as the FillMemberPath is set, but the Legend will take the marker brush that you assign.
I am attaching a modified version of the original sample project I sent to demonstrate. I hope this helps.
If you would like to see a gradient legend item or a marker outline thickness feature implemented in a future version of the XamDataChart, I would recommend suggesting new product ideas for these at our WPF ideas site. This will place you in direct communication with our product management teams who plan and prioritize upcoming features and development based on community and user feedback.
3125.XamDataChartBubbleSeriesCase.zip
For 1, I ended up overriding the MarkerTemplate and as this bubble series has no connecting lines, used the Series Thickness for the Marker's Stroke Thickness
For 2, as suggested supplying the Series's MarkerBrush worked to get the color as it used to show in 16.1.
And there was another small issue which came up in the LegendItemBadge. In 16.1 (and it hasn't been fixed in 17.2 either), if the ScatterLineSeries has DashArray, the legend doesn't reflect it. To correctly show the legend, I have to override the LegendItemBadge. This is also the same for the Overlays. The new issue is that the margin for Overlay's legend is different than other legends (Margin 1 vs 4).
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]);
}
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.
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.
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?