Add different image on each point mark

8 posts, 0 answers
  1. Bárbara
    Bárbara avatar
    16 posts
    Member since:
    Nov 2015

    Posted 10 Nov 2015 Link to this post

    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?
  2. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 11 Nov 2015 Link to this post

    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
  3. UI for WPF is Visual Studio 2017 Ready
  4. Bárbara
    Bárbara avatar
    16 posts
    Member since:
    Nov 2015

    Posted 11 Nov 2015 in reply to Martin Link to this post

    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)

  5. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 11 Nov 2015 Link to this post

    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
  6. Bárbara
    Bárbara avatar
    16 posts
    Member since:
    Nov 2015

    Posted 17 Nov 2015 in reply to Martin Link to this post

    But for RadChartView I should use CategoricalDataPoint then? Because I tried adding  DataPoint (which I prefer) and it is not accepting (RadChart accepts though)
  7. Bárbara
    Bárbara avatar
    16 posts
    Member since:
    Nov 2015

    Posted 17 Nov 2015 Link to this post

    **ADDING** Because on the DataItem in CategoricalDataPoint you can only use {get;} and on thi case I need {set;}
  8. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 18 Nov 2015 Link to this post

    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
  9. Bárbara
    Bárbara avatar
    16 posts
    Member since:
    Nov 2015

    Posted 18 Nov 2015 Link to this post

    Got it, thank you very much!
Back to Top
UI for WPF is Visual Studio 2017 Ready