|
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>Font Style Type Parameters</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", "Font Style type" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center" >
<tr>
<td class="pageHeader">Font Style Type Parameters</td>
</tr>
<tr>
<td class="text"><p>As you already know, using the<span class="codeInline">
font </span>style type, you can control the visual properties of all the
text on the chart. The following properties are extended by the<span class="codeInline">
font</span> type.</p>
<img src="Images/Styles/style_17.jpg"/>
<p>See it <a href="../../Code/Styles/font.html" target="_blank">live</a>!</p>
<p>Detailed explanations with code samples follow:</p></td>
</tr>
<tr>
<td><table width="85%" border="0" class="table" cellpadding="0" cellspacing="0">
<tr>
<td width="15%" valign="top" class="header">Attribute</td>
<td width="50%" valign="top" class="header">Brief
Description</td>
<td width="20%" valign="top" class="header">Sample
or Valid values</td>
</tr>
<tr>
<td valign="top" class="codeInline">font</td>
<td valign="top" class="text">Sets
the font family for the text</td>
<td valign="top" class="text">Verdana,
Arial .. </td>
</tr>
<tr>
<td valign="top" class="codeInline">size</td>
<td valign="top" class="text">Specifies
the font size</td>
<td valign="top" class="text">10,
12 .. </td>
</tr>
<tr>
<td valign="top" class="codeInline">color</td>
<td valign="top" class="text">Sets
the font color, should be hex color code without #</td>
<td valign="top" class="text">FF0000,
FFFFDD </td>
</tr>
<tr>
<td valign="top" class="codeInline">align</td>
<td valign="top" class="text">Sets the alignment of the chart caption or sub-caption. This attribute is only applicable to chart captions and sub captions. The default value is center </td>
<td valign="top" class="text">left, right, center</td>
</tr>
<tr>
<td valign="top" class="codeInline">bold</td>
<td valign="top" class="text">Flag
indicating whether font should be bold or not</td>
<td valign="top" class="text"><strong>1</strong>
for Yes, <strong>0</strong> for No</td>
</tr>
<tr>
<td valign="top" class="codeInline">italic</td>
<td valign="top" class="text">Flag
indicating whether font should be italicized or not</td>
<td valign="top" class="text"><strong>1</strong>
for Yes, <strong>0</strong> for No</td>
</tr>
<tr>
<td valign="top" class="codeInline">underline</td>
<td valign="top" class="text">Flag
indicating whether font should be underlined</td>
<td valign="top" class="text"><strong>1</strong>
for Yes, <strong>0</strong> for No</td>
</tr>
<tr>
<td valign="top" class="codeInline">bgColor</td>
<td valign="top" class="text">Sets
the background color for a text box, should be hex color code without
#</td>
<td valign="top" class="text">FF0000,
FFFFDD </td>
</tr>
<tr>
<td valign="top" class="codeInline">borderColor</td>
<td valign="top" class="text">If
you need a border around your text, you can use this parameter</td>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="codeInline">isHTML</td>
<td valign="top" class="text">Helps
you set whether the text should be rendered as HTML or plain text</td>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="codeInline">leftMargin</td>
<td valign="top" class="text">The
left margin of the text, in points</td>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="codeInline">letterSpacing</td>
<td valign="top" class="text">The
amount of space that is uniformly distributed between characters
of the text</td>
<td valign="top" class="text"> </td>
</tr>
</table><br/></td>
</tr>
<tr>
<td class="highlightBlock">Note: In JavaScript charts, only <span class="codeInline">font</span>, <span class="codeInline">color</span>, <span class="codeInline">size</span>, <span class="codeInline">bold</span> and <span class="codeInline">italic</span> attributes are supported. Support for rest of the attributes is browser specific. </td>
</tr>
<tr>
<td height="25"></td>
</tr>
<tr>
<td class="header"><a name="family"></a><a name="size" id="size"></a><a name="color"></a>Font family,
size & color</td>
</tr>
<tr>
<td class="text"><p>The basic attributes of the font are its<span class="codeInline"> font</span> family, <span class="codeInline">size</span> and <span class="codeInline">color</span> which can be set using the aforementioned attributes.</p>
<p><strong>Example:</strong></p>
<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"><style name='MyFirstFontStyle' type='font' font='Verdana' size='12' color='FF0000' /></pre>
</div>
<div id="tab2" class="tab_content">
<pre id="pre-datajson2" class="prettyprint code_container">"definition":[{ "name":"MyFirstFontStyle", "type":"font", "font":"Verdana", "size":"12", "color":"FF0000" }]<br></pre>
</div></div></div>
</td>
</tr>
<tr>
<td height="25"></td>
</tr>
<tr>
<td><table border="0" class="table" cellpadding="0" cellspacing="0" width="60%">
<tr>
<td width="11%" valign="top" class="header">Attribute</td>
<td width="23%" valign="top" class="header">Format</td>
<td width="26%" valign="top" class="header">Example</td>
</tr>
<tr>
<td valign="top" class="codeInline">font</td>
<td valign="top" class="codeInline">font=<span class="codeInline">'fontfamily'
</span></td>
<td valign="top" class="codeInline">font=<span class="codeInline">'Verdana'
</span></td>
</tr>
<tr>
<td valign="top" class="codeInline">size</td>
<td valign="top" class="codeInline">size=<span class="codeInline">'fontsize'
</span></td>
<td valign="top" class="codeInline">size=<span class="codeInline">'12'
</span></td>
</tr>
<tr>
<td valign="top" class="codeInline">color</td>
<td valign="top" class="codeInline">color=<span class="codeInline">'HexCode
(without #)'</span></td>
<td valign="top" class="codeInline">color=<span class="codeInline">'FF0000'</span></td>
</tr>
</table></td>
</tr>
<tr>
<td><p class="text">Here,<span class="codeInline"> font</span> should refer
to a font family which is present on the end users system (else the default
system font will be used to draw text). Color should be in <span class="codeInline">Hex
code</span> without any<span class="codeInline"> #</span>.</p></td>
</tr>
<tr>
<td class="header"><a name="align"></a>align</td>
</tr>
<tr>
<td class="text">
<p>Text align setting is only allowed in chart's caption and sub-caption Objects. You can use either "right" or "left" as alignment value. By default, the value is "center". An example can be: </p>
<div class="container" style="overflow:hidden;">
<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 name='MyCaptionFontStyle' type='font' font='Verdana' size='22' <strong>align ="left"</strong> /></pre></div>
<div id="tab4" class="tab_content">
<pre id="pre-datajson" class="prettyprint code_container">"definition":[{ "name":"MyCaptionFontStyle", "type":"font", "font":"Verdana", "size":"22",<strong> "align":"left" </strong>}]<br></pre>
</div>
</div>
</div>
<p>And the resultant chart caption will be like the image as under:</p>
<p><img src="Images/Styles/style_2.2.jpg" width="570" height="90" class="imageBorder" /></p>
</td>
</tr>
<tr><td height="10"></td></tr>
<tr>
<td class="header"><a name="bold"></a><a name="italic" id="italic"></a><a name="underline"></a>bold, italic
& underline</td>
</tr>
<tr>
<td class="text"><p>To decorate your text, you can use any of the above parameters as under:</p>
<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' type='font' font='Verdana' size='12' color='FF0000' <strong>bold='1' italic='1' underline='1' /></strong></pre></div>
<div id="tab6" class="tab_content">
<pre id="pre-datajson3" class="prettyprint code_container">"definition":[{ "name":"MyFirstFontStyle", "type":"font", "font":"Verdana", "size":"12",
"color":"FF0000", <strong>"bold":"1"</strong>, <strong>"italic":"1"</strong>, <strong>"underline":"1" </strong>}]</pre>
</div></div></div></td>
</tr>
<tr><td height="25"></td></tr>
<tr>
<td><table border="0" cellpadding="0" cellspacing="0" class="table" width="60%">
<tr>
<td width="11%" valign="top" class="header">Attribute</td>
<td width="23%" valign="top" class="header">Format</td>
<td width="26%" valign="top" class="header">Example</td>
</tr>
<tr>
<td valign="top" class="codeInline">bold</td>
<td valign="top" class="codeInline">bold=<span class="codeInline">'Logicalvalue'
</span></td>
<td valign="top" class="codeInline">bold=<span class="codeInline">'1'</span>
or bold=<span class="codeInline">'0' </span></td>
</tr>
<tr>
<td valign="top" class="codeInline">italic</td>
<td valign="top" class="codeInline">italic=<span class="codeInline">'Logicalvalue'
</span></td>
<td valign="top" class="codeInline">italic=<span class="codeInline">'1'</span>
italic=<span class="codeInline">'0' </span></td>
</tr>
<tr>
<td valign="top" class="codeInline">underline </td>
<td valign="top" class="codeInline">underline=<span class="codeInline">'Logicalvalue'
</span></td>
<td valign="top" class="codeInline">underline=<span class="codeInline">'1'</span>
or underline=<span class="codeInline">'0'</span></td>
</tr>
</table></td>
</tr>
<tr>
<td><p class="text">The above code will make sure that your font appears as
<span class="codeInline">bold</span>, <span class="codeInline">italicized</span> and <span class="codeInline">underlined.</span></p></td>
</tr>
<tr>
<td class="header"><a name="bgcolor"></a><a name="bordercolor"></a>bgColor and borderColor </td>
</tr>
<tr>
<td class="text"><p>If you intend to put a <span class="codeInline">border
color </span>or a<span class="codeInline"> background
color</span> for your text boxes on the chart, you can
use the above two parameters to define hex color code (without <span class="codeInline">#</span>) as under:</p>
<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"><style name='MyFirstFontStyle' type='font' font='Verdana' size='9' bold='1' color='1F1F1F' <strong>bgColor='99E3BB' borderColor='E10000'</strong> /></pre></div>
<div id="tab8" class="tab_content">
<pre id="pre-datajson4" class="prettyprint code_container">"definition":[{ "name":"MyFirstFontStyle", "type":"font", "font":"Verdana", "size":"9", "bold":"1", "color":"1F1F1F", <strong>"bgcolor":"99E3BB"</strong>,
<strong>"bordercolor":"E10000"</strong> }]</pre>
</div>
</div>
</div></td>
</tr>
<tr><td height="25"></td></tr>
<tr>
<td><table border="0" class="table" cellpadding="0" cellspacing="0" width="60%">
<tr>
<td width="11%" valign="top" class="header">Attribute</td>
<td width="23%" valign="top" class="header">Format</td>
<td width="26%" valign="top" class="header">Example</td>
</tr>
<tr>
<td valign="top" class="codeInline">bgColor</td>
<td valign="top" class="codeInline">bgColor='value' </td>
<td valign="top" class="codeInline">bgColor='99E3BB' </td>
</tr>
<tr>
<td valign="top" class="codeInline">borderColor</td>
<td valign="top" class="codeInline">borderColor='value' </td>
<td valign="top" class="codeInline">borderColor='E10000' </td>
</tr>
</table></td>
</tr>
<tr>
<td><p class="text">This style when applied to a text field on chart (for example,
caption), will give an output as under:</p></td>
</tr>
<tr>
<td><table width="95%" border="0" cellspacing="0" cellpadding="2">
<tr>
<td><img src="Images/Styles/style_1.jpg" class="imageBorder" /></td>
</tr>
</table>
<table width="95%" border="0" cellspacing="0" cellpadding="2">
<tr>
<td><p class="imageCaption">Chart caption ("Products Per Category")
with border and background color applied to it.</p></td>
</tr>
</table></td>
</tr>
<tr>
<td class="header"><a name="ishtml"></a>isHTML</td>
</tr>
<tr>
<td class="text">
<p>This attribute is particularly useful, when you have <span class="codeInline">HTML</span>
characters as a part of your text.</p>
</td>
</tr>
<tr>
<td class="text">And the style type will be defined as:</td>
</tr>
<tr>
<td class="text"><br>
<div class="container">
<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"><style name='LabelFont' type='font' font='Arial' size='10' <strong>isHTML='1' </strong>/></pre>
</div>
<div id="tab10" class="tab_content">
<pre id="pre-datajson5" class="prettyprint code_container">"definition":[{ "name":"LabelFont", "type":"font", "font":"Arial", "size":"10",<strong> "ishtml":"1"</strong> }]</pre>
</div>
</div>
</div></td>
</tr>
<tr><td height="25"></td></tr>
<tr>
<td class="text"><table border="0" cellpadding="0" cellspacing="0" class="table" width="60%">
<tr>
<td width="11%" valign="top" class="header">Attribute</td>
<td width="23%" valign="top" class="header">Format</td>
<td width="26%" valign="top" class="header">Example</td>
</tr>
<tr>
<td valign="top" class="codeInline">isHTML</td>
<td valign="top" class="codeInline">isHTML ='Logicalvalue' </td>
<td valign="top" class="codeInline">isHTML ='1' or isHTML ='0' </td>
</tr>
</table></td>
</tr>
<tr><td height="25"></td></tr>
<tr>
<td class="header"><a name="leftmargin"></a><a name="letterspacing"></a>leftMargin
and letterSpacing</td>
</tr>
<tr>
<td class="text"><p><span class="codeInline">leftMargin </span>lets you set
the left margin of the text (in points) and<span class="codeInline"> letterSpacing
</span>allows you to control the space that is uniformly distributed between
characters - the value specifies the number of pixels that are added to
the space after each character. A negative value condenses the space between
characters. </p></td>
</tr>
<tr>
<td class="text"><strong>Example:</strong></td></tr>
<tr><td class="text"><br>
<div class="container">
<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"><style name='MyFirstFontStyle' type='font' font='Verdana' size='9' bold='1' color='1F1F1F' bgColor='99E3BB' borderColor='E10000' <strong>leftMargin='10' letterSpacing='3'</strong>/></pre></div>
<div id="tab12" class="tab_content">
<pre id="pre-datajson6" class="prettyprint code_container">"definition":[{ "name":"MyFirstFontStyle", "type":"font", "font":"Verdana", "size":"9", "bold":"1", "color":"1F1F1F", "bgcolor":"99E3BB",
"bordercolor":"E10000", <strong>"leftmargin":"10"</strong>, <strong>"letterspacing":"3"</strong> }]</pre>
</div>
</div>
</div>
<br></td>
</tr>
<tr><td height="25"></td></tr>
<tr>
<td class="text"><table border="0" cellpadding="0" cellspacing="0" class="table" width="60%">
<tr>
<td width="11%" valign="top" class="header">Attribute</td>
<td width="23%" valign="top" class="header">Format</td>
<td width="26%" valign="top" class="header">Example</td>
</tr>
<tr>
<td valign="top" class="codeInline">leftMargin </td>
<td valign="top" class="codeInline">leftMargin=<span class="codeInline">'value
in pixels' </span></td>
<td valign="top" class="codeInline">leftMargin=<span class="codeInline">'10'
</span></td>
</tr>
<tr>
<td valign="top" class="codeInline">letterSpacing </td>
<td valign="top" class="codeInline">letterSpacing=<span class="codeInline">'value
in pixels' </span></td>
<td valign="top" class="codeInline">letterSpacing=<span class="codeInline">'3'
</span></td>
</tr>
</table></td>
</tr>
<tr>
<td class="text"><p>The above style when applied to chart caption, gives the following output:</p>
<p> <img src="Images/Styles/style_2.jpg" class="imageBorder" /></p>
</td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("How to use?|HowToUse.html","Animation Style type|Animation.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>