|
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 : /proc/21573/task/21573/root/home/queenjbs/www/FusionChart/Contents/grid-component/ |
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>Grid Component - How to Use? </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", "Grid Component|Grid_Overview.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? </td>
</tr>
<tr>
<td valign="top" class="text"><p>Here, we will see how to use the grid component. To start with, we will first create a very basic page with just a grid (and no chart even). To do so, create a new HTML file <span class="codeInline">SimpleGrid.html</span> with the following code: </p>
<p class="highlightBlock">All code examples discussed in this section is present in <span class="codeInline">Download Package</span> > <span class="codeInline">Code</span> > <span class="codeInline">Grid</span>. </p></td>
</tr>
<tr>
<td valign="top">
<pre class="prettyprint code_container"><html>
<head>
<script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script>
</head>
<body bgcolor="#ffffff">
<div id="chartdiv" align="center">
The grid will appear within this DIV.
</div>
<strong><script type="text/javascript">
var myChart = new FusionCharts("../FusionCharts/SSGrid.swf", "myGrid1", "300", "200", "0", "1");
myChart.setXMLUrl("Data.xml");
myChart.render("chartdiv");
</script></strong>
</body>
</html></pre>
</td>
</tr>
<tr>
<td valign="top" class="text"><p>In the above code, like any other previous chart, we are embedding the grid component (<span class="codeInline">SSGrid.swf</span>) and then providing <span class="codeInline">Data.xml </span>as its <span class="codeInline">dataURL</span>. <span class="codeInline">Data.xml</span> contains the following single series data:</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" style="width:100%; height:383px; overflow:auto;">
<div id="tab1" class="tab_content">
<pre class="prettyprint code_container"><chart caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showValues='0' decimals='0' formatNumberScale='0' labelDisplay='Rotate'>
<set label='Jan' value='462' />
<set label='Feb' value='857' />
<set label='Mar' value='671' />
<set label='Apr' value='494' />
<set label='May' value='761' />
<set label='Jun' value='960' />
<set label='Jul' value='629' />
<set label='Aug' value='622' />
<set label='Sep' value='376' />
<set label='Oct' value='494' />
<set label='Nov' value='761' />
<set label='Dec' value='960' />
</chart></pre>
</div>
<div class="tab_content" id="tab2">
<pre id="pre-datajson" class="prettyprint code_container">{<br /> "chart":{<br /> "caption":"Monthly Unit Sales",<br /> "xaxisname":"Month",<br /> "yaxisname":"Units",<br /> "showvalues":"0",<br /> "decimals":"0",<br /> "formatnumberscale":"0",<br /> "labeldisplay":"Rotate"<br /> },<br /> "data":[{<br /> "label":"Jan",<br /> "value":"462"<br /> },<br /> {<br /> "label":"Feb",<br /> "value":"857"<br /> },<br /> {<br /> "label":"Mar",<br /> "value":"671"<br /> },<br /> {<br /> "label":"Apr",<br /> "value":"494"<br /> },<br /> {<br /> "label":"May",<br /> "value":"761"<br /> },<br /> {<br /> "label":"Jun",<br /> "value":"960"<br /> },<br /> {<br /> "label":"Jul",<br /> "value":"629"<br /> },<br /> {<br /> "label":"Aug",<br /> "value":"622"<br /> },<br /> {<br /> "label":"Sep",<br /> "value":"376"<br /> },<br /> {<br /> "label":"Oct",<br /> "value":"494"<br /> },<br /> {<br /> "label":"Nov",<br /> "value":"761"<br /> },<br /> {<br /> "label":"Dec",<br /> "value":"960"<br /> }<br /> ]<br />}</pre>
</div></div></div></td>
</tr>
<tr>
<td valign="top" class="text"><p>When you now view this page, you will see the following output:</p>
<img src="Images/Grid_Single.jpg" />
<p>See it <a href="../../Code/Grid/SimpleGrid.html" target="_blank">live</a>!</p>
<p>Let us now see how to plug this grid with a chart.</p> </td>
</tr>
<tr>
<td valign="top" class="header"><a name="gridwithchart"></a>Combining the grid with a chart </td>
</tr>
<tr>
<td valign="top" class="text"><p>Using the grid with a chart is same as using two chart types. The only difference is that the grid and chart now use the same data source instead of two different data sources. The following HTML code (<span class="codeInline">GridWithChart.html</span>) will explain the concept:</p> </td>
</tr>
<tr>
<td valign="top">
<pre class="prettyprint code_container"><html>
<head>
<script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script>
</head>
<body bgcolor="#ffffff">
<div id="chartDiv" align="center">The chart will appear within this DIV. </div><strong> </strong>
<strong><script type="text/javascript">
var myChart = new FusionCharts("../FusionCharts/Column2D.swf", "myChart", "300", "250", "0", "1");
myChart.setXMLUrl("Data.xml");
myChart.render("chartDiv");
</script></strong>
<div id="gridDiv" align="center">The grid will appear within this DIV. </div><strong> </strong>
<strong><script type="text/javascript">
var myGrid = new FusionCharts("../FusionCharts/SSGrid.swf", "myGrid1", "300", "200", "0", "1");
myGrid.setXMLUrl("Data.xml");
myGrid.render("gridDiv");
</script</strong><strong>>
</strong></body>
</html></pre>
</td>
</tr>
<tr>
<td valign="top" class="text"><p>In the above code, we are first rendering the chart and then rendering the grid. The <span class="codeInline">dataURL</span> for both is provided as <span class="codeInline">Data.xml</span>, as want the grid to relate to the chart itself. </p>
<p>When you now view this, you'll get the following output: </p>
<img src="Images/Grid_Chart.jpg"/>
<p>See it <a href="../../Code/Grid/GridWithChart.html" target="_blank">live</a>!</p></td>
</tr>
<tr>
<td valign="top" class="header"><a name="gridparam"></a>Providing parameters to grid </td>
</tr>
<tr>
<td valign="top" class="text"><p>Apart from the configuration parameters provided in XML/JSON, you can also specify exclusive parameters for the grid. This is done using FlashVars, as the XML/JSON already contains parameters for the chart and you cannot disturb that. The grid supports a lot of parameters listed in <a href="Grid_Parameters.html">next section</a>. Here, we will just see how to use them. </p>
<p>Shown below is an example, where we convert our above example to show percentage values in grid instead of values. The grid exposes a parameter which helps you do so. Also, we will set the grid to show shadow for the color boxes and navigation buttons. The following code does the same (<span class="codeInline">ParameterGrid.html</span>): </p></td>
</tr>
<tr>
<td valign="top">
<pre class="prettyprint code_container"><html>
<head>
<script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script>
</head>
<body bgcolor="#ffffff">
<div id="griddiv" align="center">The grid will appear within this DIV.</div>
<script type="text/javascript">
var myGrid = new FusionCharts("../FusionCharts/SSGrid.swf", "myGrid1", "300", "200", "0", "1");
myGrid.setXMLUrl("Data.xml");
//Set Grid specific parameters
<strong> myGrid.configure('showPercentValues', '1');
myGrid.configure('showShadow', '1');
</strong> myGrid.render("griddiv");
</script>
</body>
</html></pre>
</td>
</tr>
<tr>
<td valign="top" class="text"><p>As you can see above, we have added two new parameters for the grid named as <span class="codeInline">showPercentValues</span> and <span class="codeInline">showShadow</span>. We've set 1 as value for both these parameters. The supported list of parameters for the grid is listed in <a href="Grid_Parameters.html">next section</a>. </p>
<p class="highlightBlock"><strong>Existing users</strong>: Earlier <span class="codeInline"><a href="../JavaScript/API/Methods.html#addvariable">addVariable()</a></span> function was used to set these parameters. <span class="codeInline">addVariable()</span> is now deprecated. We recommend the use of <a href="../JavaScript/API/Methods.html#configure"> <span class="codeInline">configure()</span></a> function to set these parameters. </p>
<p>When you now see this grid, it will look as under: </p>
<img src="Images/Grid_Param.jpg" alt="" width="310" height="213" />
<p>See it <a href="../../Code/Grid/ParameterGrid.html" target="_blank">live</a>!</p>
<p>As you can see, the numbers have been converted to percent values and also there is the shadow effect.</p>
</td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("Grid Component Overview|Grid_Overview.html","Grid Parameters|Grid_Parameters.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>