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)