|
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/advanced/special-chars/ |
Upload File : |
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Using Special Punctuation on Chart</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", "Advanced charting", "Using Special characters", "Using special punctuation" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td balign="top" class="pageHeader">Using Special Punctuation on Chart</td>
</tr>
<tr>
<td valign="top" class="text">
<p>You can directly embed most of the special characters and punctuation marks in the XML/JSON data source of your chart. However, &, <, >, ' (apostrophe) and "(quote) need to be specially encoded when providing the same as a part of the chart data. Apart from this, there is no need to encode any other special character.</p>
<p>In the following sections of this page, we will learn how to use special punctuation marks like - &, <, >, ' (apostrophe) and "(quote).</p> </td>
</tr>
<tr>
<td class="header"><a name="amp" id="amp"></a>Using <span class="codeInline"><strong>&</strong></span> sign</td>
</tr>
<tr>
<td class="text">
<p>To display <span class="codeInline"><strong>&</strong></span> character on a chart, you need to use the encoded form of the character - <span class="codeInline">&amp;</span> in your chart data (XML or JSON). It is applicable in both Data URL and Data String methods. </p>
<p> Following data includes<span class="codeInline"><strong> &</strong></span> character:</p></td>
</tr>
<tr>
<td class="text">
<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 showValues="1" caption="Total Revenue of 2008 <strong>&amp;</strong> 2009" numberPrefix="$" xAxisName="Quarter" yAxisName="Revenue" ><br /> <set value="235000" label="Quarter 1"/><br /> <set value="125100" label="Quarter 2"/><br /> <set value="334200" label="Quarter 3"/><br /> <set value="414500" label="Quarter 4"/><br /></chart></pre>
</div>
<div id="tab2" class="tab_content">
<pre id="pre-datajson" class="prettyprint code_container">{<br /> "chart":{<br /> "showvalues":"1",<br /> "caption":"Total Revenue of 2008 <strong>&amp;</strong> 2009",<br /> "numberprefix":"$",<br /> "xaxisname":"Quarter",<br /> "yaxisname":"Revenue"<br /> },<br /> "data":[{<br /> "value":"235000",<br /> "label":"Quarter 1"<br /> },<br /> {<br /> "value":"125100",<br /> "label":"Quarter 2"<br /> },<br /> {<br /> "value":"334200",<br /> "label":"Quarter 3"<br /> },<br /> {<br /> "value":"414500",<br /> "label":"Quarter 4"<br /> }<br /> ]<br />}</pre>
</div></div></div>
<div style="clear:both"></div></td></tr>
<tr>
<td class="text">
<p>The above data produces a chart with <span class="codeInline"><strong>&</strong></span> in its caption, as under:</p>
<p><img src="Images/SpCharAllAmp.jpg" alt="Using & character in chart" /></p>
<p class="highlightBlock"><strong> When using the HTML embedding method with data provided as embedded string, it is essential to encode <span class="codeInline">&</span> character to<span class="codeInline"> %26.</span></strong></p>
</td>
</tr>
<tr>
<td class="header"><a name="ltgt" id="ltgt"></a>Using <span class="codeInline"><strong><</strong></span> or <span class="codeInline"><strong>></strong></span> sign</td>
</tr>
<tr>
<td class="text">
<p>You cannot directly use <span class="codeInline"><strong><</strong></span> and <span class="codeInline"><strong>></strong></span> characters in FusionCharts XT data as these are invalid characters from XML perspective. To use < and >, you first need to convert them into <span class="codeInline">&lt;</span> and <span class="codeInline">&gt;</span>, respectively. It is applicable in both Data URL and Data String methods. </p>
<p> Following data includes <span class="codeInline"><strong><</strong></span> and <span class="codeInline"><strong>></strong></span> characters:</p> </td>
</tr>
<tr>
<td class="text">
<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"><chart showValues="0" caption="Percentage of Labor Force By Age Group" xAxisName="Age Group" yAxisName="Labor Force"><br /> <set value="13" <strong>label="&lt;20"/></strong><br /> <set value="27" label="21-60"/><br /> <set value="17" <strong>label="&gt;60"/></strong><br /></chart></pre>
</div>
<div id="tab6" class="tab_content">
<pre id="pre-datajson3" class="prettyprint code_container">{<br /> "chart":{<br /> "showvalues":"0",<br /> "caption":"Percentage of Labor Force By Age Group",<br /> "xaxisname":"Age Group",<br /> "yaxisname":"Labor Force"<br /> },<br /> "data":[{<br /> "value":"13",<br /> <strong>"label":"&lt;20"</strong><br /> },<br /> {<br /> "value":"27",<br /> "label":"21-60"<br /> },<br /> {<br /> "value":"17",<br /> <strong>"label":"&gt;60"</strong><br /> }<br /> ]<br />}</pre>
</div></div></div></td></tr>
<tr>
<td class="text">
<p>The above data produces a chart with <span class="codeInline"><strong><</strong></span> and <span class="codeInline"><strong>></strong></span> characters in its data labels:</p>
<p><img src="Images/SpCharAllgtlt.jpg" alt="Using pound character in chart" class="imageBorder" /></p>
<p>Typically, text in FusionCharts XT is rendered in normal mode. But, you can also render the text in limited HTML mode too. In case, you need to use HTML text as part of any label, you will need to customize the chart object using Styles and set <span class="codeInline"><a href="../../Styles/Font.html#ishtml">isHTML</a></span> property to 1 in Font Styles. Also, you need to double encode the < and > characters in this case, or these will be considered as starting and end brackets of HTML tags. Hence, <span class="codeInline">&amp;lt;</span> should be used instead of < and <span class="codeInline">&amp;gt;</span> should be used instead of >. A sample data is shown as below: </p>
<div class="container">
<ul class="tabs">
<li><a href="#tab51">XML</a></li>
<li><a href="#tab61">JSON</a></li>
</ul>
<div class="tab_container">
<div id="tab51" class="tab_content">
<pre class="prettyprint code_container"><chart showValues="0" caption="Percentage of Labor Force By Age Group" xAxisName="Age Group" yAxisName="Labor Force"><br /> <set value="13" label="<strong>&amp;lt;</strong>20"/><br /> <set value="27" label="21-60"/><br /> <set value="17" label="<strong>&amp;gt;</strong>60"/>
<styles>
<definition>
<style name="HTMLMode" type="font" <strong>isHTML="1" </strong>/>
</definition>
<application>
<apply toObject="<strong>DATALABELS</strong>" styles="HTMLMode" />
</application>
</styles>
</chart></pre>
</div>
<div id="tab61" class="tab_content">
<pre id="pre-datajson3" class="prettyprint code_container">{
"chart":{
"showvalues":"0",
"caption":"Percentage of Labor Force By Age Group",
"xaxisname":"Age Group",
"yaxisname":"Labor Force"
},
"data":[
{ "value":"13", "label":"<strong>&amp;lt;</strong>20" },
{ "value":"27", "label":"21-60" },
{ "value":"17", "label":"<strong>&amp;gt;</strong>60" }
],
"styles": {<br /> "definition": [<br /> {<br /> "name": "HTMLMode",<br /> "type": "font",<br /> "ishtml": "1"<br /> }<br /> ],<br /> "application": [<br /> {<br /> "toobject": "DATALABELS",<br /> "styles": "HTMLMode"<br /> }<br /> ]<br /> }
}</pre>
</div>
</div></div><div style="clear:both;"></div>
<p class="highlightBlock"><strong> When using the HTML embedding method with data provided as embedded string, it is essential to encode < and > characters to <span class="codeInline">%26lt;</span> and <span class="codeInline">%26gt;</span> ,respectively. In case, HTML text mode is set on, <span class="codeInline">%26amp;lt;</span> and <span class="codeInline">%26amp;gt</span>; are to be used, respectively. </strong></p></td>
</tr>
<tr>
<td class="header"><a name="apos" id="apos"></a>Using Apostrophe(<span class="codeInline"><strong>'</strong></span>) sign</td>
</tr>
<tr>
<td class="text">
<p>To display <span class="codeInline"><strong>'</strong></span> (apostrophe) character on a chart, it is recommended to encode it as <span class="codeInline">&apos;</span>. It is applicable in both Data URL and Data String methods. </p>
<p>A sample where data includes the <span class="codeInline"><strong>'</strong></span> (apostrophe) character is as shown below: </p></td>
</tr>
<tr>
<td class="text">
<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"><chart showValues="1" xAxisName="Student<strong>&apos;</strong>s Name" yAxisName="Score" >
<set label='John<strong>&apos;</strong>s Score' value='420' />
<set label='Mary<strong>&apos;</strong>s Score' value='295' />
<set label='Tom<strong>&apos;</strong>s Score' value='413' />
<set label='Jack<strong>&apos;</strong>s Score' value='523' />
</chart></pre>
</div>
<div id="tab8" class="tab_content">
<pre id="pre-datajson4" class="prettyprint code_container">{
"chart":{
"showvalues":"1",
"xaxisname":"Student<strong>&apos;</strong>s Name",
"yaxisname":"Score"
},
"data":[{
"label":"John<strong><strong>&apos;</strong></strong>s Score",
"value":"420"
},
{
"label":"Mary<strong>&apos;</strong>s Score",
"value":"295"
},
{
"label":"Tom<strong>&apos;</strong>s Score",
"value":"413"
},
{
"label":"Jack<strong>&apos;</strong>s Score",
"value":"523"
}
]
}</pre>
</div></div></div></td></tr>
<tr>
<td class="text">
<p>The above data produces a chart with <span class="codeInline"><strong>'</strong></span> (apostrophe) in its data labels:</p>
<p><img src="Images/SpCharAllapos.jpg" alt="Using pound character in chart" /></p>
<p class="highlightBlock"><strong> When using the HTML embedding method with data provided as embedded string, it is essential to encode '(apostrophe) character to <span class="codeInline">%26apos;.</span></strong></p></td>
</tr>
<tr>
<td class="header"><a name="quot" id="quot"></a>Using Quote(<span class="codeInline"><strong>"</strong></span>) sign</td>
</tr>
<tr>
<td class="text">
<p>To display the <span class="codeInline"><strong>"</strong></span> (double-quotation or quotes) character on a chart, is recommended to encode it as <span class="codeInline">&quot;</span>. It is applicable in both Data URL and Data String methods. </p>
<p>The following data shows how quotes are used: </p></td>
</tr>
<tr>
<td class="text"></td></tr>
<tr>
<td class="text"><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"><chart showValues="0" caption="Labor Force By Age Group" xAxisName="Age Group" yAxisName="Labor Force">
<set value="27" label="<strong>&quot;</strong>Teenager<strong>&quot;</strong>"/>
<set value="43" label="<strong>&quot;</strong>Adult<strong>&quot;</strong>"/>
</chart></pre>
</div>
<div id="tab12" class="tab_content">
<pre id="pre-datajson6" class="prettyprint code_container">{<br /> "chart":{<br /> "caption":"Labor Force By Age Group",<br /> "xaxisname":"Age Group",<br /> "yaxisname":"Labor Force"<br /> },<br /> "data":[
{ "value":"27", "label":"<strong>&quot;</strong>Teenager<strong>&quot;</strong>" },<br /> { "value":"43", "label":"<strong>&quot;</strong>Adult<strong>&quot;</strong>" },<br /> ]<br />}</pre>
</div>
</div></div>
<p>The above data produces a chart as shown below with quotes in data labels:</p>
<p><img src="Images/SpCharAllquot.jpg" alt="Using pound character in chart" width="300" height="240" /></p>
<p class="highlightBlock"><strong> When using the HTML embedding method with data provided as embedded string, it is essential to encode "(quote) character to<span class="codeInline"> %26quot.</span></strong></p></td>
</tr>
<tr>
<td class="header"><a name="percent" id="percent"></a>Using Percent(<span class="codeInline"><strong>%</strong></span>) sign</td>
</tr>
<tr>
<td class="text"><p>At times, you might also want to include the <span class="codeInline"><strong>%</strong></span> (percent) sign in your chart data. To display<span class="codeInline"> %</span> (percent) sign on a chart, you can simply include it in the XML/JSON data source of the chart. It is applicable in both Data URL and Data String methods. </p>
<p> Following data includes the <span class="codeInline"><strong>%</strong></span> character:</p></td>
</tr>
<tr>
<td class="text"><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"><chart showValues="1" caption="Revenue for 2009" <strong>numberSuffix="%"</strong> xAxisName="Quarter" yAxisName="Revenue" ><br /> <set value="23" label="Quarter 1"/><br /> <set value="14" label="Quarter 2"/><br /> <set value="22" label="Quarter 3"/><br /> <set value="41" label="Quarter 4"/><br /></chart></pre>
</div>
<div id="tab4" class="tab_content">
<pre id="pre-datajson2" class="prettyprint code_container">{<br /> "chart":{<br /> "showvalues":"1",<br /> "caption":"Revenue for 2009",<br /> <strong>"numbersuffix":"%"</strong>,<br /> "xaxisname":"Quarter",<br /> "yaxisname":"Revenue"<br /> },<br /> "data":[{<br /> "value":"23",<br /> "label":"Quarter 1"<br /> },<br /> {<br /> "value":"14",<br /> "label":"Quarter 2"<br /> },<br /> {<br /> "value":"22",<br /> "label":"Quarter 3"<br /> },<br /> {<br /> "value":"41",<br /> "label":"Quarter 4"<br /> }<br /> ]<br />}</pre>
</div>
</div>
</div></td>
</tr>
<tr>
<td class="text"><p>The above data produces a chart with <span class="codeInline"><strong>%</strong></span> suffixed to all numeric values:</p>
<p><img src="Images/SpCharAllprcnt.jpg" alt="Using percent character in chart" class="imageBorder"/></p>
<p class="highlightBlock"> Note that while using the HTML embedding method and Data String, it is essential to encode percent character to<span class="codeInline"> %25.</span></p></td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("Using Currency symbols|SpCharAll.html","Plotting discontinuos data|../DiscData.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>