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

1 to N Series

1 Answer 66 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Colin
Top achievements
Rank 1
Colin asked on 05 Feb 2011, 05:06 PM

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>

This results in a single series for all of the data.  Is there some way of doing this declaratively so it will know to create a SeriesMapping for each row of data that I have?  Here's the solution I came up with using the code-behind, but I would much prefer to do it declaratively in XAML if it's possible.

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

I've included the image of what the graph looks like if it's of use. Thanks a lot for any suggestions.

1 Answer, 1 is accepted

Sort by
0
Giuseppe
Telerik team
answered on 10 Feb 2011, 09:43 AM
Hi Colin,

You can use the built-in grouping functionality to achieve the desired effect like this:

XAML
<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.GroupingSettings>
                <telerik:GroupingSettings>
                    <telerik:GroupingSettings.GroupDescriptors>
                        <telerik:ChartGroupDescriptor Member="Row" />
                    </telerik:GroupingSettings.GroupDescriptors>
                </telerik:GroupingSettings>
            </telerik:SeriesMapping.GroupingSettings>
        </telerik:SeriesMapping>
    </telerik:RadChart.SeriesMappings>
</telerik:RadChart>

C#
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();
}
 
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;
}
}
 
public class Measurement
{
    public int Row { get; set; }
    public int Column { get; set; }
    public double Value { get; set; }
}

Hope this helps.


Regards,
Giuseppe
the Telerik team
Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
Tags
Chart
Asked by
Colin
Top achievements
Rank 1
Answers by
Giuseppe
Telerik team
Share this question
or