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

Custom data points in line series

1 Answer 228 Views
Chart
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Brandon
Top achievements
Rank 1
Brandon asked on 07 May 2012, 09:19 PM

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

1 Answer, 1 is accepted

Sort by
0
Brandon
Top achievements
Rank 1
answered on 10 May 2012, 05:16 AM
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>

Tags
Chart
Asked by
Brandon
Top achievements
Rank 1
Answers by
Brandon
Top achievements
Rank 1
Share this question
or