|
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/FirstChart/ |
Upload File : |
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Using XML data embedded in HTML page</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", "Creating your first chart|FirstChart.html", "Using XML embedded in the page" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">Using XML data embedded in HTML page</td>
</tr>
<tr>
<td valign="top" class="text">
<p>In our previous examples, we had created charts by providing chart data through an external XML file. Here, we'll show you how to embed the XML directly into an HTML page.</p>
<p class="highlightBlock">In our previous examples, we had used the JavaScript function <span class="codeInline">setXMLUrl()</span> to provide URL of the XML file to the chart. Hence, the term <strong><a href="../guide-for-web-developers/how-fusioncharts-works/DataURL.html">Data URL method</a></strong> is used for referring to the technique used earlier. <br />
<br />
Here, we will use the <span class="codeInline">setXMLData() </span>function which takes XML embedded as string from the JavaScript. We call it <strong><a href="../guide-for-web-developers/how-fusioncharts-works/DataXMLExp.html">Data String method</a></strong>. <br />
<br />
<strong>Existing users :</strong> You might be wondering what happened to the functions like <span class="codeInline">setDataURL()</span> and <span class="codeInline">setDataXML()</span> which you have already been using in your application. Yes - although deprecated, these will continue to work without any problem.</p>
</td>
</tr>
<tr>
<td valign="top" class="text">Create a copy of <span class="codeInline">weekly-sales.html</span>
and save it as <span class="codeInline">weekly-sales-xml-embed.html</span>. Next, modify the code as shown below:<br /><br /></td>
</tr>
<tr>
<td valign="top" class="text">
<pre class="code_container prettyprint lang-html"><html>
<head>
<title>My First chart using FusionCharts XT -
using XML data embedded in the page</title>
<script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>
</head>
<body>
<div id="chartContainer">FusionCharts XT will load here</div>
<script type="text/javascript"><!--
var myChart = new FusionCharts("FusionCharts/Column3D.swf",
"myChartId", "400", "300", "0");
myChart.<strong>setXMLData("<chart caption='Weekly Sales Summary' xAxisName='Week' " +
"yAxisName='Sales' numberPrefix='$'>" +
"<set label='Week 1' value='14400' />" +
"<set label='Week 2' value='19600' />" +
"<set label='Week 3' value='24000' />" +
"<set label='Week 4' value='15700' />" +
"</chart>");</strong>
myChart.render("chartContainer");
// -->
</script>
</body>
</html></pre>
<br />See it <a href="../../Code/MyFirstChart/weekly-sales-xml-embed.html" target="_blank">live</a>!</td>
</tr>
<tr>
<td valign="top" class="text">
<p>In the above code, we have provided the entire XML data as a string inside the code itself and passed it to the chart using the <span class="codeInline">setXMLData()</span> method. </p>
<p>There are certain pointers to be kept in mind when using the Data String method: </p>
<ul>
<li>If you use double quotation marks for specifying string parameters in JavaScript, use single quotes to specify attribute values in the XML. Else, it will result in a syntax error. </li>
<li>If an XML attribute has single quotation mark (') or double quotation marks (") as part of its value, encode them as XML entities. The encoded form of single quotation mark (') is <span class="codeInline">&apos;</span> and the encoded form of double quotation marks (") is <span class="codeInline">&quot;</span>.</li>
<li>If you have special characters like <span class="codeInline"><strong>&</strong></span>, <span class="codeInline"><strong><</strong></span>, and <span class="codeInline"><strong>></strong></span> in your XML, you must encode them as <span class="codeInline">&amp;</span>, <span class="codeInline">&lt;</span> and <span class="codeInline">&gt;</span> (respectively) in your XML String. </li>
</ul>
<p class="highlightBlock"><strong>Existing Users: </strong>Prior to v3.2, while using this method, you will need to encode various characters. Since v3.2, except for a few characters listed in <a href="../advanced/special-chars/SpCharAll.html">Using Currency Symbols</a> and <a href="../advanced/special-chars/SpPunctuation.html">Using Special Punctuation</a> pages (from <span class="codeInline">Advanced Charting > Using Special Characters</span> section), no character is required to be encoded while using this process. The new FusionCharts JavaScript class takes care of everything.</p>
</td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("Using JSON data instead of XML|JSONData.html","Changing chart type|ChangeChart.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>