ItemTemplate and ItemSource

[Dr.YSG]

Is there a means of using a RadChart that has both a data bound data series, and a template for each item?

What I am looking to do is take a ObservableCollection (sourced by a CollectionViewSource for filtering, grouping, etc) and bind it to a chart (scatter, pie, etc). Lets call this collection People.

So that certain elements of the items in People (e.g. people.age, people.income, etc.) are then data bound in the manner
X-axis.Itemsource={binding path=age} Y-axis.ItemSource{binding path=income} and then plot it as a scatter diagram.

Then I want to use data templates for the individual items of the scatter diagram, and map them to a RadPieChart so that I can get all the attributes of People. (e.g. people.count, people.grade, etc) as different slices of the PIE chart. Each data point would be a PIE chart, created by the Data Template

Is this possible?

I think it in the SilverLight Toolkit (they support xaml data binding, ItemTemplates and ItemSource with binding).

[Dwight]

Hi Steven,

Unfortunately, such a complex scenario is not possible to achieve using RadChart.

Best wishes,
Evtim
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Dr.YSG]

Are you sure? I see something like this in your gallery, where you provide tooltips on a scatter diagram, where the tooltip is a Chat that blows up the information. The switch I would want is that the some of the data is mapped to the actually icon. And since you provide custom icons, something like this seems possible.

[Dr.YSG]

Well, I like the PointMarkTemplate (especially since it can use template and data (source) binding). I have no fears of going beyond what you provide out of the box.

 

The issue is the documentation does not tell me if the PART (PART_PointMarkPath) can be something other than a path, nor if there is a template or other binding parameter that lets me get ahold of the item (from the bound itemsource) so that I can pull out subelements to so that I can make the custom point mark parameterized by the values of the item.

 

E.g. if I have an ObservableColleciton of objects of type person:

 

                {age, hair-color, weight, shoe-size}

 

I want to bind the attributes (e.g. color, size) of the custom point chart template to reflect the sub-elements of the person object.

[Dwight]

Hello Dr.YSG,

You can use the PointMark template and add as many custom elements as you like. Here is the original template:

<Style TargetType="telerikCharting:PointMark">
    <Setter Property="Size" Value="10" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="telerikCharting:PointMark">
                <Canvas>
                    <Path x:Name="PART_PointMarkPath"
                          Canvas.Left="{TemplateBinding PointMarkCanvasLeft}"
                          Canvas.Top="{TemplateBinding PointMarkCanvasTop}"
                          Style="{TemplateBinding ShapeStyle}"
                          Width="{TemplateBinding Size}"
                          Height="{TemplateBinding Size}"
                          Stretch="Fill" >
                        <Path.Data>
                            <PathGeometry x:Name="PART_PointMarkPathGeometry" />
                        </Path.Data>
                    </Path>
                </Canvas>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Here is a modified template that places an inner RadChart instead of path:

<Style x:Key="PointMarkStyle" TargetType="tc:PointMark">
    <Setter Property="Size" Value="10" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="tc:PointMark">
                <Canvas>
                    <t:RadChart Width="800" Height="500" ItemsSource="{Binding DataItem}" Canvas.Left="-100" Canvas.Top="-130">
                        <t:RadChart.RenderTransform>
                            <ScaleTransform ScaleX="0.25" ScaleY="0.25" />
                        </t:RadChart.RenderTransform>
                    </t:RadChart>
                </Canvas>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Note, that I do not use data binding in this sample, so I set an array of double values to the property DataPoint.DataItem (for each DataPoint).

In case you use data binding, the original data you pass to the initial RadChart will be referenced through the DataItem property for each DataPoint, so you can use binding such as DataItem.InnerDataSource or something similar.

Best wishes,
Evtim
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.