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

Add different image on each point mark

7 Answers 109 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Bárbara
Top achievements
Rank 1
Bárbara asked on 10 Nov 2015, 02:00 PM
Hello all,
I need to make an image as a point mark on my chart and it has to be a different one for each point mark. How can I do this?

7 Answers, 1 is accepted

Sort by
0
Martin Ivanov
Telerik team
answered on 11 Nov 2015, 08:01 AM
Hi Bárbara,

You can see how to change the point marks' appearance of RadChart series in the Templating Point Marks help article. Basically, you can define an image in the PointMark's template and bind its Source to a property from the data point's model.

Keep in mind that RadChart is our old charting component which has many known issues and limitations. Instead I recommend you to try the new RadChartView which has better implementation and improved performance. The new charts are also very flexible and easy to set up. You can read about the differences between the components in RadChart vs RadChartView help article.

With RadChartView you can customize the appearance of a point mark using the series' PointTemplate.

Regards,
Martin
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Bárbara
Top achievements
Rank 1
answered on 11 Nov 2015, 10:45 AM

Hey Martin, Thanks for your response!

Yes, I know about the PointTemplate, but if I use it won't it set the appearance of all the point marks to be that same template on the same serie?
Because I need a differente appearance for each point mark on the same serie (Like on the picture attached)

0
Martin Ivanov
Telerik team
answered on 11 Nov 2015, 04:32 PM
Hello Bárbara,

You can use the series' PointTemplateSelector to choose different templates for the different data points. Or you define a property with the source of the image in your view model. Then bind this property in the PointTemplate. Here is an example for this approach:
public class DataItemModel
{
    public string ImagePath { get; set; }
    // other properties
}

<telerik:LineSeries.PointTemplate>
    <DataTemplate>
        <Image Source="{Binding DataItem.ImagePath}" />
    </DataTemplate>
</telerik:LineSeries.PointTemplate>

Regards,
Martin
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Bárbara
Top achievements
Rank 1
answered on 17 Nov 2015, 09:04 PM
But for RadChartView I should use CategoricalDataPoint then? Because I tried adding  DataPoint (which I prefer) and it is not accepting (RadChart accepts though)
0
Bárbara
Top achievements
Rank 1
answered on 17 Nov 2015, 09:10 PM
**ADDING** Because on the DataItem in CategoricalDataPoint you can only use {get;} and on thi case I need {set;}
0
Martin Ivanov
Telerik team
answered on 18 Nov 2015, 11:39 AM
Hello Bárbara,

The data points in RadChartView are described by models of type that derives from the DataPoint object. The chart's series are using different data point classes based on their type. For example, the LineSeries, PointSeries, BarSeries and few more are using the CategoricalDataPoint class (derived from DataPoint) to describe the model of their data points. On the other hand, the scatter series as ScatterPointSeries are using the ScatterDataPoint class.

When you populate RadChartView's series with data there are two approaches which you can use
  • Populate directly the DataPoints collection of the series - each chart's Series exposes a DataPoints collection which holds the plotted data points. Depending on the series type this collection can hold different objects (CategoricalDataPoint, ScatterDataPoint, etc.). You can populate this collection directly in code. In this scenario the DataItem of the DataPoint object won't be set because all necessary information is hold by the properties of the DataPoint class.
  • Data Binding - You can create view model for the data points and populate the ItemsSource of the series with a collection that contains the view model objects. This will create an object of type DataPoint for each view model in the ItemsSource and it will add it in the series' DataPoints collection. In this scenario the DataItem property of the DataPoint objects will be set automatically to the view model behind the point.
In other words the DataItem property is read only and it cannot be set manually. If you want to have a value in the DataItem property you will need to populate the series using the data binding approach. However, if this doesn't work for you, you can bind the Source property of the Image element to another property of the DataPoint object (Value for example) and use an IValueConverter which you can use to decide what image source to apply.

Regards,
Martin
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Bárbara
Top achievements
Rank 1
answered on 18 Nov 2015, 05:43 PM
Got it, thank you very much!
Tags
Chart
Asked by
Bárbara
Top achievements
Rank 1
Answers by
Martin Ivanov
Telerik team
Bárbara
Top achievements
Rank 1
Share this question
or