Background image size

Thread is closed for posting
4 posts, 0 answers
  1. Jonathan
    Jonathan avatar
    37 posts
    Member since:
    Sep 2012

    Posted 11 May 2011 Link to this post

    I have been experimenting with images in the backgrounds of the chart axis labels

    1. They seem to be rendered larger then they actually are. (see attached screen capture showing the image in a table outside the chart and as an axis label background image set to align mode) 
    2. Can I control the displayed size of the aligned background image without recreating the image and saving a smaller version of it? I do need to also display the text in the axis label as well as seen in the attached image.  
    3. I know I can limit the size of the image if I use the stretch option and limit the size of the textbox but I don't want the image to interfere with the space used by the text and overlap. I used the stretch option on the 3rd instance of the logo in the attached file and it works for me in that case because I am not using any text on that label - the icon is sufficient for that chart. 

    To clarify what you see in the attached image is:
    Icon instance 1 and 2 came from the same page - but instance 1 is not part of the chart but instance 2 is part of the chart and the chart one seems bigger and I don't know why. Icon instance 3 is scaled down by using the stretch option of the label background and limiting the size of the label text area. 

    The following is the code I'm currently using to insert the image in the chart.

    ChartAxisItem xItem = RadChartRiding.PlotArea.XAxis[i];
    xItem.TextBlock.Text = string.Format("{2}{0}\n{1}", r["firstName"], r["lastName"], (i == d.Rows.Count - 1 ? " - LEADER -\n" : ""));
    xItem.TextBlock.Appearance.FillStyle.FillType = Telerik.Charting.Styles.FillType.Image;
    xItem.TextBlock.Appearance.FillStyle.FillSettings.BackgroundImage = string.Format("images/elections/{0}Icon.png", barCode[i]);
    xItem.TextBlock.Appearance.Dimensions.AutoSize = false;
    xItem.TextBlock.Appearance.FillStyle.FillSettings.ImageDrawMode = Telerik.Charting.Styles.ImageDrawMode.Align;
    xItem.TextBlock.Appearance.FillStyle.FillSettings.ImageAlign = Telerik.Charting.Styles.ImageAlignModes.TopLeft;
    xItem.TextBlock.Appearance.Position.AlignedPosition = Telerik.Charting.Styles.AlignedPositions.TopRight;
    xItem.TextBlock.Appearance.Dimensions.Height = 75;
    xItem.TextBlock.Appearance.Dimensions.Width = 330;
    xItem.TextBlock.Appearance.Dimensions.Paddings.Top = (i == d.Rows.Count - 1 ? 10 : 20);

  2. Giuseppe
    Giuseppe avatar
    2363 posts

    Posted 16 May 2011 Link to this post

    Hi Jonathan,

    Thank you for contacting us.

    We reviewed your description and the provided screenshot -- unfortunately the desired appearance cannot be achieved with the background image functionality (align the background image to the left and textblock to the right) so you would need option #3 with the stretching (you can try to tweak the images so they have a wide whitespace area to the right so it would not look like the image and the axis textblock overlap).

    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. Jonathan
    Jonathan avatar
    37 posts
    Member since:
    Sep 2012

    Posted 17 May 2011 Link to this post

    Is there any explanation for why the image in the chart appears to be larger then the same image displayed outside the chart when the image mode is set to align?

    Thanks for your help,

  4. Gimmik
    Gimmik avatar
    170 posts
    Member since:
    May 2011

    Posted 17 May 2011 Link to this post

    Hi Jonathan,

    I imagine that the image is being stretched to fill the available area, or possibly the other image is being shrunk. I would use a tool like FireBug to determine exactly which image is being manipulated and adjust it. You might need to crunch the numbers and do the pixel math to determine what size the image should be. Then just break out Photoshop and make a different logo with more or less pixel padding.

    Let me know if that works for you,
Back to Top