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

Chart With Background Image

1 Answer 164 Views
Chart (Obsolete)
This is a migrated thread and some comments may be shown as answers.
Andy Gieraltowski
Top achievements
Rank 1
Andy Gieraltowski asked on 31 Aug 2010, 04:49 PM
I have developed a chart that I want to have an image background within the plot area. I built it and set up the image according to the instructions throughout other support areas on the site. I can even get it to work beautifully when I run is on a testing server from visual studio 2010. The image does appear in the background the way I want it to. 

So here is the problem. I upload it onto my hosting server and now when I run the application from there it doesnt put the image in the background of the plot.

I have set overideskinstyle = false. I have checked my file paths and yes the image is uploaded. I have turned all skins off, set backgrounds to transparent so that i know they dont go over the plot area. I have exhausted just about every possible idea and there doesnt seem to be much more support for what I want to do. I am posting the code that makes up the radchart in my aspx file. I add series to the chart programmably within the code behind file (C#).

This is all the code I can show you and not the code behind file because that files contains coding and information that I am not authorized to post in public forums. Any help would be greatly appreciated.

<telerik:RadChart ID="RadChart3" runat="server" DefaultType="Line" 
                        Height="350px" Width="510px" SeriesPalette="Palette1" 
                        EnableEmbeddedBaseStylesheet="False">
                        <Appearance>
                            <Border Visible="False" />
                        </Appearance>
                        <Legend>
                            <Appearance Dimensions-AutoSize="False" Dimensions-Height="20px" 
                                Dimensions-Width="435px" Overflow="Row" Position-AlignedPosition="Bottom" 
                                Position-Auto="False" Position-X="55" Position-Y="328">
                                <ItemTextAppearance TextProperties-Color="DimGray">
                                </ItemTextAppearance>
                                <Border Color="DimGray" />
                            </Appearance>
                            <TextBlock>
                                <Appearance AutoTextWrap="False">
                                </Appearance>
                            </TextBlock>
                        </Legend>
                        <PlotArea>
                            <EmptySeriesMessage Visible="True">
                                <Appearance Visible="True">
                                </Appearance>
                            </EmptySeriesMessage>
                            <XAxis LayoutMode="Normal" MaxItemsCount="30" Visible="True" AutoScale="False" 
                                IsZeroBased="False" MaxValue="90" MinValue="30" Step="10">
                                <Appearance>
                                    <MajorGridLines Color="DimGray" Width="0" />
                                </Appearance>
                                <AxisLabel Visible="True">
                                    <Appearance Position-Auto="False" Position-X="236.2037" Position-Y="300" 
                                        Visible="True">
                                    </Appearance>
                                    <TextBlock Text="Coarsness Factor">
                                        <Appearance Position-AlignedPosition="Bottom" 
                                            TextProperties-Font="Verdana, 9.75pt">
                                        </Appearance>
                                    </TextBlock>
                                </AxisLabel>
                                <Items>
                                    <telerik:ChartAxisItem Value="30">
                                    </telerik:ChartAxisItem>
                                    <telerik:ChartAxisItem Value="40">
                                    </telerik:ChartAxisItem>
                                    <telerik:ChartAxisItem Value="50">
                                    </telerik:ChartAxisItem>
                                    <telerik:ChartAxisItem Value="60">
                                    </telerik:ChartAxisItem>
                                    <telerik:ChartAxisItem Value="70">
                                    </telerik:ChartAxisItem>
                                    <telerik:ChartAxisItem Value="80">
                                    </telerik:ChartAxisItem>
                                    <telerik:ChartAxisItem Value="90">
                                    </telerik:ChartAxisItem>
                                </Items>
                            </XAxis>
                            <YAxis AutoScale="False" IsZeroBased="False" MaxValue="50" MinValue="20" 
                                Step="5">
                                <Appearance>
                                    <MajorGridLines Color="DimGray" />
                                </Appearance>
                                <AxisLabel Visible="True">
                                    <Appearance Visible="True">
                                    </Appearance>
                                    <TextBlock Text="Workability Factor">
                                        <Appearance TextProperties-Font="Arial, 9.75pt" Position-AlignedPosition="Left">
                                        </Appearance>
                                    </TextBlock>
                                </AxisLabel>
                                <Items>
                                    <telerik:ChartAxisItem Value="20">
                                    </telerik:ChartAxisItem>
                                    <telerik:ChartAxisItem Value="25">
                                    </telerik:ChartAxisItem>
                                    <telerik:ChartAxisItem Value="30">
                                    </telerik:ChartAxisItem>
                                    <telerik:ChartAxisItem Value="35">
                                    </telerik:ChartAxisItem>
                                    <telerik:ChartAxisItem Value="40">
                                    </telerik:ChartAxisItem>
                                    <telerik:ChartAxisItem Value="45">
                                    </telerik:ChartAxisItem>
                                    <telerik:ChartAxisItem Value="50">
                                    </telerik:ChartAxisItem>
                                </Items>
                            </YAxis>
                            <YAxis2>
                                <AxisLabel>
                                    <TextBlock>
                                        <Appearance TextProperties-Font="Verdana, 9.75pt, style=Bold">
                                        </Appearance>
                                    </TextBlock>
                                </AxisLabel>
                            </YAxis2>
                            <Appearance Corners="Round, Round, Round, Round, 6" Dimensions-AutoSize="False" 
                                Dimensions-Height="260px" Dimensions-Margins="5%, 5%, 24%, 10%" 
                                Dimensions-Width="435px" Position-AlignedPosition="Top" Position-Auto="False" 
                                Position-X="55" Position-Y="20" SeriesPalette="Palette1">
                                <FillStyle FillType="Image" MainColor="Transparent" SecondColor="Transparent">
                                    <FillSettings BackgroundImage="BACK.png">
                                    </FillSettings>
                                </FillStyle>
                                <Border Color="DimGray" />
                            </Appearance>

                        </PlotArea>
                        <ChartTitle Visible="False">
                            <Appearance Corners="Round, Round, Round, Round, 6" Dimensions-AutoSize="False" 
                                Dimensions-Height="0px" Dimensions-Margins="0px, 0px, 0px, 0%" 
                                Dimensions-Paddings="0px, 0px, 0px, 0px" Dimensions-Width="0px" 
                                Position-AlignedPosition="Top" Position-Auto="False" Position-X="0" 
                                Position-Y="0" Visible="False">
                                <FillStyle FillType="Solid" MainColor="Transparent">
                                </FillStyle>
                                <Border Color="DimGray" />
                            </Appearance>
                            <TextBlock Text="">
                                <Appearance TextProperties-Font="Verdana, 11.25pt">
                                </Appearance>
                            </TextBlock>
                        </ChartTitle>
                        <CustomPalettes>
                            <telerik:Palette Name="Palette1">
                                <Items>
                                    <telerik:PaletteItem MainColor="BlueViolet">
                                    </telerik:PaletteItem>
                                </Items>
                            </telerik:Palette>
                        </CustomPalettes>
                    </telerik:RadChart>

1 Answer, 1 is accepted

Sort by
0
Ves
Telerik team
answered on 03 Sep 2010, 12:04 PM
Hi Andy Gieraltowski,

The only reason I can guess of is still related to the image and specifically its path. Please, try putting the full path to the image like this:

<FillSettings BackgroundImage="~/Images/BACK.png">
</FillSettings>

where BACK.png is placed in a folder named Images in the root of the web application.

Of course, I assume there are no issues with rights, related to that image.

Greetings,
Ves
the Telerik team
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 Public Issue Tracking system and vote to affect the priority of the items
Tags
Chart (Obsolete)
Asked by
Andy Gieraltowski
Top achievements
Rank 1
Answers by
Ves
Telerik team
Share this question
or