RadCartesianChart Series's priority

4 posts, 2 answers
  1. Phong
    Phong avatar
    8 posts
    Member since:
    Oct 2012

    Posted 03 Aug 2012 Link to this post

    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 .
  2. Answer
    Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 07 Aug 2012 Link to this post

    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.

  3. DevCraft banner
  4. Phong
    Phong avatar
    8 posts
    Member since:
    Oct 2012

    Posted 10 Aug 2012 Link to this post

    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 . 
  5. Answer
    Evgenia
    Admin
    Evgenia avatar
    1407 posts

    Posted 16 Aug 2012 Link to this post

    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.

Back to Top