|
Server : Apache/2.2.17 (Unix) mod_ssl/2.2.17 OpenSSL/0.9.8e-fips-rhel5 DAV/2 PHP/5.2.17 System : Linux localhost 2.6.18-419.el5 #1 SMP Fri Feb 24 22:47:42 UTC 2017 x86_64 User : nobody ( 99) PHP Version : 5.2.17 Disable Function : NONE Directory : /home/queenjbs/www/FusionChart/Contents/Styles/ |
Upload File : |
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>How to Use Styles</title>
<link rel="stylesheet" href="../assets/ui/css/style.css" type="text/css" />
<script type="text/javascript" src="../assets/prettify/prettify.js"></script>
<link rel="stylesheet" type="text/css" href="../assets/prettify/prettify.css" />
<script type="text/javascript" src="../assets/ui/js/jquery.min.js" ></script>
<style type="text/css">
<!--
div.WebHelpPopupMenu { position:absolute;
left:0px;
top:0px;
z-index:4;
visibility:hidden; }
a.whtbtnhide, a.whtbtnshow, a.whtbtnhidenav , a.whtbtnshownav { border-bottom:none !important; }
-->
</style>
<script type="text/javascript" language="javascript1.2" src="../assets/ui/js/whmsg.js"></script>
<script type="text/javascript" language="javascript" src="../assets/ui/js/whver.js"></script>
<script type="text/javascript" language="javascript1.2" src="../assets/ui/js/whproxy.js"></script>
<script type="text/javascript" language="javascript1.2" src="../assets/ui/js/whutils.js"></script>
<script type="text/javascript" language="javascript1.2" src="../assets/ui/js/whlang.js"></script>
<script type="text/javascript" language="javascript1.2" src="../assets/ui/js/whtopic.js"></script>
<script type="text/javascript" src="../assets/ui/js/lib.js"></script>
</head>
<body>
<!-- breadcrumb starts here -->
<div id="breadcrumb"></div>
<script type="text/javascript">
document.write( addFCBreadcrumb( [ "Home|../Introduction/Overview.html", "FusionCharts XT Styles|Styles.html", "How to use?" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">How to Use Styles</td>
</tr>
<tr>
<td><p class="text">To use the <span class="codeInline">Styles </span>feature
in FusionCharts XT, you first need to define your styles in the <span class="codeInline">XML/JSON</span>
data document.</p>
<p> To define styles, the following data
is used:</p></td>
</tr>
<tr>
<td>
<div class="container">
<ul class="tabs">
<li><a href="#tab1">XML</a></li>
<li><a href="#tab2">JSON</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<pre class="prettyprint code_container"><chart>
<!-- Your data here -->
<strong> <styles>
</strong>
<definition>
<style name='MyFirstFontStyle' type='font' font='Verdana' size='12' color='FF0000' bold='1' bgColor='FFFFDD' />
<style name='MyFirstAnimationStyle' type='animation' param='_xScale' start='0' duration='2' />
<style name='MyFirstShadow' type='Shadow' color='CCCCCC' />
</definition>
<application>
<apply toObject='Caption' styles='MyFirstFontStyle,MyFirstShadow' /><br /> <apply toObject='Canvas' styles='MyFirstAnimationStyle' />
<apply toObject='DataPlot' styles='MyFirstShadow' />
</application>
<strong> </styles></strong>
</chart></pre>
</div>
<div id="tab2" class="tab_content">
<pre id="pre-datajson" class="prettyprint code_container">{
"chart": {},
"styles": {
"definition": [
{
"name": "MyFirstFontStyle",
"type": "font",
"font": "Verdana",
"size": "12",
"color": "FF0000",
"bold": "1",
"bgcolor": "FFFFDD"
},
{
"name": "MyFirstAnimationStyle",
"type": "animation",
"param": "_xScale",
"start": "0",
"duration": "2"
},
{
"name": "MyFirstShadow",
"type": "Shadow",
"color": "CCCCCC"
}
],
"application": [
{
"toobject": "Caption",
"styles": "MyFirstFontStyle,MyFirstShadow"
},
{
"toobject": "Canvas",
"styles": "MyFirstAnimationStyle"
},
{
"toobject": "DataPlot",
"styles": "MyFirstShadow"
}
]
}
}</pre>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td><p class="text">As you can see above, all the style related elements and
attributes appear under the <strong class="codeInline"><styles></strong>
parent element. It should effectively contain all your style related
code. FusionCharts XT will not recognize any style definition outside the<span class="codeInline">
<strong><styles></strong> </span>parent element.</p>
<p class="text">Children to<span class="codeInline"> <em class="codeInline"><</em>styles<em class="codeInline">></em></span>
element are <span class="codeInline"><definition></span>
and <span class="codeInline"><application></span>
elements. As the name suggests, <span class="codeInline"><definition>
</span>element contains your custom styles definition for the chart while
under <span class="codeInline"><application></span> element, you
apply your custom defined styles to different chart objects. </p>
<p>Now, let us first get to the definition of styles.</p></td>
</tr>
<tr>
<td class="header"><a name="define"></a>Defining your Styles</td>
</tr>
<tr>
<td class="text"><p>Cruising back through the above <span class="codeInline">XML/JSON</span>
code, you will see that we have defined three custom styles namely:</p>
<ul>
<li><span class="codeInline">MyFirstFontStyle,</span> which
will later help us in setting font properties for text on the chart.</li>
<li><span class="codeInline">MyFirstAnimationStyle</span>, which will
help us in animating a chart object, and</li>
<li><span class="codeInline">MyFirstShadow </span>that can
render a shadow effect on any chart object.</li>
</ul> <p class="highlightBlock">Each style has to be defined using the <span class="codeInline"><style></span>
element. Multiple style elements may be placed one after another under <span class="codeInline"><definition></span> element. So, if you
wish to define five custom styles, you need to create five <span class="codeInline"><style></span> elements.</p>
<p>Depending on the style type you are defining, each <span class="codeInline"><style></span>
element can have multiple attributes. In the above code example, each<span class="codeInline">
<style></span> element has its own set of properties. However, following
two attributes are common to all: </p> <ol start="1" type="1">
<li class="codeInline">name </li>
<li class="codeInline">type </li>
</ol> <p class="text">Both the attributes are mandatory for each <span class="codeInline">style
</span>definition. </p></td>
</tr>
<tr>
<td class="header"><a name="attribute"></a>Mandatory Attributes</td>
</tr>
<tr><td height="25"></td></tr>
<tr>
<td class="textBold"><a name="name"></a>Style Name</td>
</tr>
<tr>
<td class="text"><p><span class="codeInline">Name</span> attribute lets
you assign your custom name for the style definition. For example, in the
above code, we have named the font style as<span class="codeInline"> MyFirstFontStyle,</span>
which could well have been <span class="codeInline">JohnFirstStyle</span>
or <span class="codeInline">GlobalFont </span>or<span class="codeInline"> BigFont </span>etc.</p>
<p class="textBold">Format:</p>
<span class="codeInline">name='stylename'</span>
<p class="textBold">Example:</p></td></tr>
<tr>
<td class="text" valign="top">
<div class="container">
<ul class="tabs">
<li><a href="#tab3">XML</a></li>
<li><a href="#tab4">JSON</a></li>
</ul>
<div class="tab_container">
<div id="tab3" class="tab_content">
<pre class="prettyprint code_container"><style <strong>name='MyFirstFontStyle'</strong> type='font' face='Verdana'.../>
<style <strong>name='MyFirstAnimationStyle'</strong> type='animation' .../>
<style <strong>name='MyFirstShadow'</strong> type='Shadow' .../></pre>
</div>
<div id="tab4" class="tab_content">
<pre id="pre-datajson2" class="prettyprint code_container">"definition":[{ <strong>"name":"MyFirstFontStyle"</strong>, "type":"font", "face":"Verdana", ...},<br> {<strong> "name":"MyFirstAnimationStyle"</strong>, "type":"animation", ...},<br> {<strong> "name":"MyFirstShadow"</strong>, "type":"Shadow", ...}]</pre>
</div></div></div></td>
</tr>
<tr>
<td><p class="text">There are no restrictions on the style name, barring the
pointers below:</p> <ul>
<li><span class="codeInline">Style</span> name can only include
alphabets and numbers. Punctuation marks (including underscore) should not
be used.</li>
<li><span class="codeInline">Style</span> name must be unique,
that is, two style definitions cannot have the same name as there will
be a conflict between the two.</li>
</ul></td>
</tr>
<tr><td height="25"></td></tr>
<tr>
<td class="textBold"><a name="type"></a>Style Type</td></tr>
<tr>
<td class="text">
<p>Each style needs to be defined as to what <span class="codeInline">type</span>
it is. The <span class="codeInline">type</span> defines what this style
is going to do. FusionCharts XT supports six style types:</p>
<ul>
<li class="codeInline">Font</li>
<li class="codeInline">Animation</li>
<li class="codeInline">Shadow</li>
<li class="codeInline">Glow</li>
<li class="codeInline">Blur</li>
<li class="codeInline">Bevel</li>
</ul>
<p>So, the <span class="codeInline">type </span>attribute
expects one of the above six values as its parameter. In our example,
we have defined the first style type as <span class="codeInline">"font"</span>,
second one as <span class="codeInline">"animation"</span> and third one
as <span class="codeInline">"shadow"</span>, which is self explanatory.</p>
<p class="textBold">Format:</p>
<span class="codeInline">type='parameter'</span>
(must be either<span class="codeInline"> 'Font' </span>or <span class="codeInline">'Animation'</span>
or <span class="codeInline">'Shadow' </span>or <span class="codeInline">'Glow'</span>
or <span class="codeInline">'Blur'</span> or <span class="codeInline">'Bevel'</span>)
<p class="textBold">Example:</p></td>
</tr>
<tr>
<td>
<div class="container">
<ul class="tabs">
<li><a href="#tab5">XML</a></li>
<li><a href="#tab6">JSON</a></li>
</ul>
<div class="tab_container">
<div id="tab5" class="tab_content">
<pre class="prettyprint code_container"><style name='MyFirstFontStyle' <strong>type='font'</strong> face='Verdana' .../>
<style name='MyFirstAnimationStyle' <strong>type='animation'</strong> .../>
<style name='MyFirstShadow' <strong>type='Shadow'</strong> .../></pre></div>
<div id="tab6" class="tab_content">
<pre id="pre-datajson2" class="prettyprint code_container">"definition":[{ "name":"MyFirstFontStyle", <strong>"type":"font"</strong>, "face":"Verdana", ...},<br> { "name":"MyFirstAnimationStyle", <strong>"type":"animation"</strong>, ...},<br> { "name":"MyFirstShadow",<strong> "type":"Shadow"</strong>, ...}]</pre>
</div>
</div>
</div></td>
</tr>
<tr>
<td><p><span class="text">If you do not define a style type for a particular
style, FusionCharts XT will ignore the style definition and log an error in
the <span class="codeInline">Debug Window.</span></span></p></td>
</tr>
<tr>
<td class="header"><a name="other"></a>Other Attributes</td>
</tr>
<tr>
<td><p class="text">The rest of the attributes for a style element are dependent
on its <span class="codeInline">Type</span>. For example, we can use face,
size, color, bold etc. property for a <span class="codeInline">Font</span>
style type. However, the same is not valid for <span class="codeInline">Animation</span>
style type, as these parameters make no sense for an animation. Each style
type has therefore its own set of attributes which you can specify which
will be discussed next.</p>
<p class="text">Now, if you are already eager to apply the styles to chart
objects, let us get to the application part of the story. </p></td>
</tr>
<tr>
<td class="header"><a name="custom"></a>Applying custom defined styles to chart objects</td>
</tr>
<tr>
<td class="text"><p>To apply your defined styles to chart objects,
you first need to make sure that you have the list of chart objects present
in each chart. This can be found here in the "<strong>Chart XML API</strong>" for each chart.</p>
<p>For example, we have the following chart objects for 2D Single
Series Column Chart:</p></td>
</tr>
<tr>
<td><table width="98%" align="center" cellpadding="0" cellspacing="0" class="table">
<tr class="lightYellowTr">
<td width="15%" valign="top" class="header"> Object Name</td>
<td width="35%" valign="top" class="header"> Description </td>
<td width="25%" valign="top" class="header"> Features Supported </td>
<td width="25%" valign="top" class="header"> Animation Parameters Supported </td>
</tr>
<tr>
<td width="15%" valign="top" class="text"> BACKGROUND </td>
<td width="35%" valign="top" class="text"> BACKGROUND refers to the entire background of the chart. </td>
<td width="25%" valign="top" class="text">
<ul>
<li>Animation</li>
<li>Shadow</li>
<li>Glow</li>
<li>Bevel</li>
<li>Blur</li>
</ul> </td>
<td width="25%" valign="top" class="text">
<ul>
<li>_alpha</li>
<li>_x</li>
<li>_y</li>
<li>_xScale</li>
<li>_yScale</li>
</ul>
</td>
</tr>
<tr class="greyTr" >
<td width="15%" valign="top" class="text"> CANVAS </td>
<td width="35%" valign="top" class="text"> In 2D Charts, CANVAS
refers to the area in which the actual chart is plotted. It is represented
by a bounded rectangle. In 3D charts, it refers to the 3D base on
which the columns are built. </td>
<td width="25%" valign="top" class="text">
<ul>
<li>Animation</li>
<li>Shadow</li>
<li>Glow</li>
<li>Bevel</li>
<li>Blur</li>
</ul>
</td>
<td width="25%" valign="top" class="text">
<ul>
<li>_alpha</li>
<li>_x</li>
<li>_y</li>
<li>_xScale</li>
<li>_yScale</li>
</ul>
</td>
</tr>
<tr>
<td width="15%" valign="top" class="text"> CAPTION </td>
<td width="35%" valign="top" class="text"> CAPTION refers to the heading of the chart. </td>
<td width="25%" valign="top" class="text">
<ul>
<li>Animation</li></LI>
<li>Font</li></LI>
<li>Shadow</li>
<li>Glow</li>
<li>Bevel</li>
<li>Blur</li>
</ul>
</td>
<td width="25%" valign="top" class="text">
<ul>
<li>_alpha</li>
<li>_x</li>
<li>_y</li>
</ul>
</td>
</tr>
<tr class="greyTr" >
<td width="15%" valign="top" class="text"> DATALABELS</td>
<td width="35%" valign="top" class="text"> DATALABELS refer to the x-axis labels of the data. </td>
<td width="25%" valign="top" class="text">
<ul>
<li>Animation</li>
<li>Font</li>
<li>Shadow</li>
<li>Glow</li>
<li>Bevel</li>
<li>Blur</li>
</ul>
</td>
<td width="25%" valign="top" class="text">
<ul>
<li>_alpha</li>
<li>_x</li>
<li>_y</li>
</ul>
</td>
</tr>
<tr>
<td width="15%" valign="top" class="text"> DATAPLOT </td>
<td width="35%" valign="top" class="text"> DATAPLOT refers to
the actual plot of the chart. For example, in Column 2D chart, columns
are referred to as DATAPLOT. In Pie chart, it is the pie slices. In Bubble
chart, it is the bubbles and so on. </td>
<td width="25%" valign="top" class="text">
<ul>
<li>Animation</li>
<li>Shadow</li>
<li>Glow</li>
<li>Bevel</li>
<li>Blur</li>
</ul>
</td>
<td width="25%" valign="top" class="text"> <ul>
<li>_alpha</li>
<li>_x</li>
<li>_y</li>
<li>_xScale</li>
<li>_yScale</li>
</ul>
</td>
</tr>
<tr class="greyTr" >
<td width="15%" valign="top" class="text"> DATAVALUES </td>
<td width="35%" valign="top" class="text"> DATAVALUES refer to
the plot values, that is, value of each data (line, column, bar, pie etc.),
which is displayed beside the data plot. </td>
<td width="25%" valign="top" class="text">
<ul>
<li>Animation</li>
<li>Font</li>
<li>Shadow</li>
<li>Glow</li>
<li>Bevel</li>
<li>Blur</li>
</ul>
</td>
<td width="25%" valign="top" class="text">
<ul>
<li>_alpha</li>
<li>_x</li>
<li>_y</li>
</ul>
</td>
</tr>
<tr>
<td width="15%" valign="top" class="text"> DIVLINES </td>
<td width="35%" valign="top" class="text"> DIVLINES are horizontal
or vertical lines running through the canvas. Each divisional line
signifies a smaller unit of the entire axis thus aiding the users in
interpreting the chart. </td>
<td width="25%" valign="top" class="text">
<ul>
<li>Animation</li>
<li>Shadow</li>
<li>Glow</li>
<li>Bevel</li>
<li>Blur</li>
</ul>
</td>
<td width="25%" valign="top" class="text">
<ul>
<li>_alpha</li>
<li>_y</li>
<li>_yScale</li>
</ul>
</td>
</tr>
<tr class="greyTr" >
<td width="15%" valign="top" class="text"> HGRID </td>
<td width="35%" valign="top" class="text"> HGRID refers to alternate
color bands between two successive horizontal divisional lines. </td>
<td width="25%" valign="top" class="text">
<ul>
<li>Animation</li>
<li>Shadow</li>
<li>Glow</li>
<li>Bevel</li>
<li>Blur</li>
</ul>
</td>
<td width="25%" valign="top" class="text">
<ul>
<li>_alpha</li>
<li>_y</li>
<li>_xScale</li>
<li>_yScale</li>
</ul>
</td>
</tr>
<tr>
<td width="15%" valign="top" class="text"> SUBCAPTION </td>
<td width="35%" valign="top" class="text"> SUBCAPTION refers
to the sub-heading of the chart. </td>
<td width="25%" valign="top" class="text">
<ul>
<li>Animation</li>
<li>Font</li>
<li>Shadow</li>
<li>Glow</li>
<li>Bevel</li>
<li>Blur</li>
</ul>
</td>
<td width="25%" valign="top" class="text">
<ul>
<li>_alpha</li>
<li>_x</li>
<li>_y</li>
</ul>
</td>
</tr>
<tr class="greyTr" >
<td width="15%" valign="top" class="text"> TOOLTIP </td>
<td width="35%" valign="top" class="text"> TOOLTIP refers to
the ToolTip shown when the mouse pointer is hovered over the dataplots. </td>
<td width="25%" valign="top" class="text"> <ul><li>Font</li></ul>
</td>
<td width="25%" valign="top" class="text"> </td>
</tr>
<tr>
<td width="15%" valign="top" class="text"> TRENDLINES </td>
<td width="35%" valign="top" class="text"> TRENDLINES refer to
horizontal or vertical lines spanning the chart canvas which aid in interpretation
of data with respect to some pre-determined value. </td>
<td width="25%" valign="top" class="text"> <ul>
<li>Animation</li>
<li>Shadow</li>
<li>Glow</li>
<li>Bevel</li>
<li>Blur</li>
</ul>
</td>
<td width="25%" valign="top" class="text"><ul>
<li>_alpha</li>
<li>_y</li>
<li>_xScale</li>
<li>_yScale</li>
</ul>
</td>
</tr>
<tr class="greyTr" >
<td width="15%" valign="top" class="text"> TRENDVALUES </td>
<td width="35%" valign="top" class="text"> TRENDVALUES refer
to the display values of trend lines (if any). </td>
<td width="25%" valign="top" class="text">
<ul>
<li>Animation</li>
<li>Font</li>
<li>Shadow</li>
<li>Glow</li>
<li>Bevel</li>
<li>Blur</li>
</ul>
</td>
<td width="25%" valign="top" class="text"><ul>
<li>_alpha</li>
<li>_x</li>
<li>_y</li>
</ul>
</td>
</tr>
<tr>
<td width="15%" valign="top" class="text"> VLINES </td>
<td width="35%" valign="top" class="text"> VLINES are vertical
separator lines that help you separate blocks of data. These lines
run through the height of the chart, thereby segregating data into
different blocks. In case of bar charts, they are horizontal and run
through the width of chart. </td>
<td width="25%" valign="top" class="text"><ul>
<li>Animation</li>
<li>Shadow</li>
<li>Glow</li>
<li>Bevel</li>
<li>Blur</li>
</ul>
</td>
<td width="25%" valign="top" class="text"> <ul>
<li>_alpha</li>
<li>_x</li>
<li>_y</li>
<li>_yScale</li>
</ul>
</td>
</tr>
<tr class="greyTr" >
<td width="15%" valign="top" class="text"> XAXISNAME </td>
<td width="35%" valign="top" class="text"> XAXISNAME refers to
the x-axis title of the chart. </td>
<td width="25%" valign="top" class="text"> <ul>
<li>Animation</li>
<li>Font</li>
<li>Shadow</li>
<li>Glow</li>
<li>Bevel</li>
<li>Blur</li>
</ul>
</td>
<td width="25%" valign="top" class="text"> <ul>
<li>_alpha</li>
<li>_x</li>
<li>_y</li>
</ul>
</td>
</tr>
<tr>
<td width="15%" valign="top" class="text"> YAXISNAME </td>
<td width="35%" valign="top" class="text"> YAXISNAME refers to
the y-axis title of the chart. </td>
<td width="25%" valign="top" class="text"> <ul>
<li>Animation</li>
<li>Font</li>
<li>Shadow</li>
<li>Glow</li>
<li>Bevel</li>
<li>Blur</li>
</ul>
</td>
<td width="25%" valign="top" class="text"> <ul>
<li>_alpha</li>
<li>_x</li>
<li>_y</li>
</ul>
</td>
</tr>
<tr class="greyTr" >
<td width="15%" valign="top" class="text"> YAXISVALUES </td>
<td width="35%" valign="top" class="text"> YAXISVALUES refers
to the limit values or divisional line values, which are displayed
along the y-axis of the chart. </td>
<td width="25%" valign="top" class="text"> <ul>
<li>Animation</li>
<li>Font</li>
<li>Shadow</li>
<li>Glow</li>
<li>Bevel</li>
<li>Blur</li>
</ul>
</td>
<td width="25%" valign="top" class="text"><ul>
<li>_alpha</li>
<li>_x</li>
<li>_y</li>
<li>_rotation</li>
</ul>
</td>
</tr>
</table></td>
</tr>
<tr>
<td><p class="highlightBlock">Each chart has a different list of Objects.
So, you need to ensure that you are working with the right Object name
for the given chart.</p>
<p class="text"><span class="text">Now, the following </span><span class="codeInline">XML/JSON
</span><span class="text">does the work of applying styles to different
chart objects:</span></p>
</td>
</tr>
<tr>
<td>
<div class="container">
<ul class="tabs">
<li><a href="#tab7">XML</a></li>
<li><a href="#tab8">JSON</a></li>
</ul>
<div class="tab_container">
<div id="tab7" class="tab_content">
<pre class="prettyprint code_container"><application>
<apply toObject='Caption' styles='MyFirstFontStyle,MyFirstShadow' />
<apply toObject='Canvas' styles='MyFirstAnimationStyle' />
<apply toObject='DataPlot' styles='MyFirstShadow' />
</application> </pre></div>
<div id="tab8" class="tab_content">
<pre id="pre-datajson3" class="prettyprint code_container">"application":[{ "toobject":"Caption", "styles":"MyFirstFontStyle,MyFirstShadow" },<br> { "toobject":"Canvas", "styles":"MyFirstAnimationStyle" },<br> { "toobject":"DataPlot", "styles":"MyFirstShadow" }]</pre>
</div></div></div></td>
</tr>
<tr>
<td class="text"><p>Each<span class="codeInline"> <apply> </span>element
helps to apply multiple styles to one chart object for example, in our code,
we first apply the <span class="codeInline">MyFirstFontStyle</span> font
style to <span class="codeInline">Caption</span> of the chart and then
apply the shadow style <span class="codeInline">MyFirstShadow</span> to
the same object. To apply multiple styles, we separate the names of the
respective styles by a comma.</p>
<p><strong>Format:</strong></p>
<span class="codeInline"><apply toObject='Object' styles='Style1, Style2, Style3 ...' /></span>
<p><a name="important"></a>You need to make sure of few things here:</p>
<ul>
<li><p>To apply multiple styles to a chart object, you need
to separate the style names using comma.</p>
<p><strong> Example:</strong></p>
<div class="container" style="overflow:hidden;">
<ul class="tabs">
<li><a href="#tab13">XML</a></li>
<li><a href="#tab14">JSON</a></li>
</ul>
<div class="tab_container">
<div id="tab13" class="tab_content">
<pre class="prettyprint code_container"><apply toObject='Caption' styles='<strong>MyFirstFontStyle,MyFirstShadow</strong>' /></pre></div>
<div id="tab14" class="tab_content">
<pre id="pre-datajson6" class="prettyprint code_container">"application":[{ "toobject":"Caption", "styles":<strong>"MyFirstFontStyle,MyFirstShadow"</strong> }]</pre>
</div>
</div>
</div>
</li>
<li>
<p>To apply a single style to multiple objects, you will need
to define<span class="codeInline"> <apply></span> element for
each object and then assign the style for it.</p>
<p><strong> Example:</strong></p>
<div class="container" style="overflow: hidden;">
<ul class="tabs">
<li><a href="#tab9">XML</a></li>
<li><a href="#tab10">JSON</a></li>
</ul>
<div class="tab_container">
<div id="tab9" class="tab_content">
<pre class="prettyprint code_container">
<apply toObject='Caption' styles='<strong>MyFirstShadow'</strong> />
<apply toObject='DataPlot' styles=<strong>'MyFirstShadow</strong>' /></pre></div>
<div id="tab10" class="tab_content">
<pre id="pre-datajson4" class="prettyprint code_container">"application":[{ "toobject":"Caption", "styles":<strong>"MyFirstShadow"</strong> },<br> { "toobject":"DataPlot", "styles":<strong>"MyFirstShadow"</strong> }]</pre>
</div>
</div>
</div>
<p>You <strong>cannot</strong> separate the object list by comma and then assign a single style to it - the following will be invalid:</p>
<div class="container" style="overflow:hidden;">
<ul class="tabs">
<li><a href="#tab11">XML</a></li>
<li><a href="#tab12">JSON</a></li>
</ul>
<div class="tab_container">
<div id="tab11" class="tab_content">
<pre class="prettyprint code_container"><s><apply toObject='Caption,DataPlot' styles='MyFirstShadow' /></s></pre></div>
<div id="tab12" class="tab_content">
<pre id="pre-datajson5" class="prettyprint code_container"><s>"apply":[{ "toobject":"Caption","DataPlot", "styles":"MyFirstShadow" }]</s></pre>
</div></div></div>
</li>
<li>
<p>The style name specified during application has been
defined earlier in style definition and the spelling is correct, else,
FusionCharts XT will ignore it and log the error in <span class="codeInline">Debug
Window.</span></p>
</li> </ul>
<p>And now that you are familiar with style definition and
application, we move on to see the list of parameters supported by each
style type. We start with <span class="codeInline">Font</span> style next.</p></td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("Styles Overview|Styles.html","Font Style type|Font.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>