|
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/AttDesc/ |
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>XML/JSON Attributes for Data Values </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","Quick Chart Configuration|Background.html", "Data values" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">XML/JSON Attributes for Data Values </td>
</tr>
<tr>
<td valign="top" class="text"><p>Data values refer to the plot values i.e., values of each data plot (line, column, bar, pie etc.) displayed beside it.</p> </td>
</tr>
<tr>
<td valign="top" class="text"><img src="../advanced/Images/xAxis_Wrap.jpg" width="309" height="206" /></td>
</tr>
<tr>
<td valign="top" class="text"><p>In the chart shown above, <span class="codeInline">$434</span> or <span class="codeInline"> $376</span> appearing above the column are the data values. By default, the data values are shown. But you can hide them by setting <span class="codeInline"><chart showValues='0'></span>. Even if you hide data values, users can see the value as part of data tool-tip when the cursor is hovered over the data plot.</p>
<p class="header" style="padding: 3px;">Text labels instead of data values </p>
<p class="text">FusionCharts XT also allows you to specify custom string values instead of the numeric data values for each data item. This can be provided as <span class="codeInline">displayValue</span> attribute of <span class="codeInline"><set></span> element as under:</p> </td>
</tr>
<tr>
<td valign="top" 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 yAxisName='Sales Figure' caption='Top 5 Sales Person' numberPrefix='$' useRoundEdges='1' bgColor='FFFFFF,FFFFFF' showBorder='0' baseFontSize='11'>
<set label='Alex' value='25000' />
<set label='Mark' value='35000' />
<set label='David' value='42300' <strong>displayValue='Yearly best, $42.3K'</strong>/>
<set label='Graham' value='35300' />
<set label='John' value='31300' />
</chart></pre></div>
<div id="tab2" class="tab_content"><pre class="prettyprint code_container">{
"chart":{
"yaxisname":"Sales Figure",
"caption":"Top 5 Sales Person",
"numberprefix":"$",
"useroundedges":"1",
"bgcolor":"FFFFFF,FFFFFF",
"showborder":"0",
"basefontsize":"11"
},
"data":[{
"label":"Alex",
"value":"25000"
},
{
"label":"Mark",
"value":"35000"
},
{
"label":"David",
"value":"42300",
<strong>"displayvalue":"Yearly best, $42.3K"</strong>
},
{
"label":"Graham",
"value":"35300"
},
{
"label":"John",
"value":"31300"
}
]
}</pre>
</div>
</div>
</div><div style="clear:both"></div>
<p>This will result in the following. The tool-tip will, however, still show the numerical value (unless a custom tool-text is specified).</p>
<img src="Images/DisplayValue_1.jpg" width="454" height="278" class="imageBorder" />
<p class="header" style="padding: 3px;">Modes for data values </p>
<p class="text">The data values can be displayed on the chart in the following ways: </p>
<ul>
<li>Normal</li>
<li>Rotated</li>
</ul>
<p>In a column chart, you also have the option to place the data values either inside the column or outside it. </p></td>
</tr>
<tr>
<td valign="top" class="header">Rotated data values </td>
</tr>
<tr>
<td valign="top" class="text"><p>By default, FusionCharts XT shows the data values horizontally. But, you can rotate it by setting <span class="codeInline"><chart rotateValues='1'></span>. </p>
<img src="Images/data_values2.jpg" width="137" height="78" border="1" /></td>
</tr>
<tr><td height="25"></td></tr>
<tr>
<td valign="top" class="header">Placing data values inside columns </td>
</tr>
<tr>
<td valign="top" class="text"><p>The data values can be placed inside the columns using <span class="codeInline"><chart placeValuesInside='1'>.</span> It yields the following result. </p>
<img src="Images/data_values4.jpg" width="137" height="82" border="1" />
<p>For better clarity, you can rotate the data values when placing them inside columns - <span class="codeInline"><chart rotateValues='1' placeValuesInside='1'></span></p>
<img src="Images/data_values3.jpg" width="137" height="82" border="1" /></td>
</tr>
<tr><td height="25"></td></tr>
<tr>
<td valign="top" class="header">Showing specific data values </td>
</tr>
<tr>
<td valign="top" class="text"><p>You can opt to show only specific data labels by using <span class="codeInline"><chart showValues='0'> </span>and then setting <span class="codeInline">showValue='1'</span> for the set you want to show the value. A chart having the same looks as under:</p>
<img src="Images/data_values6.jpg" width="300" height="200" />
<p>The XML/JSON going into the same is:</p>
<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 numberPrefix='$' <strong>showValues='0'</strong>>
<set label='Jan 2006' value='434' />
<set label='Feb 2006' value='376' <strong>showValue='1'</strong>/>
<set label='Mar 2006' value='343' />
<set label='Apr 2006' value='234' />
<set label='May 2006' value='356' />
</chart></pre></div>
<div id="tab4" class="tab_content"><pre class="prettyprint code_container">{
"chart":{
"numberprefix":"$",
<strong>"showvalues":"0"</strong>
},
"data":[{
"label":"Jan 2006",
"value":"434"
},
{
"label":"Feb 2006",
"value":"376",
<strong> "showvalue":"1"</strong>
},
{
"label":"Mar 2006",
"value":"343"
},
{
"label":"Apr 2006",
"value":"234"
},
{
"label":"May 2006",
"value":"356"
}
]
}</pre>
</div>
</div>
</div><div style="clear:both"></div>
</td>
</tr>
<tr><td height="25"></td></tr>
<tr>
<td valign="top" class="header">Changing Font Properties </td>
</tr>
<tr>
<td valign="top" class="text"><p><strong>Using a single font property for all the values </strong></p>
<p>If you want to specify a single font property for all the text on the chart, you can use the <span class="codeInline">baseFont</span> attribute group. </p>
<p>The following attributes are a part of this group: </p>
</td>
</tr>
<tr>
<td valign="top" class="text"><table width="98%" border="0" class="table" cellpadding="0" cellspacing="0">
<tr>
<td width="20%" valign="top" class="header">Attribute Name</td>
<td width="58%" valign="top" class="header">Description</td>
<td width="20%" valign="top" class="header">Example</td>
</tr>
<tr>
<td valign="top" bordercolor="f1f1f1" class="codeInline">baseFont</td>
<td valign="top" bordercolor="f1f1f1"><span class="text">Lets you define the font family e.g., Arial, Verdana etc</span></td>
<td valign="top" bordercolor="f1f1f1" class="codeInline"><span class="codeInline">baseFont</span>='Verdana'</td>
</tr>
<tr>
<td valign="top" bordercolor="f1f1f1" class="codeInline"><span class="text"><span class="codeInline">baseFontSize</span></span></td>
<td valign="top" bordercolor="f1f1f1"><span class="text">Lets you define the font size (8-72)</span></td>
<td valign="top" bordercolor="f1f1f1" class="codeInline"><span class="codeInline">baseFontSize</span>='10' </td>
</tr>
<tr>
<td valign="top" bordercolor="f1f1f1" class="codeInline"><span class="codeInline">baseFontColor</span></td>
<td valign="top" bordercolor="f1f1f1"><span class="text"> Lets you define the font color. Use hex code for the color without #. E.g., 000000 or 009933 or 999999 </span></td>
<td valign="top" bordercolor="f1f1f1" class="codeInline"><span class="codeInline">baseFontColor='009933'</span></td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" class="text"><p><strong>Example : </strong></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"><chart caption='Quarterly Sales Summary' subcaption='Figures in $' xAxis='Quarter' yAxisName='Sales' <strong>baseFont='Arial' baseFontSize='12' baseFontColor='333333'</strong>>
<set label='Quarter 1' value='420500' />
<set label='Quarter 2' value='295400' />
<set label='Quarter 3' value='523400' />
<set label='Quarter 4' value='465400' />
</chart></pre></div>
<div id="tab6" class="tab_content"><pre class="prettyprint code_container">{
"chart":{
"caption":"Quarterly Sales Summary",
"subcaption":"Figures in $",
"xaxis":"Quarter",
"yaxisname":"Sales",
<strong> "basefont":"Arial",
"basefontsize":"12",
"basefontcolor":"333333"</strong>
},
"data":[{
"label":"Quarter 1",
"value":"420500"
},
{
"label":"Quarter 2",
"value":"295400"
},
{
"label":"Quarter 3",
"value":"523400"
},
{
"label":"Quarter 4",
"value":"465400"
}
]
}</pre>
</div>
</div>
</div><div style="clear:both"></div>
<p><strong>Output:</strong></p>
<img src="Images/data_values7.jpg" width="400" height="200" />
<p>As you can see above, all the text in the chart has acquired the properties defined using the <span class="codeInline">baseFont</span> attribute group. </p>
<p>If you want the font properties for the text within the canvas (data values, tool tips) to be different from the font properties of the text outside the canvas, then you need to define both the <span class="codeInline">baseFont</span> and the <span class="codeInline">outCnvBaseFont</span> attribute groups. While the <span class="codeInline">baseFont</span> attribute group will set the attributes for all the text in the chart, <span class="codeInline">outCnvbaseFont </span>attribute group will over-ride the settings for the text outside the canvas, thus leaving the in-canvas text with different properties than the out-canvas text. The data for the same will be:</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"><chart caption='Quarterly Sales Summary' subcaption='Figures in $' xAxis='Quarter' yAxisName='Sales' <strong>baseFont='Arial' baseFontSize='12' baseFontColor='999999' outCnvbaseFontSize='10' outCnvBaseFontColor='333333'</strong>>
<set label='Quarter 1' value='420500' />
<set label='Quarter 2' value='295400' />
<set label='Quarter 3' value='523400' />
<set label='Quarter 4' value='465400' />
</chart></pre>
</div>
<div id="tab8" class="tab_content"><pre class="prettyprint code_container">{
"chart":{
"caption":"Quarterly Sales Summary",
"subcaption":"Figures in $",
"xaxis":"Quarter",
"yaxisname":"Sales",
"basefont":"Arial",
"basefontsize":"12",
"basefontcolor":"999999",
"outcnvbasefontsize":"10",
"outcnvbasefontcolor":"333333"
},
"data":[{
"label":"Quarter 1",
"value":"420500"
},
{
"label":"Quarter 2",
"value":"295400"
},
{
"label":"Quarter 3",
"value":"523400"
},
{
"label":"Quarter 4",
"value":"465400"
}
]
}</pre></div>
</div>
</div><div style="clear:both"></div>
</td>
</tr>
<tr><td height="25"></td></tr>
<tr>
<td valign="top" class="header">Using Styles to specify font properties for individual titles </td>
</tr>
<tr>
<td valign="top" class="text"><p>If you do not want all the text on your chart to have similar font properties, you can use Styles to define individual font properties for different text on the chart. Using Styles you can specify a different font name, size, color, background & border color and also make the text bold or italicized. </p>
<p>Shown below is a change in the font properties of the data values. </p>
<img src="Images/data_values8.jpg" width="400" height="200" />
<p>The XML/JSON for this chart is as under. To read more on Styles, please refer to <a href="../Styles/Styles.html">FusionCharts XT Styles</a>.</p>
</td>
</tr>
<tr>
<td valign="top" class="codeBlock">
<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"><chart caption='Quarterly Sales Summary' subcaption='Figures in $' xAxisName='Quarter' yAxisName='Sales'>
<set label='Qtr 1' value='420500' />
<set label='Qtr 2' value='295400' />
<set label='Qtr 3' value='523400' />
<set label='Qtr 4' value='465400' />
<strong><styles>
<definition>
<style name='myValuesFont' type='font' size='12' color='FFFFFF' bold='1' bgColor='666666' borderColor='666666'/>
</definition>
<application>
<apply toObject='DataValues' styles='myValuesFont' />
</application>
</styles></strong>
</chart></pre></div>
<div id="tab10" class="tab_content"><pre class="prettyprint code_container">{
"chart":{
"caption":"Quarterly Sales Summary",
"subcaption":"Figures in $",
"xaxisname":"Quarter",
"yaxisname":"Sales"
},
"data":[{
"label":"Qtr 1",
"value":"420500"
},
{
"label":"Qtr 2",
"value":"295400"
},
{
"label":"Qtr 3",
"value":"523400"
},
{
"label":"Qtr 4",
"value":"465400"
}
],
<strong> "styles": {
"definition": [
{
"name": "myValuesFont",
"type": "font",
"size": "12",
"color": "FFFFFF",
"bold": "1",
"bgcolor": "666666",
"bordercolor": "666666"
}
],
"application": [
{
"toobject": "DataValues",
"styles": "myValuesFont"
}
]
}
</strong>}</pre></div>
</div>
</div><div style="clear:both"></div>
</td>
</tr>
<tr><td height="25"></td></tr>
<tr>
<td valign="top" class="header">Applying effects </td>
</tr>
<tr>
<td valign="top" class="text"><p>You can also apply effects (shadow, glow, blur, bevel etc.) to the chart titles using Styles. Shown below is an example:</p>
<img src="Images/data_values9.jpg" width="400" height="200" />
<p>The XML/JSON for the same is:</p> </td>
</tr>
<tr>
<td valign="top" class="text">
<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"><chart caption='Quarterly Sales Summary' subcaption='Figures in $' xAxisName='Quarter' yAxisName='Sales'>
<set label='Qtr 1' value='420500' />
<set label='Qtr 2' value='295400' />
<set label='Qtr 3' value='523400' />
<set label='Qtr 4' value='465400' />
<strong><styles>
<definition>
</strong><strong><style name='myShadow' type='Shadow' color='999999' angle='45'/>
</definition>
<application>
<apply toObject='DataValues' styles='</strong><strong>myShadow' />
</application>
</styles></strong>
</chart></pre></div>
<div id="tab12" class="tab_content"><pre class="prettyprint code_container">{
"chart":{
"caption":"Quarterly Sales Summary",
"subcaption":"Figures in $",
"xaxisname":"Quarter",
"yaxisname":"Sales"
},
"data":[{
"label":"Qtr 1",
"value":"420500"
},
{
"label":"Qtr 2",
"value":"295400"
},
{
"label":"Qtr 3",
"value":"523400"
},
{
"label":"Qtr 4",
"value":"465400"
}
],
<strong> "styles": {
"definition": [
{
"name": "myShadow",
"type": "Shadow",
"color": "999999",
"angle": "45"
}
],
"application": [
{
"toobject": "DataValues",
"styles": "myShadow"
}
]
}
</strong>}</pre></div>
</div>
</div><div style="clear:both"></div>
</td>
</tr>
<tr>
<td valign="top" class="text"><p>We can also apply a glow to the data values as under:</p>
<img src="Images/data_values10.jpg" width="400" height="200" />
<p>The XML/JSON going into the above is:</p> </td>
</tr>
<tr>
<td valign="top" class="text">
<div class="container">
<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"><chart caption='Quarterly Sales Summary' subcaption='Figures in $' xAxisName='Quarter' yAxisName='Sales'>
<set label='Quarter 1' value='420500' />
<set label='Quarter 2' value='295400' />
<set label='Quarter 3' value='523400' />
<set label='Quarter 4' value='465400' />
<strong><styles>
<definition></strong><strong>
<style name='myGlow' type='Glow' color='9999999'/>
</definition>
<application>
<apply toObject='DataValues' styles='</strong><strong>myGlow' />
</application>
</styles></strong>
</chart></pre></div>
<div id="tab14" class="tab_content"><pre class="prettyprint code_container">{
"chart":{
"caption":"Quarterly Sales Summary",
"subcaption":"Figures in $",
"xaxisname":"Quarter",
"yaxisname":"Sales"
},
"data":[{
"label":"Quarter 1",
"value":"420500"
},
{
"label":"Quarter 2",
"value":"295400"
},
{
"label":"Quarter 3",
"value":"523400"
},
{
"label":"Quarter 4",
"value":"465400"
}
],
<strong> "styles": {
"definition": [
{
"name": "myGlow",
"type": "Glow",
"color": "9999999"
}
],
"application": [
{
"toobject": "DataValues",
"styles": "myGlow"
}
]
}
</strong>}</pre></div>
</div>
</div><div style="clear:both"></div>
</td>
</tr>
<tr><td height="25"></td></tr>
<tr>
<td valign="top" class="header">Applying animation to data values </td>
</tr>
<tr>
<td valign="top" class="text"><p>You can also apply animation effects to the data labels using Styles. Shown below is an example which animates the y-position of the data values from the top of the chart canvas to their respective positions.</p> </td>
</tr>
<tr>
<td valign="top" class="text">
<div class="container">
<ul class="tabs">
<li><a href="#tab15">XML</a></li>
<li><a href="#tab16">JSON</a></li>
</ul>
<div class="tab_container">
<div id="tab15" class="tab_content"><pre class="prettyprint code_container"><chart caption='Quarterly Sales Summary' subcaption='Figures in $' xAxisName='Quarter' yAxisName='Sales'>
<set label='Quarter 1' value='420500' />
<set label='Quarter 2' value='295400' />
<set label='Quarter 3' value='523400' />
<set label='Quarter 4' value='465400' />
<strong><styles>
<definition>
<style name='myAnim' type='animation' param='_y' start='$canvasStartY' duration='1' />
</definition>
<application>
<apply toObject='DataValues' styles='myAnim' />
</application>
</styles></strong>
</chart></pre>
</div>
<div id="tab16" class="tab_content"><pre class="prettyprint code_container">{
"chart":{
"caption":"Quarterly Sales Summary",
"subcaption":"Figures in $",
"xaxisname":"Quarter",
"yaxisname":"Sales"
},
"data":[{
"label":"Quarter 1",
"value":"420500"
},
{
"label":"Quarter 2",
"value":"295400"
},
{
"label":"Quarter 3",
"value":"523400"
},
{
"label":"Quarter 4",
"value":"465400"
}
],
<strong> "styles": {
"definition": [
{
"name": "myAnim",
"type": "animation",
"param": "_y",
"start": "$canvasStartY",
"duration": "1"
}
],
"application": [
{
"toobject": "DataValues",
"styles": "myAnim"
}
]
}
</strong>}</pre></div>
</div>
</div><div style="clear:both"></div>
</td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("Data Labels|DataLabels.html", "Font Properties|FontProperties.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>