This is a migrated thread and some comments may be shown as answers.

Dynamic series distortion problems

3 Answers 195 Views

ChartView

This is a migrated thread and some comments may be shown as answers.

Saulo asked on 21 Aug 2019, 03:39 PM

I am painting a series series line dynamically, all those link to its context viewmodel, now the problem is that when drawing more than one series they begin to distort, now as you can see in the image, when hidden by in the middle of a CheckBox of his legend the others and I just leave one this goes well, the first hurts the second, and the second to the third, and so on, already e checking the values, and those are correct, I think I have problems with the horizontal axis, but I don't know how to solve it. It can be seen in the image of how it looks. Here I leave the same as the xaml where I work. Can someone help me what is happening

<telerik:RadCartesianChart Grid.Column="1" Margin="5" x:Name="rccgrafica" FontSize="10"> 

<telerik:RadCartesianChart.Grid> 

<telerik:CartesianChartGrid MajorLinesVisibility="XY" MajorXLineDashArray="5, 5" MajorYLineDashArray="5, 5"> 

<telerik:CartesianChartGrid.MajorYLineStyle> 

<Style TargetType="{x:Type Line}"> 

<Setter Property="Stroke" Value="Gray"/> 

</Style> 

</telerik:CartesianChartGrid.MajorYLineStyle> 

<telerik:CartesianChartGrid.MajorXLineStyle> 

<Style TargetType="{x:Type Line}"> 

<Setter Property="Stroke" Value="Gray"/> 

</Style> 

</telerik:CartesianChartGrid.MajorXLineStyle> 

</telerik:CartesianChartGrid> 

</telerik:RadCartesianChart.Grid> 

<telerik:RadCartesianChart.HorizontalAxis> 

<telerik:CategoricalAxis Title="QGAS de BN [Mscf/D]"/> 

</telerik:RadCartesianChart.HorizontalAxis> 

<telerik:RadCartesianChart.VerticalAxis> 

<telerik:LinearAxis Title="QLiquido [STB/D]"/> 

</telerik:RadCartesianChart.VerticalAxis> 

<telerik:RadCartesianChart.Behaviors> 

<telerik:ChartPanAndZoomBehavior ZoomMode="Both" /> 

<telerik:ChartCrosshairBehavior /> 

</telerik:RadCartesianChart.Behaviors> 

<telerik:RadCartesianChart.SeriesProvider> 

<telerik:ChartSeriesProvider Source="{Binding ListaPozoCabecera, Mode=TwoWay}"> 

<telerik:CategoricalSeriesDescriptor ItemsSourcePath="CondicionesOperacion.DatosInyeccion" CategoryPath="qGasBN" ValuePath="qLiq"> 

<telerik:CategoricalSeriesDescriptor.Style> 

<Style TargetType="{x:Type telerik:LineSeries}"> 

<Setter Property="StrokeThickness" Value="{Binding SizeL}" /> 

<Setter Property="LegendSettings" > 

<Setter.Value> 

<telerik:SeriesLegendSettings Title="{Binding Nombre}" /> 

</Setter.Value> 

</Setter> 

<Setter Property="Stroke" Value="{Binding Background, Mode=TwoWay}" /> 

<Setter Property="ToolTip" > 

<Setter.Value> 

<StackPanel> 

<TextBlock Text="{Binding Nombre, Mode=TwoWay}"/> 

</StackPanel> 

</Setter.Value> 

</Setter> 

<Setter Property="Visibility" Value="{Binding Visibility, Mode=TwoWay}" /> 

 

</Style> 

</telerik:CategoricalSeriesDescriptor.Style> 

</telerik:CategoricalSeriesDescriptor> 

<telerik:CategoricalSeriesDescriptor ItemsSourcePath="CondicionesOperacion.ListaDatos" CategoryPath="qGasBN" ValuePath="qLiquido"> 

<telerik:CategoricalSeriesDescriptor.Style> 

<Style TargetType="{x:Type telerik:PointSeries}"> 

<Setter Property="ToolTip" Value="{Binding Nombre, Mode=TwoWay}"/> 

<Setter Property="Visibility" Value="{Binding Visibility, Mode=TwoWay}" /> 

<Setter Property="PointSize" Value="{Binding SizeP}" /> 

<Setter Property="DefaultVisualStyle"> 

<Setter.Value> 

<Style TargetType="{x:Type Path}"> 

<Setter Property="Fill" Value="{Binding Background}" /> 

</Style> 

</Setter.Value> 

</Setter> 

 

</Style> 

</telerik:CategoricalSeriesDescriptor.Style> 

</telerik:CategoricalSeriesDescriptor> 

</telerik:ChartSeriesProvider> 

</telerik:RadCartesianChart.SeriesProvider> 

</telerik:RadCartesianChart>

<telerik:RadLegend Items="{Binding LegendItems, ElementName=rccgrafica}" Grid.Column="2" >
<telerik:RadLegend.ItemsPanel>
<ItemsPanelTemplate>
<telerik:RadWrapPanel />
</ItemsPanelTemplate>
</telerik:RadLegend.ItemsPanel>
<telerik:RadLegend.ItemTemplate>
<DataTemplate>
<Border Background="{Binding MarkerFill}" BorderThickness="1" BorderBrush="{Binding MarkerStroke}">
<Grid Width="95">
<CheckBox Checked="CheckBox_Checked" IsChecked="{Binding Presenter.Visibility, Converter={StaticResource visibilityToBooleanConverter}, Mode=TwoWay}" FontSize="10"/>
<TextBlock Text="{Binding Title}" Foreground="White" Margin="15,2,0,2" FontWeight="Normal" FontSize="10" />
</Grid>
</Border>
</DataTemplate>
</telerik:RadLegend.ItemTemplate>
</telerik:RadLegend>
</Grid>
</GroupBox>
</Grid>
</UserControl>

________________________________________________

MODELVIEW

private ObservableCollection<PozoCabecera> _ListaPozoCabecera;
public ObservableCollection<PozoCabecera> ListaPozoCabecera
{
get
{
return _ListaPozoCabecera;
}
set
{
_ListaPozoCabecera = value;

if (value.Count>0)
{
Global.objVariableEntradaViewModel.HabilitarOpciones = true;
objPozoCabecera = value[0];
Global.objVariableEntradaViewModel.TotalGas = _ListaPozoCabecera.Sum(x => x.objCabeceraPozoGBN.qGasBN).GetValueOrDefault();
Global.objVariableEntradaViewModel.TotalLiq = _ListaPozoCabecera.Sum(x => x.objCabeceraPozoGBN.qLiquido).GetValueOrDefault();
}
else
{
Global.objVariableEntradaViewModel.HabilitarOpciones = false;
Global.objVariableEntradaViewModel.opcion = null;
Global.objVariableEntradaViewModel.TotalGas = 0;
Global.objVariableEntradaViewModel.TotalLiq = 0;

}
this.OnPropertyChanged("ListaPozoCabecera");
}
}

3 Answers, 1 is accepted

answered on 22 Aug 2019, 09:25 AM

Hello Saulo,

It turns out that this questions was raised also in a support ticket. You can find an answer there (ticked ID: 1426290). For your convenience, below you can find the the reply. I also deleted the duplicated thread in the forum.

This behavior occurs because the chart axes automatically calculate their ranges based on visible data. When you hide one of the series, the axis re-calculates its range and re-arranges the data.

To achieve your requirement you can use two approaches:

The first one is to replace the horizontal CategoricalAxis with a LinearAxis and manually set its range using the Minimum and Maximum properties. This way you can define a constant range and the viewport won't be changed when you hide series. In this case you will need to use the scatter version of the chart series (ScatterLineSeries in your case).
The second approach is to keep the horizontal CategoricalAxis, but in this case you will need to ensure that all expected categories are loaded all of the time within the chart. To do this, you can define an additional dummy series with empty data points and each data point can have a valid category. This way when you hide a series its category will get preserved on the axis because it will be presented in the dummy series.

Regards,

Martin Ivanov
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.