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

Dynamic series distortion problems

3 Answers 139 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Saulo
Top achievements
Rank 1
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

<UserControl
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:DISTRIBUCION_GAS.Views"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             xmlns:clases="clr-namespace:DISTRIBUCION_GAS.Clases"
             xmlns:sys="clr-namespace:System;assembly=mscorlib"
             xmlns:PENDIENTES_IGUALES="clr-namespace:PENDIENTES_IGUALES;assembly=PENDIENTES_IGUALES" 
             x:Class="DISTRIBUCION_GAS.Views.LiquidoGasView"
             mc:Ignorable="d" 
     d:DesignHeight="450" d:DesignWidth="800">
    <UserControl.Resources>
        <clases:BoolColor x:Key="colorCombobox"/>
        <!--<DataTemplate x:Key="ComboBoxCustomTemplate">
            <TextBlock Foreground="{Binding ESTATUS, Converter={StaticResource colorCombobox}}"  FontSize="10" FontWeight="Bold"  Text="{Binding NOMBRE}" />
        </DataTemplate>-->

        <DataTemplate x:Key="contenidoTemplate">
            <Grid>
                <local:PozoView DataContext="{Binding objCabeceraPozoGBN, Mode=TwoWay}"/>
            </Grid>
        </DataTemplate>


        <telerik:VisibilityToBooleanConverter x:Key="visibilityToBooleanConverter" />

    </UserControl.Resources>
    <Grid>
        <GroupBox Header="Produción de líquido vs Inyección de Gas" FontWeight="Bold" Margin="1,5,1,1" FontSize="14">
            <Grid Margin="1,5,1,1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="280"/>
                    <ColumnDefinition Width="280*"/>
                    <ColumnDefinition Width="100"/>
                </Grid.ColumnDefinitions>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="25"/>
                        <RowDefinition Height="155*"/>
                    </Grid.RowDefinitions>
                    <StackPanel Grid.Column="0" Grid.Row="0" Orientation="Horizontal">
                        <telerik:RadComboBox  Text="Selecione un Pozo" Width="108" Margin="5,0,0,0" Foreground="{Binding ESTATUS, Converter={StaticResource colorCombobox}}" ItemsSource="{Binding ListaPA_GetPozoGasBN_Result, Mode=TwoWay}" SelectedItem="{Binding objPA_GetPozoGasBN_Result, Mode=TwoWay}" >
                            <telerik:RadComboBox.ItemTemplate>
                                <DataTemplate>
                                    <TextBlock Foreground="{Binding ESTATUS, Converter={StaticResource colorCombobox}}"  FontSize="10" FontWeight="Bold"  Text="{Binding NOMBRE}" />
                                </DataTemplate>
                            </telerik:RadComboBox.ItemTemplate>
                        </telerik:RadComboBox>
                        <telerik:RadButton Command="{Binding BtnAgregarPozo}" Height="Auto" IsEnabled="{Binding habilitarAgregar, Mode=TwoWay}" Width="Auto" Margin="5,0,0,0">
                            <telerik:RadGlyph Glyph="&#xE120;" Foreground="Black" FontSize="20" />
                        </telerik:RadButton>
                        <telerik:RadButton Command="{Binding BtnEditarPozo}" IsEnabled="{Binding habilitarEditar, Mode=TwoWay}" Height="Auto" Width="Auto" Margin="5,0,0,0">
                            <telerik:RadGlyph Glyph="&#xE64A;" Foreground="Black" FontSize="20" />
                        </telerik:RadButton>
                        <telerik:RadButton Height="Auto" Command="{Binding BtnEliminarPozo}" IsEnabled="{Binding habilitarEditar, Mode=TwoWay}" Width="Auto" Margin="5,0,0,0">
                            <telerik:RadGlyph Glyph="&#xE10C;" Foreground="Black" FontSize="20" />
                        </telerik:RadButton>
                        <CheckBox Margin="5,5,1,1" IsChecked="{Binding gastosAgua, Mode=TwoWay}" />
                        <Label  Margin="1,0,1,1" Content="% Agua" FontWeight="Normal" FontSize="10" />
                    </StackPanel>
                    <telerik:RadTabControl Grid.Row="1" ItemsSource="{Binding ListaPozoCabecera, Mode=TwoWay}" SelectedItem="{Binding objPozoCabecera, Mode=TwoWay}" DisplayMemberPath="Nombre" ContentTemplate="{StaticResource contenidoTemplate}"/>
                </Grid>
               

<telerik:RadCartesianChart Grid.Column="1" Margin="5" x:Name="rccgrafica"  FontSize="10"><br>
                    <telerik:RadCartesianChart.Grid><br>
                        <telerik:CartesianChartGrid MajorLinesVisibility="XY" MajorXLineDashArray="5, 5" MajorYLineDashArray="5, 5"><br>
                            <telerik:CartesianChartGrid.MajorYLineStyle><br>
                                <Style TargetType="{x:Type Line}"><br>
                                    <Setter Property="Stroke" Value="Gray"/><br>
                                </Style><br>
                            </telerik:CartesianChartGrid.MajorYLineStyle><br>
                            <telerik:CartesianChartGrid.MajorXLineStyle><br>
                                <Style TargetType="{x:Type Line}"><br>
                                    <Setter Property="Stroke" Value="Gray"/><br>
                                </Style><br>
                            </telerik:CartesianChartGrid.MajorXLineStyle><br>
                        </telerik:CartesianChartGrid><br>
                    </telerik:RadCartesianChart.Grid><br>
                    <telerik:RadCartesianChart.HorizontalAxis><br>
                        <telerik:CategoricalAxis Title="QGAS de BN [Mscf/D]"/><br>
                    </telerik:RadCartesianChart.HorizontalAxis><br>
                    <telerik:RadCartesianChart.VerticalAxis><br>
                        <telerik:LinearAxis Title="QLiquido [STB/D]"/><br>
                    </telerik:RadCartesianChart.VerticalAxis><br>
                    <telerik:RadCartesianChart.Behaviors><br>
                        <telerik:ChartPanAndZoomBehavior ZoomMode="Both" /><br>
                        <telerik:ChartCrosshairBehavior /><br>
                    </telerik:RadCartesianChart.Behaviors><br>
                    <telerik:RadCartesianChart.SeriesProvider><br>
                        <telerik:ChartSeriesProvider Source="{Binding ListaPozoCabecera, Mode=TwoWay}"><br>
                            <telerik:CategoricalSeriesDescriptor ItemsSourcePath="CondicionesOperacion.DatosInyeccion"  CategoryPath="qGasBN" ValuePath="qLiq"><br>
                                <telerik:CategoricalSeriesDescriptor.Style><br>
                                    <Style TargetType="{x:Type telerik:LineSeries}"><br>
                                        <Setter Property="StrokeThickness" Value="{Binding SizeL}" /><br>
                                        <Setter Property="LegendSettings" ><br>
                                            <Setter.Value><br>
                                                <telerik:SeriesLegendSettings Title="{Binding Nombre}" /><br>
                                            </Setter.Value><br>
                                        </Setter><br>
                                        <Setter Property="Stroke" Value="{Binding Background, Mode=TwoWay}"  /><br>
                                        <Setter Property="ToolTip"  ><br>
                                            <Setter.Value><br>
                                                <StackPanel><br>
                                                    <TextBlock Text="{Binding Nombre, Mode=TwoWay}"/><br>
                                                </StackPanel><br>
                                            </Setter.Value><br>
                                        </Setter><br>
                                        <Setter Property="Visibility" Value="{Binding Visibility, Mode=TwoWay}" /><br>
<br>
                                    </Style><br>
                                </telerik:CategoricalSeriesDescriptor.Style><br>
                            </telerik:CategoricalSeriesDescriptor><br>
                            <telerik:CategoricalSeriesDescriptor ItemsSourcePath="CondicionesOperacion.ListaDatos"  CategoryPath="qGasBN" ValuePath="qLiquido"><br>
                                <telerik:CategoricalSeriesDescriptor.Style><br>
                                    <Style TargetType="{x:Type telerik:PointSeries}"><br>
                                        <Setter Property="ToolTip" Value="{Binding Nombre, Mode=TwoWay}"/><br>
                                        <Setter Property="Visibility" Value="{Binding Visibility, Mode=TwoWay}" /><br>
                                        <Setter Property="PointSize" Value="{Binding SizeP}" /><br>
                                        <Setter Property="DefaultVisualStyle"><br>
                                            <Setter.Value><br>
                                                <Style TargetType="{x:Type Path}"><br>
                                                    <Setter Property="Fill" Value="{Binding Background}" /><br>
                                                </Style><br>
                                            </Setter.Value><br>
                                        </Setter><br>
                                        <br>
                                    </Style><br>
                                </telerik:CategoricalSeriesDescriptor.Style><br>
                            </telerik:CategoricalSeriesDescriptor><br>
                        </telerik:ChartSeriesProvider><br>
                    </telerik:RadCartesianChart.SeriesProvider><br>
                </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

Sort by
0
Saulo
Top achievements
Rank 1
answered on 21 Aug 2019, 11:25 PM
0
Martin Ivanov
Telerik team
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.
0
Saulo
Top achievements
Rank 1
answered on 23 Aug 2019, 03:25 PM
thanks, indeed when changing the type of axis I remain, thank you very much
Tags
ChartView
Asked by
Saulo
Top achievements
Rank 1
Answers by
Saulo
Top achievements
Rank 1
Martin Ivanov
Telerik team
Share this question
or