Using a Custom SmartChart Item Background Image

This example shows how a custom background image can be used as SmartChart item backgrounds by assigning an image URL to the BoxBackgroundImage property. It also demonstrates how the FixedBoxHeight and FixedBoxWidth properties can be used to ensure that each SmartChart item matches the size of the custom background image.

Note: When using the FixedBoxHeight and FixedBoxWidth properties, the SmartChart control will not try to fit the SmartChart items into the width specified in the control's Width property as it normally would. Any time fixed values are set on the control (FixedBoxHeight, FixedBoxWidth, FixedFontSize, etc.) it is up to the developer to ensure that the data fits properly into the page when the SmartChart control renders.

<%@ Page Language="C#" MasterPageFile="~/SampleCode/SamplesMasterPage.master" AutoEventWireup="true" CodeFile="LightGrayCustomBackground.aspx.cs" Inherits="LightGrayCustomBackground" Title="SmartChart" %>
<%@ Register TagPrefix="swc" Namespace="SmartWebControls" Assembly="SmartWebControls.SmartChart" %>
<asp:Content ID="content" runat="server" ContentPlaceHolderID="cphMain">
    <style type="text/css">
        .BoxStyle {}
        .BoxTextStyle { padding-top:8px;}
    </style>
    <div id="divTitle">Using a Custom SmartChart Item Background Image</div>
    <div id="divInstructions">
        This example shows how a custom background image can be used as SmartChart item backgrounds by assigning an
        image URL to the BoxBackgroundImage property.  It also demonstrates how the FixedBoxHeight and FixedBoxWidth
        properties can be used to ensure that each SmartChart item matches the size of the custom background image. 
        <p></p>
        Note: When using the FixedBoxHeight and FixedBoxWidth properties, the SmartChart control will not try to 
        fit the SmartChart items into the width specified in the control's Width property as it normally would.  Any
        time fixed values are set on the control (FixedBoxHeight, FixedBoxWidth, FixedFontSize, etc.) it is up to 
        the developer to ensure that the data fits properly into the page when the SmartChart control renders.
    </div>
    <p></p> 

    <swc:SmartChartPro ID="WebSmartChart1" runat="server" Width="850px" Height="375px" DrawShadows="False"
        DataTitleFields="name,title,duties" DataNodeName="person"
        DataKeyField="id" DrawBoxBorder="false" BoxTextCssClass="BoxTextStyle"
        DataFields="name,title" BoxTextColor="Black"
        ChartDepth="3" AllowDrillDown="True" FontStyle="Bold"
        TitleColor="MidnightBlue" OutputType="Html" 
        FixedBoxHeight="54px" FixedBoxWidth="118px" BackColor="White"      
        BoxBackgroundImage="~/SampleCode/SmartChartPro/Images/LightGrayBackgroundRect.gif" 
        ChildMouseOverColor="Red" DataSourceID="XmlDataSource1" 
        Font-Names="Arial" MaxChildrenPerLevelGroup="5"
        HighlightChildrenOnMouseOverColor="Red"
        LineColor="Black" BoxBorderWidth="" Font-Bold="True" 
        >
    </swc:SmartChartPro>
    <asp:XmlDataSource ID="XmlDataSource1" runat="server" 
        DataFile="~/SampleCode/SmartChartPro/XML/OrgChart.xml"></asp:XmlDataSource>
</asp:Content>

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;

public partial class LightGrayCustomBackground : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
}