Image as point mark

Thread is closed for posting
8 posts, 1 answers
  1. Daniel (DeDU)
    Daniel (DeDU) avatar
    3 posts
    Member since:
    Apr 2008

    Posted 15 Aug 2009 Link to this post

    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


  2. Answer
    Velin
    Admin
    Velin avatar
    391 posts

    Posted 19 Aug 2009 Link to this post

    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.
  3. Daniel (DeDU)
    Daniel (DeDU) avatar
    3 posts
    Member since:
    Apr 2008

    Posted 19 Aug 2009 Link to this post

    It works like a charm.

    Thanks a lot!
  4. Quantesys IT
    Quantesys IT avatar
    21 posts
    Member since:
    Feb 2009

    Posted 15 Oct 2009 Link to this post

    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
  5. Ves
    Admin
    Ves avatar
    2927 posts

    Posted 20 Oct 2009 Link to this post

    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.
  6. Quantesys IT
    Quantesys IT avatar
    21 posts
    Member since:
    Feb 2009

    Posted 20 Oct 2009 Link to this post

    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
  7. Ves
    Admin
    Ves avatar
    2927 posts

    Posted 21 Oct 2009 Link to this post

    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.
  8. Quantesys IT
    Quantesys IT avatar
    21 posts
    Member since:
    Feb 2009

    Posted 21 Oct 2009 Link to this post

    Thank you for your help, it works perfectly!
Back to Top