Get background Image when custom css

Thread is closed for posting
4 posts, 0 answers
  1. Phong
    Phong avatar
    5 posts
    Member since:
    Mar 2011

    Posted 18 Apr 2011 Link to this post

    Hi all,

    My snip code as below : 
    public class Marble : ISkin
        {
            public Marble()
            {
            }
     
            public string GetCSS()
            {
                StringBuilder css = new StringBuilder();
                css.Append(@"
    <Chart SkinName=""Marble"">
      <ChartTitle>
        <Appearance>
          <FillStyle MainColor=""Transparent"" />
          <Position AlignedPosition=""Top"" />
        </Appearance>
        <TextBlock>
          <Appearance>
            <TextProperties Font=""Arial, 22pt"" Color=""89, 79, 52"" />
          </Appearance>
        </TextBlock>
      </ChartTitle>
      <Legend>
        <Appearance Overflow=""Row"">
          <ItemTextAppearance>
            <TextProperties Color=""101, 91, 72"" Font=""Georgia, 9pt"" />
          </ItemTextAppearance>
          <FillStyle MainColor=""Transparent"" />
          <Position AlignedPosition=""Bottom"" />
          <Dimensions Margins=""17.6%, 3%, 1px, 1px"" />
          <Border Color=""Transparent"" />
        </Appearance>
      </Legend>
      <Appearance TextQuality=""AntiAlias"">
        <FillStyle FillType=""Image"">
          <FillSettings ImageDrawMode=""Flip"" BackgroundImage=""{chart}"" />
        </FillStyle>
        <Border Color=""181, 166, 132"" />
      </Appearance>
      <PlotArea>
        <XAxis>
          <Appearance Color=""Transparent"">
            <MajorGridLines PenStyle=""Solid"" Color=""94, 93, 87"" />
            <MajorTick Color=""173, 164, 142"" />
            <TextAppearance>
              <TextProperties Color=""101, 91, 72"" Font=""Georgia, 9pt"" />
            </TextAppearance>
          </Appearance>
          <AxisLabel>
            <TextBlock>
              <Appearance>
                <TextProperties Color=""101, 91, 72"" Font=""Georgia, 9pt"" />
              </Appearance>
            </TextBlock>
          </AxisLabel>
        </XAxis>
        <YAxis>
          <Appearance Color=""Transparent"">
            <MajorGridLines PenStyle=""Solid"" Color=""94, 93, 87"" />
            <MinorGridLines PenStyle=""Solid"" Color=""94, 93, 87"" />
            <MinorTick Color=""173, 164, 142"" />
            <MajorTick Color=""173, 164, 142"" />
            <TextAppearance>
              <TextProperties Color=""101, 91, 72"" Font=""Georgia, 9pt"" />
            </TextAppearance>
          </Appearance>
          <AxisLabel>
            <TextBlock>
              <Appearance>
                <TextProperties Color=""101, 91, 72"" Font=""Georgia, 9pt"" />
              </Appearance>
            </TextBlock>
          </AxisLabel>
        </YAxis>
        <Appearance>
          <FillStyle FillType=""Image"">
            <FillSettings ImageDrawMode=""Flip"" BackgroundImage=""{plotarea}"" ImageAlign=""Top"" ImageFlip=""FlipY"" />
          </FillStyle>
          <Dimensions Margins=""22%, 24%, 12%, 10%"" />
          <Border Color=""144, 136, 118"" Width=""8"" />
        </Appearance>
      </PlotArea>
    </Chart>");
                return css.ToString();
            }
        }

    In the marble skin, we see two params {image}  and {plotarea}. If we do not custom css, chart can show the background. However, I want to custom some its style, its background cannot show.

    Please help.

    Thanks / Phong Dang.
  2. Vladimir Milev
    Admin
    Vladimir Milev avatar
    1061 posts

    Posted 20 Apr 2011 Link to this post

    Hello Phong,

    Can you please share a small runnable sample with us illustrating the problem you have?

    Best wishes,
    Vladimir Milev
    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. Phong
    Phong avatar
    5 posts
    Member since:
    Mar 2011

    Posted 20 Apr 2011 Link to this post

    Hi Vladimir

    else //Custom CSS
                    Skin skin = new Skin();   //my class is used for custom css
                    skin.ChartTemplate = ChartTemplate.Marble;
                    string xml = skin.GetCSS();
     
                    XmlDocument doc = new XmlDocument();
                    doc.LoadXml(xml);
                    ChartSkin mySkin = new ChartSkin(doc);
                    mySkin.ApplyTo(chart.Chart);

    Please see the first post and two attached files and above code. You can see if you set Skin property in RadChart ( Skin : Marble), the graph will have the background (see Marble.png). Others, the graph does not have the background (see Custom-CSS.png).

    Thanks / Phong Dang.

  4. Vladimir Milev
    Admin
    Vladimir Milev avatar
    1061 posts

    Posted 26 Apr 2011 Link to this post

    Hi Phong,

    Thanks for reporting this issue. Unfortunately, built-in image files are not supported with custom skins. We suggest that you provide a full server path to the background image you would like to show instead of  "{plotArea}".

    All the best,
    Vladimir Milev
    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.

Back to Top