RadChart Reload when the itemClick event fires

2 posts, 0 answers
  1. Muthukumar
    Muthukumar avatar
    15 posts
    Member since:
    Oct 2011

    Posted 08 Nov 2011 Link to this post

    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
    }





  2. Yavor
    Admin
    Yavor avatar
    401 posts

    Posted 11 Nov 2011 Link to this post

    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 >>

Back to Top