Custom data points in line series

2 posts, 0 answers
  1. Brandon
    Brandon avatar
    4 posts
    Member since:
    Jun 2012

    Posted 07 May 2012 Link to this post

    I’m developing an app using the Telerik controls. I want to plot a line and then add different custom data points on the graph. I tried to use a Chart series line and a scatter series but the former requires a CatagoricalAxis while the latter requires LinearAxis. So I’m using a second line series, making the line transparent and then adding points. I need to customize the points based on another data set. For example, if the value is 1, draw a circle, 2, draw a square etc…

    Here is a sample XMAL and code behind. The typeValueArray are the values that I want to customize the point templates. I don't think this is natively supported, but is there a workaround?

     

    <Grid x:Name="LayoutRoot" Background="Transparent">
                     <Grid.RowDefinitions>
                              <RowDefinition Height="Auto"/>
                              <RowDefinition Height="*"/>
                     </Grid.RowDefinitions>
     
                     <!--TitlePanel contains the name of the application and page title-->
                     <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
                              <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
                              <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
                     </StackPanel>
     
                     <!--ContentPanel - place additional content here-->
                     <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
                              <chart:RadCartesianChart x:Name="TimeLine"  >
                                       <chart:RadCartesianChart.VerticalAxis>
                                                <chart:LinearAxis/>
                                       </chart:RadCartesianChart.VerticalAxis>
                                       <chart:RadCartesianChart.HorizontalAxis>
                                                <chart:CategoricalAxis/>
                                       </chart:RadCartesianChart.HorizontalAxis>
                                       <chart:LineSeries Stroke="Yellow" StrokeThickness="1" />
                                       <chart:LineSeries Stroke="Transparent" >
                                                <chart:LineSeries.PointTemplates>
                                                        <DataTemplate>
                                                                 <Ellipse Width="10" Height="15" Fill="Green" />    
                                                        </DataTemplate>
                                                        <DataTemplate>
                                                                 <Ellipse Width="10" Height="15" Fill="Red" />
                                                        </DataTemplate>
                                                        <DataTemplate>
                                                                 <Ellipse Width="10" Height="15" Fill="Yellow" />
                                                        </DataTemplate>
                                                </chart:LineSeries.PointTemplates>
                                       </chart:LineSeries>
                              </chart:RadCartesianChart>
                     </Grid>
             </Grid>
     
    namespace PhoneScatterSeries
    {
             public partial class MainPage : PhoneApplicationPage
             {
                     // Constructor
                     public MainPage()
                     {
                              InitializeComponent();
      
                              this.TimeLine.Series[0].ItemsSource = new double[] { 1, 2, 1, 3, 2, 1, 3};
                              //this.TimeLine.Series[1].ItemsSource = new double[] { 1, 1, 3, 1, 3, 2, 1};
      
                              LineSeries itemSeries = this.TimeLine.Series[1] as LineSeries;
                              itemSeries.ValueBinding = new PropertyNameDataPointBinding() { PropertyName = "TypeStat" };
                              itemSeries.ItemsSource = PopulateValues();
      
                     }
      
                     private List<GraphSeriesClass> PopulateValues()
                     {
                              List<GraphSeriesClass> DataClass = new List<GraphSeriesClass>();
      
                              int[] typeStatArray = new int[] { 2, 1, 3, 2, 1, 1, 2 };
                              int[] typeValueArray = new int[] { 4, 5, 2, 2, 3, 2, 1 };
      
                              for (int i = 1; i < 7; i++)
                              {
                                       GraphSeriesClass ThisSeries = new GraphSeriesClass();
                                       ThisSeries.TypeStat = typeStatArray[i];
                                       ThisSeries.TypeValue = typeValueArray[i];
                                       DataClass.Add(ThisSeries);
                              }
      
                              return DataClass;
                     }
             }
     
    namespace PhoneScatterSeries
    {
             public class GraphSeriesClass
             {
                     private int _typeStat;
                     public int TypeStat
                     {
                              get      {return _typeStat;}
                              set      {_typeStat = value;}
                     }
      
                     private int _typeValue;
                     public int TypeValue
                     {
                              get {return _typeValue;}
                              set      {_typeValue = value;}
                     }
             }
    }

  2. Brandon
    Brandon avatar
    4 posts
    Member since:
    Jun 2012

    Posted 10 May 2012 Link to this post

    I found some talented help who walked me through a solution so I thought I share it back with the forum:
    using System.Windows.Markup;
     
           [ContentProperty("Templates")]
           public class MyTemplateSelector: DataTemplateSelector {
                  public MyTemplateSelector() {
                         Templates = new Collection<DataTemplate>();
                  } // MyTemplateSelector()
     
                  public Collection<DataTemplate> Templates {
                         get;
                         set;
                  } // Templates
     
                  public override DataTemplate SelectTemplate(object item, DependencyObject container) {
                         var itemIndex = (int)item;
                         var series = (ChartSeries)container;
                         var element = series.ItemsSource.Cast<GraphSeriesClass>().ElementAt(itemIndex);
     
                         var templateIndex = element.TypeValue;
                         return Templates[templateIndex];
                  } // SelectTemplate(object, DependencyObject)
           } // MyTemplateSelector

    And then I used the point template selector in my XAML:

    <chart:RadCartesianChart x:Name="TimeLine" >
          <chart:RadCartesianChart.Resources>
                 <local:MyTemplateSelector x:Key="TemplateSelector">
                        <DataTemplate>
                               <Ellipse Width="10" Height="10" Fill="Red" />
                        </DataTemplate>
                        <DataTemplate>
                               <Ellipse Width="15" Height="15" Fill="Orange" />
                        </DataTemplate>
                        <DataTemplate>
                               <Ellipse Width="15" Height="15" Fill="Yellow" />
                        </DataTemplate>
                        <DataTemplate>
                               <Ellipse Width="15" Height="15" Fill="Green" />
                        </DataTemplate>
                        <DataTemplate>
                               <Ellipse Width="15" Height="15" Fill="Cyan" />
                        </DataTemplate>
                        <DataTemplate>
                               <Ellipse Width="15" Height="15" Fill="Blue" />
                        </DataTemplate>
                        <DataTemplate>
                               <Ellipse Width="15" Height="15" Fill="Magenta" />
                        </DataTemplate>
                 </local:MyTemplateSelector>
          </chart:RadCartesianChart.Resources>
          <chart:RadCartesianChart.VerticalAxis>
                 <chart:LinearAxis/>
          </chart:RadCartesianChart.VerticalAxis>
          <chart:RadCartesianChart.HorizontalAxis>
                 <chart:CategoricalAxis/>
          </chart:RadCartesianChart.HorizontalAxis>
          <chart:LineSeries Stroke="Yellow" StrokeThickness="1" />
          <chart:LineSeries Stroke="Transparent" PointTemplateSelector="{StaticResource TemplateSelector}"/>
    </chart:RadCartesianChart>

  3. DevCraft banner
Back to Top