|
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/Code/J2EE/ |
Upload File : |
<!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 FusionCharts XT with JSP > Basic Examples</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", "Guide for web developers", "Using with J2EE|JSP_GettingStarted.html", "Basic Examples" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">
Using FusionCharts XT with JSP - Basic Examples</td>
</tr>
<tr>
<td valign="top" class="text">
<p>FusionCharts XT can effectively be used with JSP to plot dynamic data-driven
charts. In this example, we will show a few basic examples to help you get
started.</p>
<p>Even when used with JSP, FusionCharts XT internally uses JavaScript and XML/JSON to render the charts. The JSP code actually helps you output this JavaScript and XML/JSON. To aid your understanding of this section, we will recommend you to go through the following sections of documentation (if you have not already read them): </p>
<ul>
<li> <a href="../../FirstChart/FirstChart.html">Creating your first chart</a></li>
<li>Changing chart <a href="../../FirstChart/ChangeChart.html">type</a> and <a href="../../FirstChart/ChangeSize.html">size</a></li>
<li>Configuring chart <a href="../../AttDesc/Background.html">background</a>, <a href="../../AttDesc/Canvas.html">canvas</a>, <a href="../../AttDesc/FontProperties.html">fonts</a>, <a href="../../AttDesc/Titles.html">captions</a>, <a href="../../AttDesc/DataPlot.html">data plot</a>, <a href="../../AttDesc/DataLabels.html">labels</a>, <a href="../../AttDesc/DataValues.html">values</a>, <a href="../../AttDesc/DivLines.html">axis</a>, <a href="../../AttDesc/Legend.html">legend</a>, <a href="../../AttDesc/Padding.html">padding and margins,</a> and <a href="../../advanced/number-format/Number_Basics.html">number formatting</a></li>
<li>Using <a href="../../DataFormats/XML/Overview.html">XML</a> or <a href="../../DataFormats/JSON/Overview.html">JSON</a> as data source</li>
<li>Using <a href="../../JavaScript/JS_Overview.html">JavaScript API</a> of FusionCharts XT</li>
<li>Creating <a href="../../FirstChart/Drilldown.html">drill-down charts</a> and <a href="../../FirstChart/LinkedCharts.html">LinkedCharts</a></li>
<li>Exporting charts as <a href="../../exporting-image/ECOverview.html">images</a> or <a href="../../exporting-data/ExportDataSetup.html">CSV</a></li>
<li><a href="../../guide-for-web-developers/how-fusioncharts-works/HowFCWorks.html">How FusionCharts XT work?</a> </li>
</ul>
<p>In this section, we will show a few basic examples to help you get started.</p>
<p>We will cover the following examples here:</p>
<ol>
<li><a href="#jsxmlurl">Use FusionCharts XT in JSP with a pre-built Data.xml (which contains data to plot)</a></li>
<li><a href="#jsxml">Change the above chart into a single-page-chart using Data String method</a></li>
<li><a href="#htmlurl">Use HTML Embedding method to render the chart</a></li>
<li><a href="#js">Create pure JavaScript charts</a></li>
<li><a href="#json">Use JSON data to create chart</a></li>
<li><a href="#multiple">Create multiple charts in a single page</a></li>
<li><a href="#transparent">Create transparent chart</a></li>
<li><a href="#managedprint">Set managed printing for Mozilla browsers</a></li>
</ol>
<p>Let's quickly see each of them. </p>
<p><strong>Before you proceed with the contents in this page, we strictly recommend you to please go through the <a href="../../guide-for-web-developers/how-fusioncharts-works/HowFCWorks.html">How FusionCharts XT works?</a> section</strong></p>
<p class="highlightBlock">All code discussed here is present
in <span class="codeInline">Download Package > Code > J2EE </span>>
<span class="codeInline">BasicExample</span> folder.</p> </td>
</tr>
<tr>
<td valign="top" class="header">Setting up the charts for use </td>
</tr>
<tr>
<td valign="top" class="text"><p>In our code, we have used the charts contained
in <span class="codeInline">Download Package > Code > FusionCharts</span>
folder. When you run your samples, you need to make sure that the SWF files
are in proper location. All our JSP samples are now using custom tag library and JSTL! So, you will need the jstl jars to deploy and test these applications. The jstl jar files are provided in <span class="codeInline"> Download Package > Code > J2EE > Web-Inf > lib </span> folder. Please go through the Readme file present in <span class="codeInline"> Download Package > Code > J2EE </span>folder.</p> </td>
</tr>
<tr>
<td valign="top" class="header"><a name="jsxmlurl" id="jsxmlurl"></a>Plotting a chart from data contained in <span class="codeInline">Data.xml</span></td>
</tr>
<tr>
<td valign="top" class="text">
<p>Let's build our first example. In this example, we will create
a "Monthly Unit Sales" chart using the <span class="codeInline">Data URL</span>
method. For a start, we will manually code our XML data in a physical XML document
<span class="codeInline">Data.xml </span>and then utilize it in our chart
contained in a JSP Page (<span class="codeInline">SimpleChart.jsp</span>). </p>
<p>Let's first have a look at the XML Data document:</p> </td>
</tr>
<tr>
<td valign="top" class="codeBlock">
<pre class="code_container prettyprint"><chart caption='Monthly Unit Sales'
xAxisName='Month' yAxisName='Units' showValues='0' formatNumberScale='0'
showBorder='1'>
<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>
</td>
</tr>
<tr>
<td valign="top" class="text">
<p>This XML is stored as <span class="codeInline">Data.xml</span> in <span class="codeInline">Data
</span>Folder under <span class="codeInline">BasicExample</span> folder.
It basically contains the data to create a single series chart to show
"Monthly Unit Sales". We will plot this on a Column 3D Chart.
Let's see how to do that. </p>
<p>To plot a Chart that consumes this data, you need to include the HTML code to embed a Flash object and then provide the requisite parameters. To make things simpler for you, we have created a tag library with all this functionality. So, whenever you need to work with FusionCharts XT in JSP, just include this tag library in your page, and then you can work with FusionCharts XT very easily. Let us see how to use the <span class="codeInline">FusionCharts</span> <span class="codeInline">render</span> tag.</p>
<p>Let's see it in example. <span class="codeInline">SimpleChart.jsp</span> contains the following code to render the chart:</p></td>
</tr>
<tr>
<td valign="top" class="text">
<pre class="code_container prettyprint"><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://www.fusioncharts.com/jsp/core" prefix="fc" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<strong><jsp:useBean id="chartData" class="com.fusioncharts.sampledata.BasicRenderData"/></strong>
<c:set var="folderPath" value="../../FusionCharts/"/>
<c:set var="title" value="FusionCharts - Simple Column 3D Chart" scope="request"/>
<c:set var="header1" value="FusionCharts - Examples" scope="request"/>
<c:set var="header2" value="Basic example using pre-built Data.xml" scope="request"/>
<c:set var="jsPath" value="${folderPath}" scope="request"/>
<c:set var="assetCSSPath" value="../assets/ui/css/" scope="request"/>
<c:set var="assetJSPath" value="../assets/ui/js/" scope="request"/>
<c:set var="assetImagePath" value="../assets/ui/images/" scope="request"/>
<span class="codeComment"><%--
chartId="myFirst";
filename = "../../FusionCharts/Column3D.swf";
url="Data/Data.xml";
width="600";
height="300";
--%> </span>
<span class="codeComment"><%-- Create the chart - Column 3D Chart with data from Data/Data.xml --%></span>
<strong><tags:template2></strong>
<c:catch var="fcTagError">
<<strong>fc:render</strong> chartId="${chartData.chartId}" swfFilename="${folderPath}${chartData.swfFilename}"
width="${chartData.width}" height="${chartData.height}" debugMode="false"
registerWithJS="false" <strong>xmlUrl="${chartData.url}"</strong> />
</c:catch>
<c:if test="${not empty fcTagError}">
Tag Error: <br/>${fcTagError}
</c:if>
<strong></tags:template2></strong></pre></td>
</tr>
<tr>
<td valign="top" class="text"><p>As you can see above, we have:</p>
<ol>
<li>Used the <span class="codeInline">BasicRenderData</span> bean for getting the data required by the chart.</li>
<li>Used the <span class="codeInline">fc:render</span> tag wherever the chart needs to be rendered.</li>
<li>Passed appropriate attributes to this tag. </li>
</ol>
<p class="text">There are several parts of this jsp that need attention. In this jsp, we have used the following:</p> <ol>
<li class="text"><span class="codeInline">JSTL </span>core tag library </li>
<li><span class="codeInline">FusionCharts custom tag library </span>for rendering the chart </li>
<li><span class="codeInline">Java Bean </span>for providing the render data </li>
<li><span class="codeInline">JSP Tag files</span> for using HTML templates for all the samples</li>
</ol>
<p class="text">As you can see in this page, we have mostly used the <span class="codeInline"><c:set></span> and <span class="codeInline"><c:out></span> tags from <span class="codeInline">JSTL core tag library</span>.</p>
<p class="text"> We highly recommend that you go through the JSTL documentation for more information on the <span class="codeInline">JSTL</span> tags that we have used in our samples as we will not discuss these tags here. </p></td></tr>
<tr>
<td class="header">FusionCharts Custom JSP Tag Library</td></tr>
<tr>
<td valign="top" class="text">
<p>The above page contains a <span class="codeInline"></span>custom tag <span class="codeInline">render </span>to help us render the chart. </p>
<p class="text">Here is the tag used to render the chart:</p>
<pre class="code_container prettyprint">
<<strong>fc:render</strong> chartId="${chartData.chartId}" swfFilename="${folderPath}${chartData.swfFilename}"
width="${chartData.width}" height="${chartData.height}" debugMode="false"
registerWithJS="false" <strong>xmlUrl="${chartData.url}"</strong> />
</pre>
<p class="text">To this tag, you can provide the following attributes :</p> <table width="95%" border="0" align="center" cellpadding="0" cellspacing="0" class="table">
<tr>
<td width="14%" valign="top" class="header">Parameter</td>
<td width="12%" valign="top" class="header">Type</td>
<td width="12%" valign="top" class="header">Mandatory?</td>
<td width="64%" valign="top" class="header">Description</td>
</tr>
<tr>
<td height="42" valign="top" class="codeInline">swfFilename</td>
<td width="12%" valign="top" class="text">String</td>
<td width="12%" valign="top" class="text">Yes</td>
<td valign="top" class="text">SWF File Name (and Path) of the chart which you intend to plot. Here, we are plotting a Column 3D chart. So, we have specified it as <span class="codeInline">../../FusionCharts/Column3D.swf</span></td>
</tr>
<tr>
<td valign="top" class="codeInline">chartId</td>
<td width="12%" valign="top" class="text">String</td>
<td width="12%" valign="top" class="text">Yes</td>
<td valign="top" class="text"> ID for the chart, using which it will be recognized in the HTML page. <strong>Each chart on the page needs to have a unique Id.</strong>
<p class="highlightBlock">To provide cross-browser compatibility, we recommend you not to start the ID with a numerical value, nor use space as part of the ID. </p>
</td>
</tr>
<tr>
<td valign="top" class="codeInline">chartWidth</td>
<td width="12%" valign="top" class="text">String (number) </td>
<td width="12%" valign="top" class="text">Yes</td>
<td valign="top" class="text">Intended width for the chart (in pixels)</td>
</tr>
<tr>
<td valign="top" class="codeInline">chartHeight</td>
<td width="12%" valign="top" class="text">String (number) </td>
<td width="12%" valign="top" class="text">Yes</td>
<td valign="top" class="text">Intended height for the chart (in pixels)</td>
</tr>
<tr>
<td valign="top" class="codeInline">xmlUrl</td>
<td valign="top" class="text">String</td>
<td valign="top" class="text">No</td>
<td valign="top" class="text">If you intend to use <span class="codeInline">Data URL</span> method for the chart, pass the URL to the xml as this attribute. For example, we can specify <span class="codeInline">Data/Data.xml</span>.</td>
</tr>
<tr>
<td valign="top" class="codeInline">xmlData</td>
<td valign="top" class="text">String</td>
<td valign="top" class="text">No</td>
<td valign="top" class="text">If you intend to use <span class="codeInline">Data String </span> method for this chart, pass the XML data as this attribute. </td>
</tr>
<tr>
<td valign="top" class="codeInline">jsonUrl</td>
<td valign="top" class="text">Boolean</td>
<td valign="top" class="text">No</td>
<td valign="top" class="text">If you intend to provide the json to the chart using <span class="codeInline">Data URL</span> method, pass the URL to the json as this attribute. </td>
</tr>
<tr>
<td valign="top" class="codeInline">jsonData</td>
<td valign="top" class="text">Boolean</td>
<td valign="top" class="text">No</td>
<td valign="top" class="text"> If you intend to use <span class="codeInline">Data String </span> method for this chart, pass the JSON data as this attribute. </td>
</tr>
</table>
<p class="text">For providing data, we have used the <span class="codeInline">xmlUrl</span> attribute. You can use <span class="codeInline">xmlData, jsonUrl, jsonData or chartData, chartDataUrl</span> in combination with <span class="codeInline">dataFormat </span>or data as part of the body of the tag. </p>
<div class="highlightBlock">Some of the more advanced configuration can be done using the following attributes: <span class="msg_handler_open_slider"><a>Click here to collapse and expand</a> « <br/><br/> </span>
<div class="msg_body_open" style="overflow:auto;margin-left:10px;">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="table">
<tr>
<td width="14%" valign="top" class="header">Parameter</td>
<td width="12%" valign="top" class="header">Type</td>
<td width="12%" valign="top" class="header">Mandatory?</td>
<td width="64%" valign="top" class="header">Description</td>
</tr>
<tr>
<td valign="top" class="codeInline">dataFormat</td>
<td valign="top" class="text">String</td>
<td valign="top" class="text">Mandatory when providing data as body content or via <span class="codeInline">chartDataUrl</span> or <span class="codeInline">chartData</span> attribute </td>
<td valign="top" class="text">The format of the given data. Currently, it can take values <span class="codeInline">xml</span>, <span class="codeInline">xmlurl</span>, <span class="codeInline">json</span> and <span class="codeInline">jsonurl</span>. If no value is provided for this option, then the tag might raise an error if neither of <span class="codeInline">xmlUrl</span>, <span class="codeInline">xmlData</span>, <span class="codeInline">jsonUrl</span> or <span class="codeInline">jsonData</span> values are provided. </td>
</tr>
<tr>
<td valign="top" class="codeInline">chartDataUrl</td>
<td valign="top" class="text">"window"/"opaque"/ "transparent"</td>
<td valign="top" class="text">No</td>
<td valign="top" class="text">Window mode (the default mode) - here the chart or Flash Player acts as a separate window, always lying above the HTML elements. So the HTML elements, like the HTML menu, lie below the charts. <br />
Opaque mode - In this mode the charts are integrated to the HTML elements, unlike the Window mode. –Here, the DHTML elements can come over the chart. <br />
Transparent mode - Similar to the Opaque mode, however, in this mode, the chart background can be changed to transparent or translucent (modifying the value of the <span class="codeInline">bgAlpha</span> attribute accordingly) so that the color or the HTML elements below the chart (which are part of HTML and not chart) are visible</td>
</tr>
<tr>
<td valign="top" class="codeInline">chartData</td>
<td valign="top" class="text">String (hex code without #) </td>
<td valign="top" class="text">No</td>
<td valign="top" class="text">Background color of the Flash movie (here chart) which comes below the chart and is visible if chart's background color is set to transparent or translucent using <span class="codeInline">bgAlpha</span>. It also comes as background color of the preloader state like when messages like "<span class="codeInline">Loading chart</span>", "<span class="codeInline">retrieving data</span>" "<span class="codeInline">No data to display</span>", etc. are shown. The format followed is: Hexcoded <span class="codeInline">#RRGGBB</span> color, for example, "<span class="codeInline">#ff0000</span>"</td>
</tr>
<tr>
<td valign="top" class="codeInline">windowMode</td>
<td valign="top" class="text">"window"/"opaque"/ "transparent"</td>
<td valign="top" class="text">No</td>
<td valign="top" class="text"><p>This is the default mode. Here the chart or Flash Player acts as a separate window, always lying above the HTML elements. So the HTML elements, like the HTML menu, lie below the charts. <br />
Opaque mode - In this mode the charts are integrated to the HTML elements, unlike the Window mode. –Here, the DHTML elements can come over the chart. <br />
Transparent mode - Similar to the Opaque mode, however, in this mode, the chart background can be changed to transparent or translucent c (modifying the value of the bgAlpha attribute accordingly) so that the color or the HTML elements below the chart (which are part of HTML and not chart) are visible.
</p></td>
</tr>
<tr>
<td valign="top" class="codeInline">bgColor</td>
<td valign="top" class="text">String (hex code without #) </td>
<td valign="top" class="text">No</td>
<td valign="top" class="text">Background color of the Flash movie (here chart) which comes below the chart and is visible if the chart's background color is set to transparent or translucent using <span class="codeInline">bgAlpha</span>. It also comes as background color of the pre loader state like when messages like "<span class="codeInline">Loading chart</span>", "<span class="codeInline">retrieving data</span>" "<span class="codeInline">No data to display</span>", etc. The format followed is: Hexcoded <span class="codeInline">#RRGGBB</span> color, for example, "<span class="codeInline">#ff0000</span>"</td>
</tr>
<tr>
<td valign="top" class="codeInline">scaleMode</td>
<td valign="top" class="text">"noScale"/"exactFit"/ "noBorder"/"showAll"</td>
<td valign="top" class="text">No</td>
<td valign="top" class="text">"noScale" - this mode is set by default. It is also recommended to use this mode<br />
"exactFit" - this mode scales the chart to fit the container exactly with width and height (causes distortion in some cases)<br />
"noBorder" - this mode causes constrained scaling. (not recommended at all)<br />
"showAll" - (not recommended)</td>
</tr>
<tr>
<td valign="top" class="codeInline">lang</td>
<td valign="top" class="text">String - "true"/"false"</td>
<td valign="top" class="text">No</td>
<td valign="top" class="text">Language. The only available language is English (EN).</td>
</tr>
<tr>
<td valign="top" class="codeInline">autoInstallRedirect</td>
<td valign="top" class="text">String - "true"/"false"</td>
<td valign="top" class="text">No</td>
<td valign="top" class="text">If set on, the user will be redirected to Adobe site if Flash player 8 is not installed. </td>
</tr>
<tr>
<td valign="top" class="codeInline">detectFlashVersion</td>
<td valign="top" class="text">String - "true"/"false"</td>
<td valign="top" class="text">No</td>
<td valign="top" class="text">Checks the Flash Player version and if version is less than 8 and autoInstallRedirect is set on then asks the user to install Flash Player from Adobe site</td>
</tr>
<tr>
<td valign="top" class="codeInline">renderer</td>
<td valign="top" class="text">flash/javascript</td>
<td valign="top" class="text">No</td>
<td valign="top" class="text">The renderer that is to be used to render the chart. </td>
</tr>
<tr>
<td valign="top" class="codeInline">renderAt</td>
<td valign="top" class="text">String</td>
<td valign="top" class="text">No</td>
<td valign="top" class="text">The name of the container in which the chart is to be rendered. Usually, the tag renders the chart in a div called <span class="codeInline">chartIdDiv</span> </td>
</tr>
</table>
</div>
</div>
<p>In this SimpleChart.jsp, we have used the <span class="codeInline">xmlUrl</span> attribute to provide the data to the chart.</p>
<p>There is another similar custom tag provided as part of <span class="codeInline">FusionCharts Custom JSP Tag library</span>, which is the <span class="codeInline">renderHTML</span> tag. We will discuss the <span class="codeInline">renderHTML tag</span> a little while later.</p>
</td></tr>
<tr>
<td class="header">Java Bean</td></tr>
<tr>
<td valign="top" class="text">
<p class="text">In <span class="codeInline">SimpleChart.jsp</span>, we have used the <span class="codeInline">BasicRenderData</span> bean for providing the data. The relevant line of code being, </p>
<pre class="code_container prettyprint"><jsp:useBean id="chartData"class="com.fusioncharts.sampledata.BasicRenderData" /> </pre>
<p class="text">The data required to render the chart is constructed in the bean com.fusioncharts.sampledata.BasicRenderData. This class contains the data like chartId, name of the SWF file, URL to the XML file, width and height of the chart. These properties of the bean are accessed in the jsp using the dot operator. For instance, the <span class="codeInline">chartId</span> is accessed as, <span class="codeInline">${chartData.chartId}</span> </p>
<p class="text">Let us take a glance at the important part of code from <span class="codeInline">BasicRenderData</span> bean class:</p>
<pre class="code_container prettyprint">package com.fusioncharts.sampledata;
public class BasicRenderData {
protected String xml;
protected String chartId = "basicChart";
protected String URL = "Data/Data.xml";
protected String jsonUrl = "Data/Data.json";
protected String width = "600";
protected String height = "300";
protected String swfFilename = ChartType.COLUMN3D.getFileName();
protected String uniqueId = "";
public BasicRenderData() {
xml = "<chart caption='Monthly Unit Sales'
xAxisName='Month' yAxisName='Units' showValues='0'
formatNumberScale='0' showBorder='1'>";
xml += "<set label='Jan' value='462' />";
xml += "<set label='Feb' value='857' />";
xml += "<set label='Mar' value='671' />";
xml += "<set label='Apr' value='494' />";
xml += "<set label='May' value='761' />";
xml += "<set label='Jun' value='960' />";
xml += "<set label='Jul' value='629' />";
xml += "<set label='Aug' value='622' />";
xml += "<set label='Sep' value='376' />";
xml += "<set label='Oct' value='494' />";
xml += "<set label='Nov' value='761' />";
xml += "<set label='Dec' value='960' />";
xml += "</chart>";
}
// getters and setters
}
</pre>
</td></tr>
<tr>
<td valign="top" class="text"> </td></tr>
<tr>
<td class="header">JSP Tag files</td></tr>
<tr>
<td valign="top" class="text">
<p> A tag file is simply a plain text file with a file extension of <span class="codeInline">.tag</span>. Other than the JSP page directive, all the usual JSP elements can be used within a tag file. Tag files can be used for templating in JSP.</p>
<p>We have used 3 tag files called <span class="codeInline">template1.tag</span>, <span class="codeInline">template2.tag</span> and <span class="codeInline">template3.tag</span> for our samples. These files are present in <span class="codeInline">Download Package > Code > J2EE > WEB-INF > tags </span> folder. </p>
<ul>
<li>The <span class="codeInline">template1.tag</span> file contains simple HTML template with title, headers, intro place-holders.</li>
<li>The <span class="codeInline">template2.tag</span> file includes the FusionCharts.js file which is required when using <span class="codeInline">fc:render</span> tag.</li>
<li>The <span class="codeInline">template3.tag</span> file includes the UTF-8 header which is used by the UTF-8 examples. </li>
</ul>
<p class="text">Below is the code for template1.tag:</p>
<pre class="code_container prettyprint"><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><strong><c:out value="${title}"/></strong></title>
<link href="<strong>${assetCSSPath}</strong>style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<strong>${assetJSPath}</strong>jquery.min.js"></script>
<script type="text/javascript" src="<strong>${assetJSPath}</strong>lib.js"></script>
<!--[if IE 6]>
<script type="text/javascript" src="<strong>${assetJSPath}</strong>DD_belatedPNG_0.0.8a-min.js"></script>
<script>
/* select the element name, css selector, background etc */
DD_belatedPNG.fix('img');
/* string argument can be any CSS selector */
</script>
<![endif]-->
<style type="text/css">
h2.headline {
font: normal 110%/137.5% "Trebuchet MS", Arial, Helvetica, sans-serif;
padding: 0;
margin: 25px 0 25px 0;
color: #7d7c8b;
text-align: center;
}
p.small {
font: normal 68.75%/150% Verdana, Geneva, sans-serif;
color: #919191;
padding: 0;
margin: 0 auto;
width: 664px;
text-align: center;
}
</style>
</head>
<BODY>
<div id="wrapper">
<div id="header">
<div class="back-to-home"><a href="../index.html">Back to home</a></div>
<div class="logo"><a class="imagelink" href="http://www.fusioncharts.com" target="_blank">
<img src="<strong>${assetImagePath}</strong>fusionchartsv3.2-logo.png" width="131"
height="75" alt="FusionCharts v3.2 logo" /></a></div>
<h1 class="brand-name">FusionCharts</h1>
<h1 class="logo-text"><strong><c:out value="${header1}"/></strong></h1>
</div>
<div class="content-area">
<div id="content-area-inner-main">
<h2 class="headline"><strong><c:out value="${header2}"/></strong></h2>
<div class="gen-chart-render">
<strong> <jsp:doBody var="bodycontent"/>
<c:out value="${bodycontent}" escapeXml="false"/></strong>
</div>
<div class="clear"></div>
<p>&nbsp;</p>
<p class="small"> <strong>${intro} </strong>
<!--<p class="small">This dashboard was created using FusionCharts XT, FusionWidgets XT
and FusionMaps v3 You are free to reproduce and distribute this dashboard in its original form,
without changing any content, whatsoever. <br />
&copy; All Rights Reserved</p>
<p>&nbsp;</p>-->
</p>
<div class="underline-dull"></div>
</div>
</div>
<div id="footer">
<ul>
<li><a href="../index.html"><span>&laquo; Back to list of examples</span></a></li>
<li cl ass="pipe">|</li>
<li><a href="../NoChart.html"><span>Unable to see the chart above?</span></a></li>
</ul>
</div>
</div>
</BODY>
</HTML></pre>
</td></tr>
<tr>
<td valign="top" class="text">
<p class="text">In the above <span class="codeInline">template.tag</span> file, the part that is in bold is the one that changes from one jsp to another. The rest of the HTML code remains the same across all the pages, thus, achieving uniformity.</p>
<p class="text">The values for the variables ${title}, ${header1}, ${header2}, ${intro}, ${assetJSPath},${assetImagePath} are provided by the jsps that use this template. </p>
<p class="text">For example, in <span class="codeInline">SimpleChart.jsp</span>, the values for these variables are provided as shown:</p>
<pre class="code_container prettyprint"><c:set var="title" value="FusionCharts - Simple Column 3D Chart" scope="request"/>
<c:set var="header1" value="FusionCharts - Examples" scope="request"/>
<c:set var="header2" value="Basic example using pre-built Data.xml" scope="request"/>
<c:set var="jsPath" value="${folderPath}" scope="request"/>
<c:set var="assetCSSPath" value="../assets/ui/css/" scope="request"/>
<c:set var="assetJSPath" value="../assets/ui/js/" scope="request"/>
<c:set var="assetImagePath" value="../assets/ui/images/" scope="request"/> </pre>
<p>
Note that here we have included the path to the folder containing the <span class="codeInline">javascript</span> files, which is required when using the JavaScript embedding method. This is achieved through the code as below:</p>
<pre class="code_container prettyprint"><c:set var="folderPath" value="../../FusionCharts/"/></pre>
<p>Here, FusionCharts is the name of the folder containing <span class="codeInline">FusionCharts.js</span> and other JavaScript files.</p>
<p>We have used <span class="codeInline">template2.tag</span> as a template for <span class="codeInline">SimpleChart.jsp</span>. This template, includes the necessary JavaScript file as shown in the following code snippet:</p>
<pre class="code_container prettyprint"><SCRIPT LANGUAGE="Javascript" SRC="${jsPath}FusionCharts.js"></SCRIPT></pre>
<p class="text">When you now run this page <span class="codeInline">SimpleChart.jsp</span>, you will see a chart like the one below.</p>
<p class="highlightBlock">If you do not see a chart like the one below,
please follow the steps listed in the <span class="codeInline">Debugging your
Charts > Basic Troubleshooting</span> section of this documentation.</p>
<p><img src="../../guide-for-web-developers/Images/Code_BasicChart.jpg" width="591" height="292" class="imageBorder" /></p>
<p>So, you just saw how simple it is to create a chart using JSP and FusionCharts XT.</p>
<p>Let's now try and convert the above chart using the <span class="codeInline">Data String</span> method. </p></td>
</tr>
<tr>
<td valign="top" class="header"><a name="jsxml" id="jsxml"></a>Changing the above chart into a single page chart using Data String method</td>
</tr>
<tr>
<td valign="top" class="text"><p> To convert this chart using the <span class="codeInline">Data String</span> method,
we create another page <span class="codeInline">dataXML.jsp</span>
in the same folder with following code:
</p> </td>
</tr>
<tr>
<td valign="top" class="text">
<pre class="code_container prettyprint">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://www.fusioncharts.com/jsp/core" prefix="fc" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<jsp:useBean id="chartData" class="com.fusioncharts.sampledata.BasicRenderData"/>
<c:set var="folderPath" value="../../FusionCharts/"/>
<c:set var="title" value="FusionCharts - Simple Column 3D Chart using dataStr method" scope="request"/>
<c:set var="header1" value="FusionCharts - Examples" scope="request"/>
<c:set var="header2" value="Basic example using dataStr method (with XML data hard-coded in
bean itself)" scope="request"/>
<c:set var="intro" value="If you view the source of this page, you will see that the XML data
is present in this same page (inside HTML code). We are not calling any
external XML files to serve XML data. dataStr method is
ideal when you've to plot small amounts of data."/>
<c:set var="jsPath" value="${folderPath}" scope="request"/>
<c:set var="assetCSSPath" value="../assets/ui/css/" scope="request"/>
<c:set var="assetJSPath" value="../assets/ui/js/" scope="request"/>
<c:set var="assetImagePath" value="../assets/ui/images/" scope="request"/>
<strong><tags:template2>
<c:catch var="fcTagError">
<fc:render chartId="${chartData.chartId}" swfFilename="${folderPath}${chartData.swfFilename}"
width="${chartData.width}" height="${chartData.height}" debugMode="false" registerWithJS="false" dataFormat="xml" >
<chart caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units'
showValues='0' formatNumberScale='0' showBorder='1'>
<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>
</fc:render>
</c:catch>
<c:if test="${not empty fcTagError}">
Tag Error! <br/>${fcTagError}
</c:if>
</tags:template2></strong>
</pre></td>
</tr>
<tr>
<td valign="top" class="text">
<p>As you can see above, we:</p>
<ol>
<li>Use the <span class="codeInline">fc:render</span> tag </li>
<li>Set the appropriate values for the attributes <span class="codeInline">chartId</span>, <span class="codeInline">width</span>, <span class="codeInline">height</span>, <span class="codeInline">swfFilename</span>, etc. </li>
<li>Provide the data as part of the body of the tag. Here, we are manually coding the data. In your applications, you can build this data dynamically by querying the databases or external sources of data.</li>
</ol>
<p>In this example, instead of using the <span class="codeInline">xmlUrl</span> attribute, we have provided the data as part of the body of the<span class="codeInline"> fc:render</span> tag.When you see this chart, you will get the same results as shown above. </p></td>
</tr>
<tr>
<td valign="top" class="header"><a name="htmlurl" id="htmlurl"></a>Using FusionCharts HTML embedding method to render chart</td>
</tr>
<tr>
<td valign="top" class="text"><p>You can also create charts using HTML embedding method. It creates HTML <span class="codeInline"><object>/<embed></span> tags to render chart. Please note it does not require<span class="codeInline"> FusionCharts.js</span> to render.</p>
<p>Again, to make things simpler for you, we have provided <span class="codeInline">fc:render</span> HTML tag, so that you do not have to get your hands dirty with Flash and HTML. This tag embeds the chart using HTML.</p>
<p>Let's now quickly put up a sample to show the use of this tag. We
create another JSP page <span class="codeInline">BasicChart.jsp</span>
to use this function to plot a chart from data contained in our previously
created<span class="codeInline"> Data.xml</span> file. It contains the
following code: </p></td>
</tr>
<tr>
<td valign="top" class="text">
<pre class="code_container prettyprint">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://www.fusioncharts.com/jsp/core" prefix="fc"%>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags"%>
<strong><jsp:useBean id="chartData"
class="com.fusioncharts.sampledata.BasicRenderData" /></strong>
<c:set var="folderPath" value="../../FusionCharts/" />
<c:set var="title" value="FusionCharts - Simple Column 3D Chart"
scope="request" />
<c:set var="header1" value="FusionCharts - Examples" scope="request" />
<c:set var="header2" value="Basic example using pre-built Data.xml"
scope="request" />
<c:set var="assetCSSPath" value="../assets/ui/css/" scope="request"/>
<c:set var="assetJSPath" value="../assets/ui/js/" scope="request"/>
<c:set var="assetImagePath" value="../assets/ui/images/" scope="request"/>
<span class="codeComment"><%--Create the chart - Column 3D Chart with data from Data/Data.xml --%>
<%--
chartId="myFirst";
xmlUrl="Data/Data.xml";
width="600";
height="300";
swfFilename = "../../FusionCharts/Column3D.swf";
--%></span>
<tags:template1>
<c:catch var="fcTagError">
<strong> <fc:renderHTML chartId="${chartData.chartId}"
swfFilename="${folderPath}${chartData.swfFilename}"
width="${chartData.width}" height="${chartData.height}"
debugMode="false" xmlUrl="${chartData.url}" /></strong>
</c:catch>
<c:if test="${not empty fcTagError}">
Tag Error! <br/>${fcTagError}
</c:if>
</tags:template1>
</pre>
</td>
</tr>
<tr>
<td valign="top" class="text">
<p>As you can see above, we have:</p>
<ol>
<li>Used the <span class="codeInline">BasicRenderData</span> bean for getting the data required by the chart.</li>
<li>Used the <span class="codeInline">fc:renderHTML</span> tag wherever the chart needs to be rendered.</li>
<li>Passed appropriate attributes to this tag. Used the <span class="codeInline">xmlUrl</span> attribute to provide the URL to the xml data. </li>
</ol>
<p>Getting back to our discussion on the <span class="codeInline">fc:renderHTML</span> tag, the following are the attributes accepted by this tag:</p>
<table width="95%" border="0" align="center" cellpadding="0" cellspacing="0" class="table">
<tr>
<td width="10%" valign="top" class="header">Parameter</td>
<td width="12%" valign="top" class="header">Type</td>
<td width="12%" valign="top" class="header">Mandatory?</td>
<td width="78%" valign="top" class="header">Description</td>
</tr>
<tr>
<td valign="top" class="codeInline" width="10%" height="42">swfFilename</td>
<td width="12%" valign="top" class="text">String</td>
<td valign="top" class="text" width="12%">Yes</td>
<td valign="top" class="text" width="78%" height="42">SWF File Name (and Path) of the chart which you intend to plot. Here, we are plotting a Column 3D chart. So, we have specified it as <span class="codeInline">../../FusionCharts/Column3D.swf</span></td>
</tr>
<tr>
<td valign="top" class="codeInline" width="10%">xmlUrl</td>
<td width="12%" valign="top" class="text">String</td>
<td valign="top" class="text" width="12%">No</td>
<td valign="top" class="text" width="78%">If you intend to use the <span class="codeInline">Data URL</span> method for the chart, pass the URL to the xml as this attribute. For example, we can specify <span class="codeInline">Data/Data.xml</span> as the URL.</td>
</tr>
<tr>
<td valign="top" class="codeInline" width="10%">xmlData</td>
<td width="12%" valign="top" class="text">String</td>
<td valign="top" class="text" width="12%">No</td>
<td valign="top" class="text" width="78%">If you intend to use the <span class="codeInline">Data String </span> method for this chart, pass the XML data as this attribute. </td>
</tr>
<tr>
<td valign="top" class="codeInline" width="10%">chartId</td>
<td width="12%" valign="top" class="text">String</td>
<td valign="top" class="text" width="12%">Yes</td>
<td valign="top" class="text" width="78%"> ID for the chart, using which it will be recognized in the HTML page. <strong>Each chart on the page needs to have a unique ID.</strong>
<p class="highlightBlock">To provide cross-browser compatibility, we recommend you not to start the ID with a numerical value, nor use space as part of the ID. </p></td>
</tr>
<tr>
<td valign="top" class="codeInline" width="10%">width</td>
<td width="12%" valign="top" class="text">int value </td>
<td valign="top" class="text" width="12%">Yes</td>
<td valign="top" class="text" width="78%">Intended width for the chart (in pixels)</td>
</tr>
<tr>
<td valign="top" class="codeInline" width="10%">height</td>
<td width="12%" valign="top" class="text">int value </td>
<td valign="top" class="text" width="12%">Yes</td>
<td valign="top" class="text" width="78%">Intended height for the chart (in pixels)</td>
</tr>
<tr>
<td valign="top" class="codeInline">debugMode</td>
<td valign="top" class="text">true/false String </td>
<td valign="top" class="text">No</td>
<td valign="top" class="text">Whether to start the chart in debug mode.</td>
</tr>
<tr>
<td valign="top" class="codeInline">windowMode</td>
<td valign="top" class="text">"window"/"opaque"/ "transparent"</td>
<td valign="top" class="text">No</td>
<td valign="top" class="text">This is the default mode. Here the chart or Flash Player acts as a separate window, always lying above the HTML elements. So the HTML elements, like the HTML menu, lie below the charts. <br />
Opaque mode - In this mode the charts are integrated to the HTML elements, unlike the Window mode. –Here, the DHTML elements can come over the chart. <br />
Transparent mode - Similar to the Opaque mode, however, in this mode, the chart background can be changed to transparent or translucent (modifying the value of the <span class="codeInline">bgAlpha</span> attribute accordingly) so that the color or the HTML elements below the chart (which are part of HTML and not chart) are visible. </td>
</tr>
<tr>
<td valign="top" class="codeInline">bgColor</td>
<td valign="top" class="text">String (hex code without #) </td>
<td valign="top" class="text">No</td>
<td valign="top" class="text">Background color of the Flash movie (here chart) which comes below the chart and is visible if the chart's background color is set to transparent or translucent using <span class="codeInline">bgAlpha</span>. It also comes as background color of the pre loader state like when messages like "<span class="codeInline">Loading chart</span>", "<span class="codeInline">retrieving data</span>" "<span class="codeInline">No data to display</span>", etc. The format followed is: Hexcoded <span class="codeInline">#RRGGBB</span> color, for example, "<span class="codeInline">#ff0000</span>"</td>
</tr>
<tr>
<td valign="top" class="codeInline">scaleMode</td>
<td valign="top" class="text">"noScale"/"exactFit"/ "noBorder"/"showAll"</td>
<td valign="top" class="text">No</td>
<td valign="top" class="text">"noScale" - this mode is set by default. It is also recommended to use this mode<br />
"exactFit" - this mode scales the chart to fit the container exactly with width and height (causes distortion in some cases)<br />
"noBorder" - this mode causes constrained scaling. (not recommended at all)<br />
"showAll" - (not recommended)</td>
</tr>
<tr>
<td valign="top" class="codeInline">lang</td>
<td valign="top" class="text">String - "true"/"false"</td>
<td valign="top" class="text">No</td>
<td valign="top" class="text">Language. The only available language is English (EN).</td>
</tr>
</table> <p>Most of these attributes are similar to the attributes expected by <span class="codeInline">fc:render</span> tag. There are several ways in which the data can be provided to the chart. Here, we saw two ways one using <span class="codeInline">xmlUrl</span> attribute and the other using tag body. To get a complete list of attributes that can be used to provide data, please see the <a href="jsp-taglib-doc/index.html" target="_blank">tag description page.</a></p>
<p class="highlightBlock">The above example shows how you can load data using <span class="codeInline">Data URL</span> method. You can always use <span class="codeInline">Data String </span>method to pass XML as string using <span class="codeInline">xmlData</span> attribute of <span class="codeInline">renderHTML</span> tag.</p></td></tr>
<tr>
<td class="header">
<a name="js" id="js"></a>Creating pure JavaScript charts</td></tr>
<tr>
<td valign="top" class="text">
<p>FusionCharts XT allows you to create pure JavaScript-only charts that does not require Flash, hence enabling your chart in browsers where Flash is not supported like that of iPhone/iPad etc. This is achieve by setting the renderer <span class="codeInline"></span> attribute in <span class="codeInline">fc:render</span> tag as "javascript".</p>
<p>The code snippet below shows how you can achieve this:</p>
<pre class="code_container prettyprint"><fc:render chartId="${chartData.chartId}" swfFilename="${folderPath}${chartData.swfFilename}"
width="${chartData.width}" height="${chartData.height}" debugMode="false"
registerWithJS="true" xmlUrl="${chartData.url}" renderer="javascript"/></pre>
<p>The above code will create pure-JavaScript FusionCharts as shown in the image below:</p>
<p><img src="../../guide-for-web-developers/Images/code/php/basic_purejs.jpg" alt="FusionCharts pure JavaScript chart" width="587" height="271" class="imageBorder"/> </p></td></tr>
<tr>
<td class="header"><a name="json" id="json"></a>Using JSON data to create chart</td></tr>
<tr>
<td valign="top" class="text">
<p>You can provide the chart data in JSON format. You need to use the jsonUrl and jsonData attributes of the <span class="codeInline">fc:render</span> tag or provide the data as part of the body of the tag and also provide the <span class="codeInline">dataFormat</span> attribute. ("jsonurl" or "json") .</p>
<p class="text">The code snippets below illustrate how you can do these: </p>
<p class="text"><strong>Using jsonUrl : </strong></p>
<pre class="code_container prettyprint"> <fc:render chartId="${chartData.chartId}"
swfFilename="${folderPath}${chartData.swfFilename}"
width="${chartData.width}" height="${chartData.height}"
debugMode="false" registerWithJS="false"
jsonUrl="${chartData.jsonUrl}">
</fc:render></pre>
<p class="text"><strong>Using jsonData: </strong></p>
<pre class="code_container prettyprint"><fc:render chartId="${chartData.chartId}"
swfFilename="${folderPath}${chartData.swfFilename}"
width="${chartData.width}" height="${chartData.height}"
debugMode="false" registerWithJS="false" dataFormat="json">
{ "chart": { "caption" : "Monthly Unit Sales",
"xAxisName":"Month",
"yAxisName":"Units",
"showValues":"0",
"formatNumberScale":"0",
"showBorder":"1" },
"data": [
{"label":"Jan","value":"462"},
{"label":"Feb","value":"857"},
{"label":"Mar","value":"671"},
{"label":"Apr","value":"494"},
{"label":"May","value":"761"},
{"label":"Jun","value":"960"},
{"label":"Jul","value":"629"},
{"label":"Aug","value":"622"},
{"label":"Sep","value":"376"},
{"label":"Oct","value":"494"},
{"label":"Nov","value":"761"},
{"label":"Dec","value":"960"}
]
}
</fc:render></pre>
<p>FusionCharts XT needs JSON to be passed in a specific format. Please read the <strong>FusionCharts XT Data Formats > <a href="../../DataFormats/JSON/Overview.html">JSON</a></strong> section for more on this. </p>
<p class="highlightBlock">Please note that JSON data format is not supported in the <span class="codeInline">fc:render</span> HTML tag. </p>
</td></tr>
<tr>
<td class="header"><a name="multiple" id="multiple"></a>Creating multiple charts in a single page</td></tr>
<tr>
<td valign="top" class="text"><p>Creating multiple charts in a page is as easy as creating a single chart. The code below shows how you can use <span class="codeInline">renderChart </span>tag and create as many charts as you wish. </p>
<p>All you need to take care is that you should set unique chart ID to each chart as highlighted in bold below: </p>
<pre class="code_container prettyprint"><fc:render <strong>chartId="${chartData.chartId}"</strong> swfFilename="${folderPath}${chartData.swfFilename}"
width="${chartData.width}" height="${chartData.height}" debugMode="false"
registerWithJS="false" xmlUrl="${chartData.url}" /><BR><BR>
<%-- Now, create a Column2D Chart--%>
<fc:render <strong>chartId="${chartData.uniqueId}"</strong> swfFilename="${folderPath}${col2dChart}"
width="${chartData.width}" height="${chartData.height}" debugMode="false"
registerWithJS="false" xmlUrl="${chartData.url}" />
<BR>
<BR>
<%-- Now, create a Line2D Chart --%>
<fc:render<strong> chartId="${chartData.uniqueId}"</strong> swfFilename="${folderPath}${lineChart}"
width="${chartData.width}" height="${chartData.height}" debugMode="false"
registerWithJS="false" xmlUrl="${chartData.url}" /></pre>
<p>As seen in the above code snippet, in order to place multiple charts in a page, we need to provide unique <span class="codeInline">chartId</span> values for each chart.</p>
<p>If we are using the <span class="codeInline">BasicRenderData</span> bean class to render data using the charts, then the <span class="codeInline">getUniqueId</span> attribute of this bean is defined as follows:</p>
<pre class="code_container prettyprint">/**
* Returns a UniqueId
*
* @return the uniqueId
*/
public String getUniqueId() {
int randomNum = (int) Math.floor(Math.random() * 100);
uniqueId = "Chart" + "_" + randomNum;
return uniqueId;
}</pre>
<p>This ensures that a unique ID is generated and returned for each chart. This is a very simple code for generating unique ids using random number generation. You can use more complex code for achieving better IDs.</p>
</td></tr>
<tr>
<td class="header"><a name="transparent" id="transparent"></a>Creating transparent chart</td></tr>
<tr>
<td valign="top" class="text">
<p>You can create charts with transparent backgrounds. This makes the chart show to what lies below it in HTML. To do this you need to do follow these steps:</p>
<ol>
<li>In the chart's XML data, set <span class="codeInline"><chart ... bgAlpha='0,0' ..></span></li>
<li>In the <span class="codeInline">renderChart</span>/<span class="codeInline">renderChartHTML </span>tag, set the <span class="codeInline">windowMode</span> attribute to <span class="codeInline">transparent</span>. </li>
</ol>
<p>Below is a sample code with a chart having transparent background :</p>
<pre class="code_container prettyprint"><div style="padding:40px; background-color:#9d7fbd; border:1px solid #745C92; width: 600px;">
<c:catch var="fcTagError">
<fc:render chartId="${chartData.chartId}" swfFilename="${folderPath}${chartData.swfFilename}"
width="${chartData.width}" height="${chartData.height}" debugMode="false"
registerWithJS="false" <strong>windowMode="transparent"</strong>>
<chart <strong>bgAlpha='0,0' canvasBgAlpha='0' </strong>caption='Monthly Unit Sales' xAxisName='Month'
yAxisName='Units' showValues='0' formatNumberScale='0' showBorder='1' >
<set label='Jan' value='462' />
<set label='Feb' value='857' />
<set label='Mar' value='671' />
</chart>
</fc:render>
</c:catch>
</div>
<c:if test="${not empty fcTagError}">
Tag Error: <br/>${fcTagError}
</c:if></pre>
<p>In the code above we have :</p>
<ul>
<li>Created a DIV with purple background -<span class="codeInline">background-color:#9d7fbd;</span></li>
<li>We build a string XML for chart having an attribute <span class="codeInline">bgAlpha='0,0'</span> and <span class="codeInline">canvasBgAlpha='0'</span></li>
<li>We render the chart with these settings inside that DIV</li>
</ul>
<p>The chart will look as shown below. The purple color of the DIV below the chart is visible through the body of the transparent chart.</p>
<p><img src="../../guide-for-web-developers/Images/code/php/transparentchart.jpg" alt="FusionCharts pure JavaScript chart" width="657" height="357" /> </p>
</td></tr>
<tr>
<td class="header"><a name="managedprint" id="managedprint"></a>Setting managed printing for Mozilla browsers</td></tr>
<tr>
<td valign="top" class="text">
<p>FusionCharts XT provides for a better-print feature for all Mozilla, WebKit, and Gecko based browsers like Firefox, Safari, etc. To enable this feature in JSP all you need to do is use the tag as shown below once in your page(preferably at the beginning or the end). </p>
<pre class="code_container prettyprint"><fc:printManager enabled="true"></fc:printManager></pre>
<p> This will enable the Print Manager to process print data from all the charts in a page and prepare the charts for better-quality printing. To read more on how Print Manager works, please go through <a href="../../JavaScript/JS_PrintManager.html">this</a>. </p>
<p class="highlightBlock"><strong>Note:</strong> Print Manager works only in browsers that supports canvas object.</p>
</td></tr>
<tr>
<td class="header">Listening to Print Manager status using JavaScript</td></tr>
<tr>
<td valign="top" class="text">
<p>Print Manager takes a bit of time to prepare all charts present in a page for print. You can listen to Print Manager's Ready State event using FusionCharts JavaScript class. Once the charts are ready, which can be tracked by listening to an event raised by the Print Manager, you can use browser's File → Print menu, JavaScript's native <span class="codeInline">window.print() </span>function or Print Manager's advanced function - <span class="codeInline"><a href="../../JavaScript/API/Methods.html#managedprint">managedPrint()</a></span>. The JavaScript code below shows how you can listen to the event and prepare for print:</p>
<pre class="code_container prettyprint"><html>
...
<body>
<script type="text/javascript"><!--
<strong> </strong>
FusionCharts.addEventListener (
<strong> FusionChartsEvents.PrintReadyStateChange ,
</strong> function (identifier, parameter) {
if(parameter.ready){
alert("Chart is now ready for printing.");
document.getElementById('printButton').disabled = false;
}
});
// --></script>
<input type="button" onclick="<strong>FusionCharts.printManager.managedPrint()</strong>"
value="Managed Print" disabled="disabled" id="printButton" >
...
</body>
</html></pre>
<p>In the above code we have:</p>
<ul>
<li>Added a JavaScript event-listener for the global event <span class="codeInline"><a href="../../JavaScript/API/Events.html#printreadystatechange">PrintReadyStateChange</a> </span>to the global JavaScript object <span class="codeInline">- <a href="../../JavaScript/API/Methods.html#staticfusioncharts">FusionCharts</a></span></li>
<li>Added a "Managed Print" button which will call <span class="codeInline">FusionCharts.printManager.managedPrint()</span>. The button is disabled when loaded. </li>
<li>When the event is fired, it provides the listener with event arguments. The <span class="codeInline">parameters</span> event argument contains a property <span class="codeInline">ready</span>. This returns <span class="codeInline">true </span>when the Print Manager is ready to print all charts in a page</li>
<li>Hence, in this event we can show the information alert and also enable the button, which was disabled prior to this. </li>
</ul>
<p>Now, if you try printing from File → Print menu or using a button or function that call the <span class="codeInline">window.print()</span> function. You can also click "Managed Print" button to print the chart. </p>
<div class="highlightBlock"><strong>How Print Manager Works: </strong>
<ul>
<li>Once a chart is rendered, it silently gathers all the image data of the present state of the chart </li>
<li>It converts the image data into image using canvas HTML object </li>
<li>It hides the canvas image below the chart </li>
<li>When print is invoked, a parallel CSS based print media layout (using @media print ) is created </li>
<li>In this print media layout, the Flash chart is hidden and the canvas image is displayed </li>
<li>This layout with the canvas image is sent to the printer for print</li>
</ul></div>
</td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("Using with J2EE|JSP_GettingStarted.html","Charting data from Array|JSP_Array.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>