[Solved] Custom data points in line series

[Brandon]

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;}
                 }
         }
}

[Brandon]

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>