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

RadChart Reload when the itemClick event fires

1 Answer 109 Views

Chart

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

This question is locked. New answers and comments are not allowed.

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>

<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

answered on 11 Nov 2011, 01:12 PM

SilverlightApplication1.zip

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