Hi.
I am loading a bar chart with data from an SQL connection. I am colouring the bars using the following:
I need the colour of a bar to change when I move my mouse over it and change back when I move away from it. It shouldn't change back to its original colour if I click on it. How do I accomplish this?
Thanks.
Anand
I am loading a bar chart with data from an SQL connection. I am colouring the bars using the following:
<
Setter
Property
=
"Template"
>
<
Setter.Value
>
<
ControlTemplate
TargetType
=
"telerikCharting:Bar"
>
<
Rectangle
x:Name
=
"PART_DefiningGeometry"
Height
=
"{TemplateBinding ItemActualHeight}"
Width
=
"{TemplateBinding ItemActualWidth}"
Style
=
"{TemplateBinding ItemStyle}"
Fill
=
"Red"
>
</
Rectangle
>
</
ControlTemplate
>
</
Setter.Value
>
</
Setter
>
I need the colour of a bar to change when I move my mouse over it and change back when I move away from it. It shouldn't change back to its original colour if I click on it. How do I accomplish this?
Thanks.
Anand
6 Answers, 1 is accepted
0
Hello Anand,
If you do not use our interactivity functionality (which is available in WPF4) you can re-template you bar series as follows:
Set this style as item style and change the color in your code-behind:
Please try this and let me know if this is what you need.
Best wishes,
Sia
the Telerik team
If you do not use our interactivity functionality (which is available in WPF4) you can re-template you bar series as follows:
<
Style
x:Key
=
"CustomBar"
TargetType
=
"telerikCharting:Bar"
>
<
Setter
Property
=
"Template"
>
<
Setter.Value
>
<
ControlTemplate
TargetType
=
"telerikCharting:Bar"
>
<
Canvas
Opacity
=
"0"
x:Name
=
"PART_MainContainer"
>
<
Rectangle
x:Name
=
"PART_DefiningGeometry"
Height
=
"{TemplateBinding ItemActualHeight}"
Width
=
"{TemplateBinding ItemActualWidth}"
Style
=
"{TemplateBinding ItemStyle}"
/>
<
Rectangle
Height
=
"{TemplateBinding ItemActualHeight}"
Width
=
"{TemplateBinding ItemActualWidth}"
Fill
=
"Transparent"
MouseEnter
=
"PART_SelectedState_MouseEnter"
MouseLeave
=
"PART_SelectedState_MouseLeave"
/>
<
Canvas.RenderTransform
>
<
ScaleTransform
x:Name
=
"PART_AnimationTransform"
ScaleY
=
"0"
/>
</
Canvas.RenderTransform
>
</
Canvas
>
</
ControlTemplate
>
</
Setter.Value
>
</
Setter
>
</
Style
>
Set this style as item style and change the color in your code-behind:
private
void
PART_SelectedState_MouseEnter(
object
sender, MouseEventArgs e)
{
(sender
as
Rectangle).Fill =
new
SolidColorBrush(Colors.Red);
}
private
void
PART_SelectedState_MouseLeave(
object
sender, MouseEventArgs e)
{
(sender
as
Rectangle).Fill =
new
SolidColorBrush(Colors.Transparent);
}
Please try this and let me know if this is what you need.
Best wishes,
Sia
the Telerik team
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Public Issue Tracking
system and vote to affect the priority of the items
0
Anand
Top achievements
Rank 1
answered on 21 Jun 2011, 03:31 PM
Hi.
That worked perfectly, thank you. I have one more question. I am using the following code for clicks on individual bars.
On click, I need a bar to retain its highlighted colour (in your example, Red) and lose its highlighted colour only when some other bar is clicked on. How can I achieve that?
Thanks.
Anand
That worked perfectly, thank you. I have one more question. I am using the following code for clicks on individual bars.
<
telerikCharting:ChartArea
ItemClick
=
"Chart_Click"
... >
...
</
telerikCharting:ChartArea
>
private
void
Chart_Click(
object
sender, ChartItemClickEventArgs e)
{
int
x = Convert.ToInt32(e.DataPoint.XValue);
int
y = Convert.ToInt32(e.DataPoint.YValue);
...
}
On click, I need a bar to retain its highlighted colour (in your example, Red) and lose its highlighted colour only when some other bar is clicked on. How can I achieve that?
Thanks.
Anand
0
Hi Anand,
If you use WPF 4 you can take advantage of our interactivity for the click and hover states. Please review the attached solution and let me know whether it works for you.
Kind regards,
Sia
the Telerik team
If you use WPF 4 you can take advantage of our interactivity for the click and hover states. Please review the attached solution and let me know whether it works for you.
Kind regards,
Sia
the Telerik team
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Public Issue Tracking
system and vote to affect the priority of the items
0
Anand
Top achievements
Rank 1
answered on 22 Jun 2011, 03:40 PM
Works perfectly for single series.One of my charts has two bar series in it. And once I select something in a series, everything else in that series and everything in the other series must be deselected. How can I do that?
Thanks.
Thanks.
0
Hi Anand,
You can use the same approach when having more than one series, but you need to keep track on the number of selected items and when you have two selected items from two different series, you need to unselect the one which is first selected. Unfortunately RadChart does not provide built-in support for this.
Please use the exposed SelectionChanged event on the Chart Area
Kind regards,
Sia
the Telerik team
You can use the same approach when having more than one series, but you need to keep track on the number of selected items and when you have two selected items from two different series, you need to unselect the one which is first selected. Unfortunately RadChart does not provide built-in support for this.
Please use the exposed SelectionChanged event on the Chart Area
Kind regards,
Sia
the Telerik team
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Public Issue Tracking
system and vote to affect the priority of the items
0
Anand
Top achievements
Rank 1
answered on 23 Jun 2011, 02:22 PM
Thanks that worked. For the benefit of future readers of this thread, the following will help
private
void
ChartArea_SelectionChanged(
object
sender, ChartSelectionChangedEventArgs e)
{
ChartArea ca = (ChartArea)sender;
foreach
(DataPoint p
in
ca.SelectedItems)
{
if
(p != e.AddedItems[0])
{
ca.UnselectItem(p);
}
}
}