Hello,
I want to create a bar chart. When I click on one of the columns I will show
a new graph with specific details of a on the column that was pressed.
I saw the example you wrote at "first look" because there many charts
and some events it is difficult to filter out what's relevant to my use and
what not. I'd love to get a small and specific example of my use. Attaching a
file, this will illustrate the application.
I tried the following code but there are many problems :
a. no supporty for StartTransitionAnimation
b. telerik:ChartArea Command="{Binding ChartArea1ClickCommand}" --> I get "The property command was not found in type 'ChartArea'"
c. TransitionControlStyle get an error "property TransitionControlStyle not found"
Thanks,
Aviv
public
SilverlightControl2()
{
InitializeComponent();
AttachClickEvent();
}
private
void
AttachClickEvent()
{
barChart.DefaultView.ChartArea.ItemClick +=
this
.ChartArea_ItemClick;
}
private
void
ChartArea_ItemClick(
object
sender, ChartItemClickEventArgs e)
{
barChart.DefaultView.ChartArea.StartTransitionAnimation();
lineChart.DefaultView.ChartArea.StartTransitionAnimation();
(sender
as
ChartArea).ItemClick -=
this
.ChartArea_ItemClick;
}
private
void
GoBack1_Click(
object
sender, RoutedEventArgs e)
{
barChart.DefaultView.ChartArea.StartTransitionAnimation();
lineChart.DefaultView.ChartArea.StartTransitionAnimation();
this
.AttachClickEvent();
}
<
UserControl.Resources
>
<
Style
TargetType
=
"telerik:RadChart"
>
<
Setter
Property
=
"Background"
Value
=
"Transparent"
/>
<
Setter
Property
=
"FontSize"
Value
=
"10"
/>
</
Style
>
<
Style
TargetType
=
"telerik:ChartLegend"
>
<
Setter
Property
=
"Header"
Value
=
" "
/>
</
Style
>
<
Style
TargetType
=
"telerik:RadLinearSparkline"
>
<
Setter
Property
=
"Margin"
Value
=
"0,2,0,3"
/>
</
Style
>
<
Style
TargetType
=
"telerik:RadButton"
>
<
Setter
Property
=
"HorizontalAlignment"
Value
=
"Left"
/>
<
Setter
Property
=
"Height"
Value
=
"22"
/>
</
Style
>
<!--
<
Style
x:Key
=
"TransitionControlStyle"
TargetType
=
"telerik:RadTransitionControl"
>
<
Setter
Property
=
"Transition"
>
<
Setter.Value
>
<
telerik:FadeTransition
/>
</
Setter.Value
>
</
Setter
>
</
Style
>
-->
<
Style
TargetType
=
"telerik:ChartArea"
>
<
Setter
Property
=
"EnableAnimations"
Value
=
"False"
/>
<
Setter
Property
=
"TransitionControlStyle"
Value
=
"{StaticResource TransitionControlStyle}"
/>
</
Style
>
<
Style
x:Key
=
"H1"
TargetType
=
"TextBlock"
>
<
Setter
Property
=
"FontFamily"
Value
=
"Segoe UI Light"
/>
<
Setter
Property
=
"FontSize"
Value
=
"18"
/>
</
Style
>
<
Style
x:Key
=
"H2"
TargetType
=
"TextBlock"
>
<
Setter
Property
=
"FontFamily"
Value
=
"Segoe WP Semibold"
/>
<
Setter
Property
=
"FontSize"
Value
=
"9"
/>
</
Style
>
</
UserControl.Resources
>
<
Grid
x:Name
=
"LayoutRoot"
Background
=
"White"
>
<
telerik:RadButton
x:Name
=
"GoBackButton1"
Grid.Column
=
"1"
Click
=
"GoBack1_Click"
Command
=
"{Binding GoBack1Command}"
Content
=
"Go Back"
/>
<
telerik:RadChart
x:Name
=
"barChart"
Grid.Row
=
"2"
Grid.ColumnSpan
=
"2"
ItemsSource
=
"{Binding Data}"
SeriesMappings
=
"{Binding BarChartSeriesMappings}"
>
<
telerik:RadChart.DefaultView
>
<
telerik:ChartDefaultView
>
<
telerik:ChartDefaultView.ChartLegend
>
<
telerik:ChartLegend
Name
=
"legend1"
/>
</
telerik:ChartDefaultView.ChartLegend
>
<
telerik:ChartDefaultView.ChartArea
>
<
telerik:ChartArea
Grid.ColumnSpan
=
"2"
Command
=
"{Binding ChartArea1ClickCommand}"
ItemWidthPercent
=
"50"
LegendName
=
"legend1"
>
<
telerik:ChartArea.AxisX
>
<
telerik:AxisX
DefaultLabelFormat
=
"{Binding AxisXLabelFormat}"
/>
</
telerik:ChartArea.AxisX
>
<
telerik:ChartArea.AxisY
>
<
telerik:AxisY
ExtendDirection
=
"None"
IsZeroBased
=
"True"
/>
</
telerik:ChartArea.AxisY
>
</
telerik:ChartArea
>
</
telerik:ChartDefaultView.ChartArea
>
</
telerik:ChartDefaultView
>
</
telerik:RadChart.DefaultView
>
</
telerik:RadChart
>
<
telerik:RadChart
Name
=
"lineChart"
Grid.Row
=
"3"
ItemsSource
=
"{Binding Data}"
SeriesMappings
=
"{Binding LineChartSeriesMappings}"
>
<
telerik:RadChart.DefaultView
>
<
telerik:ChartDefaultView
>
<
telerik:ChartDefaultView.ChartLegend
>
<
telerik:ChartLegend
Name
=
"legend3"
/>
</
telerik:ChartDefaultView.ChartLegend
>
<
telerik:ChartDefaultView.ChartArea
>
<
telerik:ChartArea
LegendName
=
"legend3"
>
<
telerik:ChartArea.AxisX
>
<
telerik:AxisX
DefaultLabelFormat
=
"{Binding AxisXLabelFormat}"
LayoutMode
=
"Between"
/>
</
telerik:ChartArea.AxisX
>
<
telerik:ChartArea.AxisY
>
<
telerik:AxisY
DefaultLabelFormat
=
"#VAL{P0}"
ExtendDirection
=
"None"
/>
</
telerik:ChartArea.AxisY
>
</
telerik:ChartArea
>
</
telerik:ChartDefaultView.ChartArea
>
</
telerik:ChartDefaultView
>
</
telerik:RadChart.DefaultView
>
</
telerik:RadChart
>
</
Grid
>