RadChart Reload when the itemClick event fires

[Muthukumar]

hi team,
i have radchart with multiple series.Since i am using MVVM model,  i have a property ObservableCollection<List<OptimizationChartData>> in my viewModel and i have bound the values for those series using CollectionIndex so it is working fine.

 i am also have some scatterseries into the series list here i need  to have click event so i used itemclick event.
when the particular scatterseries get click i just need to change the color of that series and draw line from x axis and y axis and need to update something into my database. still all are working fine. but the issue is the chart gets reloaded when the itemclick event call a function which is in my viewmodel. i just need to update the particular lineseries but the series values comes under the same collection ObservableCollection<List<OptimizationChartData>.

Note : if i call the view model function in itemclick event even that function does not have anything the chart gets reloaded. Can u guys help me out this issue.

Thanks,
Muthukumar Nagarajan.

<telerik:RadChart ItemsSource="{Binding OptimizationChartDataList}"
                x:Name="FlowCurveChart" Background="{x:Null}"
                BorderBrush="{x:Null}" Margin="2">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="LayoutUpdated">
                    <i:InvokeCommandAction
                            Command="{Binding LineLayoutChangeCommand}"
                            CommandParameter="{Binding ElementName=FlowCurveChart}" />
                </i:EventTrigger>
            </i:Interaction.Triggers>


            <telerik:RadChart.DefaultView>
                <telerik:ChartDefaultView ChartLegendPosition="Bottom">


                    <telerik:ChartDefaultView.ChartTitle>
                        <telerik:ChartTitle HorizontalAlignment="Center"
                                Background="{x:Null}" BorderBrush="Transparent"
                                Foreground="#FFa6a6a6"
                                Content="Optimization Performance Curves"
                                FontFamily="Calibri" FontSize="22"
                                OuterBorderBrush="Transparent" />
                    </telerik:ChartDefaultView.ChartTitle>

                    <telerik:ChartDefaultView.ChartLegend>
                        <telerik:ChartLegend x:Name="legend" Header=""
                                Background="{x:Null}"
                                UseAutoGeneratedItems="False"
                                BorderBrush="{x:Null}" HeaderFontWeight="Normal"
                                FontFamily="Calibri">

                            <telerik:ChartLegend.Items>

                                <telerik:ChartLegendItem MarkerFill="#FF619D3A"
                                        Foreground="#FF619D3A" FontSize="14.667"
                                        FontFamily="Calibri"
                                        Style="{StaticResource CustomLegendItem}"
                                        Label="New Injection Point" />

                                <telerik:ChartLegendItem MarkerFill="#CD150E"
                                        Foreground="#CD150E"
                                        Label="Current Injection Point"
                                        FontSize="14.667" FontFamily="Calibri"
                                        Style="{StaticResource CustomLegendItem}" />

                            </telerik:ChartLegend.Items>
                        </telerik:ChartLegend>
                    </telerik:ChartDefaultView.ChartLegend>

                    <!--Chart Area -->
                    <telerik:ChartDefaultView.ChartArea>
                        <telerik:ChartArea LegendName="FlowCurveChartLegend"
                                NoDataString="No Data......"
                                ItemClick="ChartArea_ItemClick">
                            <telerik:ChartArea.AxisY>
                                <telerik:AxisY AutoRange="False"
                                        Title="Liquid Production Rate (stb/d)"
                                        MinorTicksVisibility="Collapsed"
                                        MajorGridLinesVisibility="Visible"
                                        MinorGridLinesVisibility="Collapsed"
                                        DefaultLabelFormat="0"
                                        Step="{Binding YaxisStepValue}"
                                        MaxValue="{Binding YaxisMaxValue}"
                                        MinValue="{Binding YaxisMinValue}"
                                        IsLogarithmic="False">

                                    <telerik:AxisY.AxisStyles>
                                        <telerik:AxisStyles
                                                TitleStyle="{StaticResource YAxisTitleStyle}"
                                                TickLineStyle="{StaticResource TickLineStyleNew}"
                                                AxisLineStyle="{StaticResource AxisGridLineStyleNew}"
                                                ItemLabelStyle="{StaticResource YaxisItemLabelStyleGrey}"
                                                AlternateStripLineStyle="{StaticResource HorizontalAlternateStripLineStyle}"
                                                StripLineStyle="{StaticResource HorizontalStripLineStyle}"
                                                GridLineStyle="{StaticResource AxisGridLineStyleNew}">

                                        </telerik:AxisStyles>

                                    </telerik:AxisY.AxisStyles>
                                </telerik:AxisY>
                            </telerik:ChartArea.AxisY>
                            <telerik:ChartArea.AxisX>
                                <telerik:AxisX Step="{Binding XaxisStepValue}"
                                        MaxValue="{Binding XaxisMaxValue}"
                                        MinValue="{Binding XaxisMinValue}"
                                        LayoutMode="Auto"
                                        MinorTicksVisibility="Collapsed"
                                        Title="Gas Injection Rate (MMscf/d)"
                                        MajorGridLinesVisibility="Visible"
                                        AutoRange="False">


                                    <telerik:AxisX.AxisStyles>
                                        <telerik:AxisStyles
                                                TitleStyle="{StaticResource AxisTitleStyleNew}"
                                                AxisLineStyle="{StaticResource AxisGridLineStyleNew}"
                                                ItemLabelStyle="{StaticResource YaxisItemLabelStyleGrey}"
                                                TickLineStyle="{StaticResource TickLineStyleNew}"
                                                MinorTickLineStyle="{StaticResource MinorTickLineStyleNew}"
                                                StripLineStyle="{StaticResource HorizontalStripLineStyle}"
                                                GridLineStyle="{StaticResource AxisGridLineStyleNew}">

                                        </telerik:AxisStyles>

                                    </telerik:AxisX.AxisStyles>
                                </telerik:AxisX>

                            </telerik:ChartArea.AxisX>
                        </telerik:ChartArea>
                    </telerik:ChartDefaultView.ChartArea>

                </telerik:ChartDefaultView>

            </telerik:RadChart.DefaultView>
            <telerik:RadChart.SeriesMappings>

                <telerik:SeriesMapping CollectionIndex="0">
                    <telerik:SeriesMapping.SeriesDefinition>
                        <telerik:SplineSeriesDefinition ShowItemLabels="False"
                                ShowItemToolTips="True" ShowPointMarks="False">
                            <telerik:SplineSeriesDefinition.Appearance>
                                <telerik:SeriesAppearanceSettings
                                        Stroke="{StaticResource ChartGreen1}" />
                            </telerik:SplineSeriesDefinition.Appearance>
                        </telerik:SplineSeriesDefinition>
                    </telerik:SeriesMapping.SeriesDefinition>

                    <telerik:ItemMapping DataPointMember="YValue"
                            FieldName="YAxisValue" />
                    <telerik:ItemMapping DataPointMember="XValue"
                            FieldName="XAxisValue" />
                </telerik:SeriesMapping>

                <telerik:SeriesMapping CollectionIndex="1">
                    <telerik:SeriesMapping.SeriesDefinition>
                        <telerik:SplineSeriesDefinition ShowItemLabels="False"
                                ShowItemToolTips="True" ShowPointMarks="False">
                            <telerik:SplineSeriesDefinition.Appearance>
                                <telerik:SeriesAppearanceSettings
                                        Stroke="{StaticResource ChartViolet}" />
                            </telerik:SplineSeriesDefinition.Appearance>
                        </telerik:SplineSeriesDefinition>
                    </telerik:SeriesMapping.SeriesDefinition>

                    <telerik:ItemMapping DataPointMember="YValue"
                            FieldName="YAxisValue" />
                    <telerik:ItemMapping DataPointMember="XValue"
                            FieldName="XAxisValue" />
                </telerik:SeriesMapping>

                <telerik:SeriesMapping CollectionIndex="2">
                    <telerik:SeriesMapping.SeriesDefinition>
                        <telerik:SplineSeriesDefinition ShowItemLabels="False"
                                ShowItemToolTips="True" ShowPointMarks="False">
                            <telerik:SplineSeriesDefinition.Appearance>
                                <telerik:SeriesAppearanceSettings
                                        Stroke="{StaticResource ChartBlue}" />
                            </telerik:SplineSeriesDefinition.Appearance>
                        </telerik:SplineSeriesDefinition>
                    </telerik:SeriesMapping.SeriesDefinition>

                    <telerik:ItemMapping DataPointMember="YValue"
                            FieldName="YAxisValue" />
                    <telerik:ItemMapping DataPointMember="XValue"
                            FieldName="XAxisValue" />
                </telerik:SeriesMapping>

                <telerik:SeriesMapping CollectionIndex="3">
                    <telerik:SeriesMapping.SeriesDefinition>
                        <telerik:SplineSeriesDefinition ShowItemLabels="False"
                                ShowItemToolTips="True" ShowPointMarks="False">
                            <telerik:SplineSeriesDefinition.Appearance>
                                <telerik:SeriesAppearanceSettings
                                        Stroke="{StaticResource ChartYellow}" />
                            </telerik:SplineSeriesDefinition.Appearance>
                        </telerik:SplineSeriesDefinition>
                    </telerik:SeriesMapping.SeriesDefinition>

                    <telerik:ItemMapping DataPointMember="YValue"
                            FieldName="YAxisValue" />
                    <telerik:ItemMapping DataPointMember="XValue"
                            FieldName="XAxisValue" />
                </telerik:SeriesMapping>

                <telerik:SeriesMapping CollectionIndex="4">
                    <telerik:SeriesMapping.SeriesDefinition>
                        <telerik:SplineSeriesDefinition ShowItemLabels="False"
                                ShowItemToolTips="True" ShowPointMarks="False">
                            <telerik:SplineSeriesDefinition.Appearance>
                                <telerik:SeriesAppearanceSettings
                                        Stroke="{StaticResource ChartBlue1}" />
                            </telerik:SplineSeriesDefinition.Appearance>
                        </telerik:SplineSeriesDefinition>
                    </telerik:SeriesMapping.SeriesDefinition>

                    <telerik:ItemMapping DataPointMember="YValue"
                            FieldName="YAxisValue" />
                    <telerik:ItemMapping DataPointMember="XValue"
                            FieldName="XAxisValue" />
                </telerik:SeriesMapping>

                <telerik:SeriesMapping CollectionIndex="11">

                    <telerik:SeriesMapping.SeriesDefinition>
                        <telerik:LineSeriesDefinition ShowItemLabels="False"
                                ShowPointMarks="False" ShowItemToolTips="True">
                            <telerik:LineSeriesDefinition.Appearance>

                                <telerik:SeriesAppearanceSettings
                                        Stroke="#FF9BD675"
                                        Fill="{StaticResource ChartGreenGradient}" />

                            </telerik:LineSeriesDefinition.Appearance>
                        </telerik:LineSeriesDefinition>
                    </telerik:SeriesMapping.SeriesDefinition>

                    <telerik:ItemMapping DataPointMember="YValue"
                            FieldName="YAxisValue" />
                    <telerik:ItemMapping DataPointMember="XValue"
                            FieldName="XAxisValue" />

                </telerik:SeriesMapping>

                <telerik:SeriesMapping CollectionIndex="12">

                    <telerik:SeriesMapping.SeriesDefinition>
                        <telerik:LineSeriesDefinition ShowItemLabels="False"
                                ShowPointMarks="False" ShowItemToolTips="True">
                            <telerik:LineSeriesDefinition.Appearance>
                                <telerik:SeriesAppearanceSettings Stroke="White" />
                            </telerik:LineSeriesDefinition.Appearance>
                        </telerik:LineSeriesDefinition>
                    </telerik:SeriesMapping.SeriesDefinition>

                    <telerik:ItemMapping DataPointMember="YValue"
                            FieldName="YAxisValue" />
                    <telerik:ItemMapping DataPointMember="XValue"
                            FieldName="XAxisValue" />

                </telerik:SeriesMapping>

                <telerik:SeriesMapping CollectionIndex="5"
                        LegendLabel="btnAccept1">
                    <telerik:SeriesMapping.SeriesDefinition>
                        <telerik:ScatterSeriesDefinition PointSize="15"
                                ShowItemToolTips="True">
                            <telerik:ScatterSeriesDefinition.Appearance>
                                <telerik:SeriesAppearanceSettings
                                        Fill="{StaticResource ChartGreenGradient}" />
                            </telerik:ScatterSeriesDefinition.Appearance>
                        </telerik:ScatterSeriesDefinition>
                    </telerik:SeriesMapping.SeriesDefinition>
                    <telerik:ItemMapping FieldName="XAxisValue"
                            DataPointMember="XValue" />
                    <telerik:ItemMapping FieldName="YAxisValue"
                            DataPointMember="YValue" />
                </telerik:SeriesMapping>

                <telerik:SeriesMapping CollectionIndex="6"
                        LegendLabel="btnAccept2">
                    <telerik:SeriesMapping.SeriesDefinition>
                        <telerik:ScatterSeriesDefinition PointSize="15"
                                ShowItemToolTips="True">
                            <telerik:ScatterSeriesDefinition.Appearance>
                                <telerik:SeriesAppearanceSettings
                                        Fill="{StaticResource ChartGreenGradient}" />
                            </telerik:ScatterSeriesDefinition.Appearance>
                        </telerik:ScatterSeriesDefinition>
                    </telerik:SeriesMapping.SeriesDefinition>

                    <telerik:ItemMapping FieldName="XAxisValue"
                            DataPointMember="XValue" />
                    <telerik:ItemMapping FieldName="YAxisValue"
                            DataPointMember="YValue" />
                </telerik:SeriesMapping>

                <telerik:SeriesMapping CollectionIndex="7"
                        LegendLabel="btnAccept3">
                    <telerik:SeriesMapping.SeriesDefinition>
                        <telerik:ScatterSeriesDefinition PointSize="15"
                                ShowItemToolTips="True">
                            <telerik:ScatterSeriesDefinition.Appearance>
                                <telerik:SeriesAppearanceSettings
                                        Fill="{StaticResource ChartGreenGradient}" />
                            </telerik:ScatterSeriesDefinition.Appearance>
                        </telerik:ScatterSeriesDefinition>
                    </telerik:SeriesMapping.SeriesDefinition>
                    <telerik:ItemMapping FieldName="XAxisValue"
                            DataPointMember="XValue" />
                    <telerik:ItemMapping FieldName="YAxisValue"
                            DataPointMember="YValue" />
                </telerik:SeriesMapping>

                <telerik:SeriesMapping CollectionIndex="8"
                        LegendLabel="btnAccept4">
                    <telerik:SeriesMapping.SeriesDefinition>
                        <telerik:ScatterSeriesDefinition PointSize="15"
                                ShowItemToolTips="True">
                            <telerik:ScatterSeriesDefinition.Appearance>
                                <telerik:SeriesAppearanceSettings
                                        Fill="{StaticResource ChartGreenGradient}" />
                            </telerik:ScatterSeriesDefinition.Appearance>
                        </telerik:ScatterSeriesDefinition>


                    </telerik:SeriesMapping.SeriesDefinition>
                    <telerik:ItemMapping FieldName="XAxisValue"
                            DataPointMember="XValue" />
                    <telerik:ItemMapping FieldName="YAxisValue"
                            DataPointMember="YValue" />
                </telerik:SeriesMapping>

                <telerik:SeriesMapping CollectionIndex="9"
                        LegendLabel="btnAccept5">
                    <telerik:SeriesMapping.SeriesDefinition>
                        <telerik:ScatterSeriesDefinition PointSize="15"
                                ShowItemToolTips="True">
                            <telerik:ScatterSeriesDefinition.Appearance>
                                <telerik:SeriesAppearanceSettings
                                        Fill="{StaticResource ChartGreenGradient}" />
                            </telerik:ScatterSeriesDefinition.Appearance>
                        </telerik:ScatterSeriesDefinition>
                    </telerik:SeriesMapping.SeriesDefinition>
                    <telerik:ItemMapping FieldName="XAxisValue"
                            DataPointMember="XValue" />
                    <telerik:ItemMapping FieldName="YAxisValue"
                            DataPointMember="YValue" />
                </telerik:SeriesMapping>

                <telerik:SeriesMapping CollectionIndex="10">
                    <telerik:SeriesMapping.SeriesDefinition>
                        <telerik:ScatterSeriesDefinition PointSize="15"
                                ShowItemToolTips="True">
                            <telerik:ScatterSeriesDefinition.Appearance>
                                <telerik:SeriesAppearanceSettings
                                        Fill="{StaticResource ChartRedGradient}" />
                            </telerik:ScatterSeriesDefinition.Appearance>
                        </telerik:ScatterSeriesDefinition>
                    </telerik:SeriesMapping.SeriesDefinition>
                    <telerik:ItemMapping FieldName="XAxisValue"
                            DataPointMember="XValue" />
                    <telerik:ItemMapping FieldName="YAxisValue"
                            DataPointMember="YValue" />
                </telerik:SeriesMapping>


            </telerik:RadChart.SeriesMappings>
        </telerik:RadChart>



 private void ChartArea_ItemClick(object sender, Telerik.Windows.Controls.Charting.ChartItemClickEventArgs e)
        {

            string btnName = (e.DataSeries).LegendLabel;
            if (!string.IsNullOrEmpty(btnName))
                ChartViewModel().UpdateOptimizeData((e.DataSeries).LegendLabel);// call the viewmodel
        }

//view model function
public void UpdateOptimizeData(string Name)
        {
//even it does have nothing the chart gets reloaded
}

[Yavor]

Hi Muthukumar,

Unfortunately we couldnt reproduce the problem you are experiencing with your code. Perhaps the problematic code is elsewhere in your code. I have attached the sample application we used in our labs. Can you please see what we are missing to make it runnable?

All the best,
Yavor
the Telerik team