Image as point mark

[Daniel (DeDU)]

I am trying to change the point marks in my spline chart to an image with no success. Is this possible?

I have made a simple program to show what I mean:

<telerik:RadChart ID="RadChart1" runat="server">
        <Series>
            <telerik:ChartSeries Type="Spline">
                <Appearance>
                    <TextAppearance TextProperties-Font="Arial, 8.25pt" />
                    <PointMark Visible="True" Dimensions-AutoSize="false" Dimensions-Height="10px" Dimensions-Width="10px">
                        <FillStyle MainColor="#FF0000" FillType="solid">
                        </FillStyle>
                    </PointMark>
                    <LineSeriesAppearance Width="5" />
                    <FillStyle MainColor="#999999" FillType="Solid">
                    </FillStyle>
                </Appearance>
                <Items>
                    <telerik:ChartSeriesItem YValue="1.3" ActiveRegion-Tooltip="test" >
                    </telerik:ChartSeriesItem>
                    <telerik:ChartSeriesItem YValue="6">
                    </telerik:ChartSeriesItem>
                    <telerik:ChartSeriesItem YValue="2">
                    </telerik:ChartSeriesItem>
                    <telerik:ChartSeriesItem YValue="8">
                    </telerik:ChartSeriesItem>
                </Items>
            </telerik:ChartSeries>
        </Series>
    </telerik:RadChart>

I would like to change the red point marks to different images depending to the x value, probably in ItemDataBound.

Best regards,
Andreas

[Velin]

Hello Andreas,

Fortunately this can be easily achieved. Here is the code you will need to run on every ChartSeriesItem in order to substitute the default PointMark appearance with a custom image of your own:

                    <telerik:ChartSeriesItem YValue="1" Name="Item 1">
                        <PointAppearance>
                            <FillStyle FillType="Image">
                                <FillSettings BackgroundImage="MyImage.jpg" />
                            </FillStyle>
                        </PointAppearance>
                    </telerik:ChartSeriesItem>

To change the image depending of the XValue property you will need to handle an event such as BeforeLayout where the ChartSeriesItems are accessible. Here is the code:

    protected void Page_Load(object sender, EventArgs e)
    {
        RadChart2.BeforeLayout += new EventHandler<EventArgs>(RadChart2_BeforeLayout);
    }

    void RadChart2_BeforeLayout(object sender, EventArgs e)
    {
        foreach (ChartSeriesItem item in RadChart2.Series[0].Items)
        {
            string imageUrl = "MyImage.jpg";

            if(item.XValue > 5)
                imageUrl = "MyImage2.jpg";

            item.PointAppearance.FillStyle.FillType = Telerik.Charting.Styles.FillType.Image;
            item.PointAppearance.FillStyle.FillSettings.BackgroundImage = imageUrl;
        }
    }

Hope this will help.

All the best,
Velin
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Daniel (DeDU)]

It works like a charm.

Thanks a lot!

[Quantesys IT]

Hello,

I try to personalize the point marks of my Chart with your code sample (server-side) but the modifications are not visible.

I use exactly the same code that you provide :

 protected void Page_Load(object sender, EventArgs e)
    {
        RadChart2.BeforeLayout += new EventHandler<EventArgs>(RadChart2_BeforeLayout);
    }

    void RadChart2_BeforeLayout(object sender, EventArgs e)
    {
        foreach (ChartSeriesItem item in RadChart2.Series[0].Items)
        {
            string imageUrl = "MyImage.jpg";

            if(item.XValue > 5)
                imageUrl = "MyImage2.jpg";

            item.PointAppearance.FillStyle.FillType = Telerik.Charting.Styles.FillType.Image;
            item.PointAppearance.FillStyle.FillSettings.BackgroundImage = imageUrl;
        }
    }

My image is in PNG format, is that a problem for this Telerik component?

I am sure that my URL is well-formed because I use this image on other aspx pages without problems.

Thank you for your help.

Best regards,
Joël

[Ves]

Hi Joël,

The code snippet checks for XValue property of the ChartSeriesItem. This property is not always set. I have attached a small example, which uses two images, where the second one is applied only if the YValue is grater than 5.

Kind regards,
Ves
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.

[Quantesys IT]

I identify my problem but I don't understand the reason:

I have Chart with the price evolution of an object and I want to add a new serie to show different icons on the Chart (representing additional info for some situation).
My second serie has the type "Telerik.Charting.ChartSeriesType.Point" because I only want to display icons.

If I change the type of my serie to "Line", the PointMark are correctly modified and my personalized images are showed. The problem is that I need to use the type "Line" and that doesn't correspond to my needs.

Is that a normal behaviour of your Telerik component?

Thank you for your help.

Joël

[Ves]

Hi Joël ,

The Point series uses a different API as PointMark refers to the points displayed where different parts of a line series are joined. A Point series is filled just like Bar:

foreach (ChartSeriesItem item in RadChart1.Series[0].Items)
        {
            string imageUrl = "MyImg.png";

            if (item.YValue > 5)
                imageUrl = "MyImg2.png";

            item.Appearance.FillStyle.FillType = Telerik.Charting.Styles.FillType.Image;
            item.Appearance.FillStyle.FillSettings.BackgroundImage = imageUrl;
        }

Sincerely,
Ves
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.

[Quantesys IT]

Thank you for your help, it works perfectly!