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

RadCartesianChart Series's priority

3 Answers 145 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Phong
Top achievements
Rank 1
Phong asked on 03 Aug 2012, 11:24 AM
I want to ask:
- Could I set priority of the Series's to control which one will overleap the others.
- Could I custom a lineSeries template to have arrow at the last point.
Please see attach's to clear the idea.
Resource:
<DataTemplate x:Key="MilestoneItemTemplate" >
          <Canvas Height="24" Width="24" Margin="0,0,0,5">
              <VisualStateManager.VisualStateGroups>
                  <VisualStateGroup x:Name="CommonStates">
                      <VisualState x:Name="Normal" />
                      <VisualState x:Name="MouseOver">
                          <Storyboard>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="background" Storyboard.TargetProperty="Color" Duration="0.00:00:00.05">
                                  <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0" Value="Gray" />
                              </ObjectAnimationUsingKeyFrames>
                          </Storyboard>
                      </VisualState>
                  </VisualStateGroup>
              </VisualStateManager.VisualStateGroups>
              <Polygon Width="20" Height="20">
                  <Polygon.Points>
                      <Point X="0" Y="8"/>
                      <Point X="8" Y="0"/>
                      <Point X="16" Y="8"/>
                      <Point X="8" Y="16"/>
                  </Polygon.Points>
                  <Polygon.Fill>
                      <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5" >
                          <GradientStop Color="White"/>
                          <GradientStop x:Name="background" Offset="1" Color="{Binding DataItem.FillBrush.Color}" />
                      </RadialGradientBrush>
                  </Polygon.Fill>
              </Polygon>
          </Canvas>
      </DataTemplate>
      <DataTemplate x:Key="TodayItemTemplate" >
          <Canvas Height="66" Width="2" Margin="0,0,0,5">
              <VisualStateManager.VisualStateGroups>
                  <VisualStateGroup x:Name="CommonStates">
                      <VisualState x:Name="Normal" />
                      <VisualState x:Name="MouseOver">
                          <Storyboard>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="background" Storyboard.TargetProperty="Color" Duration="0.00:00:00.05">
                                  <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0" Value="Gray" />
                              </ObjectAnimationUsingKeyFrames>
                          </Storyboard>
                      </VisualState>
                  </VisualStateGroup>
              </VisualStateManager.VisualStateGroups>
              <Line Height="66" Width="1" Stroke="Black" StrokeThickness="2"  />
          </Canvas>
      </DataTemplate>


<telerik:RadCartesianChart            >
             
            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:DateTimeContinuousAxis
                    PlotMode="OnTicksPadded"
                    LastLabelVisibility="Hidden"
                    Title="Year"
                    MajorStep="2"
                    MajorStepUnit="Year"
                    LabelInterval="4" />
            </telerik:RadCartesianChart.HorizontalAxis>
 
            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis Visibility="Collapsed" />
            </telerik:RadCartesianChart.VerticalAxis>          
 
             
            <!--Polygon Items-->
            <telerik:LineSeries x:Name="line1"
                                    CombineMode="Cluster"
                                    Stroke="Transparent"                                    
                                    ShowLabels="False"
                                    PointTemplate="{StaticResource PolygonItemTemplate}"
                                    ItemsSource="{Binding Data}" CategoryBinding="XValue" ValueBinding="YValue">
            </telerik:LineSeries>
 
 
            <!--"Today"  -->
            <telerik:LineSeries x:Name="lineToday"
                                CombineMode="Cluster"
                                Stroke="Transparent"                                
                                ShowLabels="False"
                                PointTemplate="{StaticResource TodayItemTemplate}"
                                ItemsSource="{Binding TodayData}" CategoryBinding="XValue" ValueBinding="YValue" >
            </telerik:LineSeries>
             
            <!--"Gray Line"  -->
            <telerik:LineSeries x:Name="lineGray"
                                CombineMode="Cluster"
                                Stroke="Gray"
                                StrokeThickness="24"
                                ShowLabels="False"
                                ItemsSource="{Binding Data1}" CategoryBinding="XValue" ValueBinding="YValue">
            </telerik:LineSeries>
 
            <!--"Green Line"  -->
            <telerik:LineSeries x:Name="lineGreen"
                                CombineMode="Cluster"
                                Stroke="Green"
                                StrokeThickness="18"
                                ShowLabels="False"
                                ItemsSource="{Binding Data2}" CategoryBinding="XValue" ValueBinding="YValue">
            </telerik:LineSeries>
 
          
 
        </telerik:RadCartesianChart>


Thanks .

3 Answers, 1 is accepted

Sort by
0
Accepted
Petar Marchev
Telerik team
answered on 07 Aug 2012, 08:34 AM
Hi Phong,

1. The series of the RadChartView are visual elements which reside in a Canvas. Whichever series you have declared last will be drawn on top of the others. So if you need to have a certain series drawn on top of the others, make sure it is the last in the Series collection of the ChartView. Another approach you can try is to set the ZIndex of the series you need to bring to the top ( <telerik:LineSeries ZIndex="1000" /> ).

2. I have attached a simple app that demonstrates the use of the PointTemplateSelector property of the chart. In the template selector you can determine whether this is the last data point and assign the appropriate data template. 

Regards,
Petar Marchev
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Phong
Top achievements
Rank 1
answered on 10 Aug 2012, 12:33 PM
Hi Petar  

Thanks for your help.
 I created a TemplateSelector as you sugested and now it works fine .
One more thing:
-The Chartview doesn't has the TooltipTemplateSelector as the Series have PointTemplateSelector.   
-I don't want the first & last point to show tooltip, so how can we have difference tooltip template for each Series (or Points) ?

Thanks . 
0
Accepted
Evgenia
Telerik team
answered on 16 Aug 2012, 10:46 AM
Hi Phong,

You can trigger the tooltip by setting the ToolTipTemplate property of ChartToolTipBehavior to a valid DataTemplate object during design-time. In the Template, you may control the Visibility of its content via Converter. You may find Petar's project modified and attached here with the ToolTip template mentioned above.

All the best,
Evgenia
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Tags
ChartView
Asked by
Phong
Top achievements
Rank 1
Answers by
Petar Marchev
Telerik team
Phong
Top achievements
Rank 1
Evgenia
Telerik team
Share this question
or