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

RadChart Reload when the itemClick event fires

1 Answer 50 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Muthukumar
Top achievements
Rank 1
Muthukumar asked on 08 Nov 2011, 02:00 PM
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
}





1 Answer, 1 is accepted

Sort by
0
Yavor
Telerik team
answered on 11 Nov 2011, 01:12 PM
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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Tags
Chart
Asked by
Muthukumar
Top achievements
Rank 1
Answers by
Yavor
Telerik team
Share this question
or