I just started using the RadChart control and am attempting to create an XY scatter chart that displays matrix data that consists of row/column coordinates with a measurement value at each row/column location. Both the row and column are 1-to-n, so I don't know the upper bound size of each is until runtime. Here's the class representation of a single datapoint:
public class Measurement { public int Row { get; set; } public int Column { get; set; } public double Value { get; set; } }This is the method I'm using to create sample data that I am using to test this out with each row/series of data having multiple measurements:
private List<Measurement> CreateMeasurements() { // Create sample data List<Measurement> measurements = new List<Measurement>(); measurements.Add(new Measurement() { Row = 2, Column = 1, Value = 130.5 }); measurements.Add(new Measurement() { Row = 2, Column = 2, Value = 135.0 }); measurements.Add(new Measurement() { Row = 2, Column = 3, Value = 133.0 }); measurements.Add(new Measurement() { Row = 2, Column = 4, Value = 127.0 }); measurements.Add(new Measurement() { Row = 2, Column = 5, Value = 120.0 }); measurements.Add(new Measurement() { Row = 3, Column = 1, Value = 140.5 }); measurements.Add(new Measurement() { Row = 3, Column = 2, Value = 150.5 }); measurements.Add(new Measurement() { Row = 3, Column = 5, Value = 135.0 }); measurements.Add(new Measurement() { Row = 3, Column = 6, Value = 133.2 }); measurements.Add(new Measurement() { Row = 4, Column = 2, Value = 145.5 }); measurements.Add(new Measurement() { Row = 4, Column = 3, Value = 155.5 }); measurements.Add(new Measurement() { Row = 4, Column = 5, Value = 160.5 }); measurements.Add(new Measurement() { Row = 4, Column = 6, Value = 165.8 }); return measurements; }What I am attempting to do is configure the chart declaratively in XAML, but I can't seem to figure out how to get a series for each row this way since it seems as though I need to know how many ItemMappings there will be beforehand. Here's the XAML I started with for the chart:
<telerik:RadChart HorizontalAlignment="Left" Margin="12,12,12,12" x:Name="XYScatterChart" VerticalAlignment="Top" > <telerik:RadChart.SeriesMappings> <telerik:SeriesMapping LegendLabel="Row"> <telerik:SeriesMapping.SeriesDefinition> <telerik:LineSeriesDefinition/> </telerik:SeriesMapping.SeriesDefinition> <telerik:SeriesMapping.ItemMappings> <telerik:ItemMapping DataPointMember="YValue" FieldName="Value"/> <telerik:ItemMapping DataPointMember="XValue" FieldName="Column"/> </telerik:SeriesMapping.ItemMappings> </telerik:SeriesMapping> </telerik:RadChart.SeriesMappings> </telerik:RadChart> public MainWindow() { InitializeComponent();
// Set chart source data List<Measurement> measurements = CreateMeasurements(); XYScatterChart.ItemsSource = measurements;
// Get distinct row values var rowValues = (from measurement in measurements select measurement.Row).Distinct();
// Add series mappings foreach (int rowValue in rowValues) { SeriesMappingCollection seriesMappings = XYScatterChart.SeriesMappings; CreateSeriesMapping(XYScatterChart.SeriesMappings, rowValue); } }
private void CreateSeriesMapping(SeriesMappingCollection seriesMappings, int rowValue) { // Add a new mapping SeriesMapping seriesMapping = new SeriesMapping(); seriesMappings.Add(seriesMapping);
// Set the legend label seriesMapping.LegendLabel = String.Concat("Row ", rowValue.ToString());
// Set the series definition seriesMapping.SeriesDefinition = new LineSeriesDefinition();
// Add the filter descriptor ChartFilterDescriptor filterDescriptor = new ChartFilterDescriptor(); filterDescriptor.Member = "Row"; filterDescriptor.Operator = FilterOperator.IsEqualTo; filterDescriptor.Value = rowValue; seriesMapping.FilterDescriptors.Add(filterDescriptor);
// Add the item mappings ItemMappingCollection itemMappings = seriesMapping.ItemMappings; itemMappings.Add(new ItemMapping("Column", DataPointMember.XValue)); itemMappings.Add(new ItemMapping("Value", DataPointMember.YValue)); }Hi.
I is not accustomed to writing in English. Therefore, it can be difficult to read the Thread. Please understand.
RadComboBox and RadTimePicker use, the program being developed, I have a problem.
My program, RadComboBox selection index is used to change the value TimeInterval of RadTimePicker.
XMAL code below, I have been using is normally. Assembly version is the 2010.1.603.35
<Window x:Class="TimePicker_Test.Window1" xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:telerikStyle="http://schemas.telerik.com/2008/xaml/presentation" xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls" xmlns:telerikPanel="clr-namespace:Telerik.Windows.Controls.Primitives;assembly=Telerik.Windows.Controls" xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input" Title="MainWindow" Height="350" Width="525"> <Window.Resources> <ResourceDictionary> <sys:TimeSpan x:Key="timespan_5min"> 0:5:0 </sys:TimeSpan> <sys:TimeSpan x:Key="timespan_hour"> 1:0:0 </sys:TimeSpan> <Style x:Key="ui_TimePicker" TargetType="{x:Type telerikInput:RadTimePicker}"> <Style.Triggers> <DataTrigger Binding="{Binding ElementName=ui_RadComboBox, Path=SelectedIndex}" Value="0"> <Setter Property="TimeInterval" Value="{StaticResource timespan_5min}" /> </DataTrigger> <DataTrigger Binding="{Binding ElementName=ui_RadComboBox, Path=SelectedIndex}" Value="1"> <Setter Property="TimeInterval" Value="{StaticResource timespan_hour}" /> </DataTrigger> </Style.Triggers> </Style> <!--RadTimePicker ScrollBar--> <LinearGradientBrush x:Key="HeaderBackgroundBrush" EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFF8F8F9" Offset="0"/> <GradientStop Color="#FFDBDEE1" Offset="1"/> <GradientStop Color="#FFDFE2E5" Offset="0.4"/> <GradientStop Color="#FFC7CBD1" Offset="0.4"/> </LinearGradientBrush> <LinearGradientBrush x:Key="BorderOuterColor" EndPoint="0.714,1.292" StartPoint="0.318,0.068"> <GradientStop Color="#FFdbdcde" Offset="0.39079609253679837" /> <GradientStop Color="#FFc6c7c8" Offset="1" /> </LinearGradientBrush> <SolidColorBrush x:Key="HeaderForegroundBrush" Color="#FF000000"></SolidColorBrush> <SolidColorBrush x:Key="ContentBackgroundBrush" Color="#f0f1f2" /> <SolidColorBrush x:Key="HeaderBackgroundBrush11" Color="#FFFFFFFF" /> <Style x:Key="HeaderContentStyle" TargetType="ContentControl"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ContentControl"> <Grid x:Name="RootElement" Margin="0" Background="Transparent"> <Rectangle Fill="Transparent" /> <ContentPresenter x:Name="buttonContent" HorizontalAlignment="Center" Margin="{TemplateBinding Padding}" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Center" /> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style x:Key="ui_Clock" TargetType="telerikInput:RadClock"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="telerikInput:RadClock"> <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="30" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <!--Header background: --> <Border Background="{StaticResource HeaderBackgroundBrush}" BorderBrush="{StaticResource BorderOuterColor}" BorderThickness="0 0 0 1" > <ContentControl x:Name="button" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" HorizontalAlignment="Center" Grid.Row="0" Foreground="{StaticResource HeaderForegroundBrush}" Style="{StaticResource HeaderContentStyle}" /> </Border> <ScrollViewer MaxHeight="200" Grid.Row="1"> <ItemsPresenter x:Name="ItemsPresenter" ></ItemsPresenter> </ScrollViewer> </Grid> </Border> </ControlTemplate> </Setter.Value> </Setter> <Setter Property="Header" Value="Clock" /> <Setter Property="ItemsPanel"> <Setter.Value> <ItemsPanelTemplate> <telerikPanel:RadUniformGrid x:Name="uniformGrid" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" /> </ItemsPanelTemplate> </Setter.Value> </Setter> <Setter Property="ItemTemplate"> <Setter.Value> <DataTemplate> <Border x:Name="Borderarea" VerticalAlignment="Center"> <TextBlock x:Name="ContentText" TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding}" Margin="5 2 5 2" /> </Border> </DataTemplate> </Setter.Value> </Setter> <Setter Property="Background" Value="{StaticResource ContentBackgroundBrush}" /> <Setter Property="Margin" Value="0" /> <Setter Property="BorderBrush" Value="{StaticResource BorderOuterColor}" /> <Setter Property="BorderThickness" Value="1" /> <Setter Property="StartTime" Value="0:0:0" /> <Setter Property="EndTime" Value="23:59:0" /> <Setter Property="TimeInterval" Value="1:0:0" /> </Style> </ResourceDictionary> </Window.Resources> <Grid> <StackPanel> <telerikInput:RadComboBox x:Name="ui_RadComboBox" SelectedIndex="0"> <telerikInput:RadComboBoxItem Content="5Minute" /> <telerikInput:RadComboBoxItem Content="Hour" /> </telerikInput:RadComboBox> <telerikInput:RadTimePicker Culture="en-US" Style="{StaticResource ui_TimePicker}" > </telerikInput:RadTimePicker> </StackPanel> </Grid> </Window><telerikInput:RadTimePicker Culture="en-US" Style="{StaticResource ui_TimePicker}" ClockStyle="{StaticResource ui_Clock}"/>I've got a hybrid Chart where the high-level definitions are in XAML, but I build the DataSeries at run-time. I'm getting a case where I have a Legend on the right, but there are no entries there. Here's the XAML:
<telerik:RadChart Name="PowerChart" ItemsSource="{Binding}" > <telerik:RadChart.DefaultView> <telerik:ChartDefaultView> <telerik:ChartDefaultView.ChartArea> <telerik:ChartArea> <telerik:ChartArea.AxisY> <telerik:AxisY Title="Watts"/> </telerik:ChartArea.AxisY> <telerik:ChartArea.AxisX> <telerik:AxisX Title="Time" IsDateTime="True" Step="5" LabelStep="1" DefaultLabelFormat="hh:mm" StepLabelLevelHeight="10"> </telerik:AxisX> </telerik:ChartArea.AxisX> </telerik:ChartArea> </telerik:ChartDefaultView.ChartArea> <telerik:ChartDefaultView.ChartTitle> <telerik:ChartTitle Content="Power"/> </telerik:ChartDefaultView.ChartTitle> </telerik:ChartDefaultView> </telerik:RadChart.DefaultView> <telerik:RadChart.DefaultSeriesDefinition> <telerik:StackedBarSeriesDefinition ShowItemLabels="False"/> </telerik:RadChart.DefaultSeriesDefinition> </telerik:RadChart>Here's the code-behind that populates the chart via a non-default constructor on a Window:
public PowerChartWindow(DateRangeFilter dateRange, IEnumerable<Circuit> circuitList) { InitializeComponent(); // Hide the legend and adjust the title if one circuit if (circuitList.Count() < 2) { PowerChart.DefaultView.ChartLegend.Visibility = System.Windows.Visibility.Collapsed; } else { PowerChart.DefaultView.ChartLegend.Visibility = System.Windows.Visibility.Visible; } // Initialize data series foreach (Circuit c in circuitList) { // Set up the item mappings SeriesMapping circuitMapping = new SeriesMapping(); circuitMapping.ItemMappings.Add(new ItemMapping("Timestamp", DataPointMember.XValue)); circuitMapping.ItemMappings.Add(new ItemMapping("WattsAllPhases",DataPointMember.YValue)); circuitMapping.LegendLabel = c.Name; circuitMapping.FilterDescriptors.Add(new ChartFilterDescriptor("Circuit.Name", typeof(String), Telerik.Windows.Data.FilterOperator.IsEqualTo, c.Name)); // Bind the mappings to the series PowerChart.SeriesMappings.Add(circuitMapping); } } Some of the high points:
So the grid is getting set up properly, with the X-Axis correct, ane the Y-Axis labelled properly, and multiple color-coded series. But the Legend is empty. Thoughts?
Attached is a screen shot of what I get.
David Yon
(on edit: I guess I really mean a SeriesMapping, not a DataSeries as described above)
public partial class ctlPublicidad : UserControl{Timer m_objTemporizador = new Timer();List<string> m_vaThumbNails = new List<string>();public ctlPublicidad() {this.InitializeComponent();IndiceThumbnailActivo = -1;}// This is execute when UserControl is loadedprivate void UserControl_Loaded(object sender, RoutedEventArgs e) {MostrarSiguienteImagenThumbNail(); m_objTemporizador = new Timer(7000); m_objTemporizador.Elapsed += new ElapsedEventHandler(Temporizador_Elapsed); m_objTemporizador.Start();}void Temporizador_Elapsed(object sender, System.Timers.ElapsedEventArgs e) { MostrarSiguienteImagenThumbNail(); } private void MostrarSiguienteImagenThumbNail() { Random vnNumeroRandom = new Random(); int vnEfecto = vnNumeroRandom.Next(1, 7); switch (vnEfecto) { case 1: TransitionControl.Transition = new MotionBlurredZoomTransition(); TransitionControl.Duration = new TimeSpan(0, 0, 0, 0, 400); break; case 2: TransitionControl.Transition = new FadeTransition(); TransitionControl.Duration = new TimeSpan(0, 0, 0, 0, 750); break; case 3: TransitionControl.Transition = new LinearFadeTransition() { Angle = 0.3, Darker = 0.3, Thickness = 0.2 }; TransitionControl.Duration = new TimeSpan(0, 0, 0, 0, 750); break; case 4: TransitionControl.Transition = new WaveTransition() { Angle = 0.5, Amplitude = 0.15 }; TransitionControl.Duration = new TimeSpan(0, 0, 0, 0, 750); break; case 5: TransitionControl.Transition = new FlipWarpTransition(); TransitionControl.Duration = new TimeSpan(0, 0, 0, 0, 750); break; case 6: TransitionControl.Transition = new SlideAndZoomTransition(); TransitionControl.Duration = new TimeSpan(0, 0, 0, 0, 750); break; case 7: TransitionControl.Transition = new RollTransition(); TransitionControl.Duration = new TimeSpan(0, 0, 0, 0, 750); break; } TransitionControl.Content = new Image() { Source = new BitmapImage(new Uri(m_vaThumbNails[++IndiceThumbnailActivo], UriKind.RelativeOrAbsolute)) }; }}