|
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/ |
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>Highlighting Selective Data </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", "Highlighting selective data" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">Highlighting Selective Data </td>
</tr>
<tr>
<td valign="top" class="text"><p>FusionCharts XT provides various options when trying to highlight selective data. Here, we will be discussing some of them, including:</p>
<ul>
<li><a href="#alpha">Highlighting a dataset by changing its alpha</a></li>
<li><a href="#dashed">Using dashed border to highlight data</a> </li>
<li><a href="#anchor">Using individual anchor properties on a line or area chart to highlight a data</a></li>
<li><a href="#color">Using individual color properties on a Multi-series chart to highlight a single data</a></li>
</ul>
<p>Let us see all of the above one by one. </p></td>
</tr>
<tr>
<td valign="top" class="header"><a name="alpha" id="alpha"></a>Highlighting a dataset by changing its alpha</td>
</tr>
<tr>
<td valign="top" class="text"><p>Highlighting data by altering its alpha is one of the simplest methods. Consider the XML below: </p></td>
</tr>
<tr>
<td valign="top"><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>
<set label='John' value='420' />
<set label='Mary' value='295' <strong>alpha='50'</strong>/>
<set label='Tom' value='523' />
</chart></pre></div>
<div id="tab2" class="tab_content">
<pre id="pre-datajson" class="prettyprint code_container">{<br /> "chart":{},<br /> "data":[{<br /> "label":"John",<br /> "value":"420"<br /> },<br /> {<br /> "label":"Mary",<br /> "value":"295",<br /> <strong>"alpha":"50"</strong><br /> },<br /> {<br /> "label":"Tom",<br /> "value":"523"<br /> }<br /> ]<br />}</pre>
</div></div></div></td>
</tr>
<tr>
<td valign="top" class="text"><p>Here, we have set the <span class="codeInline">alpha</span> of second column to 50 (on a scale of 0-100). Now, when you see this chart, you will see that the middle column is semi-transparent making it the visual focus point.</p></td>
</tr>
<tr>
<td valign="top" class="text"><img src="Images/Hl_Alpha.jpg" width="358" height="213" /><br /><br /></td>
</tr>
<tr>
<td valign="top" class="header"><a name="dashed" id="dashed"></a>Using dashed border to highlight data </td>
</tr>
<tr>
<td valign="top" class="text"><p>You can also highlight a data by setting it as dashed. Consider the XML below:</p> </td>
</tr>
<tr>
<td 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"><chart>
<set label='John' value='420' />
<set label='Mary' value='295' <strong>dashed='1'</strong>/>
<set label='Tom' value='523' />
</chart></pre></div>
<div id="tab4" class="tab_content">
<pre id="pre-datajson2" class="prettyprint code_container">{<br /> "chart":{},<br /> "data":[{<br /> "label":"John",<br /> "value":"420"<br /> },<br /> {<br /> "label":"Mary",<br /> "value":"295",<br /> <strong>"dashed":"1"</strong><br /> },<br /> {<br /> "label":"Tom",<br /> "value":"523"<br /> }<br /> ]<br />}</pre>
</div></div></div></td>
</tr>
<tr><td height="25"></td></tr>
<tr>
<td valign="top" class="text"><table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50%" valign="top"><div align="center"><img src="Images/Hlt_Dashed1.jpg" width="285" height="186" class="imageBorder" /></div></td>
<td valign="top"><div align="center"><img src="Images/Hlt_Dashed2.jpg" class="imageBorder" /></div></td>
</tr>
<tr>
<td width="50%" valign="top"><div align="center" class="imageCaption">When applied on a Column chart </div></td>
<td valign="top"><div align="center"><span class="imageCaption">When applied on a Line chart </span></div></td>
</tr>
</table></td>
</tr>
<tr>
<td height="25"></td>
</tr>
<tr>
<td valign="top" class="header"><a name="anchor" id="anchor"></a>Using individual anchor properties on a line/area chart to highlight a data </td>
</tr>
<tr>
<td valign="top" class="text"><p>FusionCharts XT allows you to set individual <span class="codeInline"><set></span> level anchor properties too. Consider the following XML: </p></td>
</tr>
<tr>
<td valign="top"><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'>
<set label='John' value='420' />
<set label='Mary' value='295' />
<set label='Tom' value='523' <strong>anchorRadius='6' anchorSides='4' anchorBorderColor='0372AB' anchorBgColor='E1f5ff'</strong>/>
<set label='Hary' value='323' />
</chart></pre></div>
<div id="tab6" class="tab_content">
<pre id="pre-datajson3" class="prettyprint code_container">{<br /> "chart":{<br /> "showvalues":"0"<br /> },<br /> "data":[{<br /> "label":"John",<br /> "value":"420"<br /> },<br /> {<br /> "label":"Mary",<br /> "value":"295"<br /> },<br /> {<br /> "label":"Tom",<br /> "value":"523",<br /> <strong>"anchorradius":"6",<br /> "anchorsides":"4",<br /> "anchorbordercolor":"0372AB",<br /> "anchorbgcolor":"E1f5ff"</strong><br /> },<br /> {<br /> "label":"Hary",<br /> "value":"323"<br /> }<br /> ]<br />}</pre>
</div></div></div> </td>
</tr>
<tr>
<td valign="top" class="text"><p>The above XML gives the following output on a Line chart:</p> </td>
</tr>
<tr>
<td valign="top" class="text"><img src="Images/Hlt_Anchor.jpg" alt="" /></td>
</tr>
<tr>
<td valign="top" class="text"><p>You can clearly see the highlighted anchor on the chart.</p> </td>
</tr>
<tr>
<td valign="top" class="header"><a name="color" id="color"></a>Using individual color properties on a Multi-series chart to highlight a single data</td>
</tr>
<tr>
<td valign="top" class="text"><p>FusionCharts XT also allows you to specify<span class="codeInline"> <set></span> level color in a Multi-series chart. Consider the XML below: </p></td>
</tr>
<tr>
<td valign="top"><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" style="width:100%;height:450px; overflow:auto;">
<div id="tab7" class="tab_content">
<pre class="prettyprint code_container"><chart>
<categories>
<category label="Product A" />
<category label="Product B" />
</categories>
<dataset SeriesName="2005">
<set value="324" />
<set value="457" />
</dataset>
<dataset SeriesName="2006">
<set value="456" />
<set value="787" <strong>color='FF5904'</strong>/>
</dataset>
<dataset SeriesName="2007">
<set value="557" />
<set value="767" />
</dataset>
</chart></pre></div>
<div id="tab8" class="tab_content">
<pre id="pre-datajson4" class="prettyprint code_container">{<br /> "chart":{},<br /> "categories":[{<br /> "category":[{<br /> "label":"Product A"<br /> },<br /> {<br /> "label":"Product B"<br /> }<br /> ]<br /> }<br /> ],<br /> "dataset":[{<br /> "seriesname":"2005",<br /> "data":[{<br /> "value":"324"<br /> },<br /> {<br /> "value":"457"<br /> }<br /> ]<br /> },<br /> {<br /> "seriesname":"2006",<br /> "data":[{<br /> "value":"456"<br /> },<br /> {<br /> "value":"787",<br /> <strong>"color":"FF5904"</strong><br /> }<br /> ]<br /> },<br /> {<br /> "seriesname":"2007",<br /> "data":[{<br /> "value":"557"<br /> },<br /> {<br /> "value":"767"<br /> }<br /> ]<br /> }<br /> ]<br />}</pre>
</div></div></div></td>
</tr>
<tr>
<td valign="top" class="text"><p>In the above code, we have a Multi-series XML. We are highlighting a single <span class="codeInline"><set></span> by setting its color explicitly. When you now see this chart, you will get the following output: </p></td>
</tr>
<tr>
<td valign="top" class="text"><img src="Images/Hlt_Color.jpg" /></td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("Plotting discontinuos data|DiscData.html","Showing long data labels|Adv_DataLabels.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>