|
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>Creating your First Multi-Series & Stacked Charts</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", "Creating Multi-Series & Stacked charts" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">Creating your First Multi-Series & Stacked Charts</td>
</tr>
<tr>
<td valign="top" class="text">
<p>In our <a href="FirstChart.html">previous example</a>, we have seen how to create a chart using single series of data. We might want to compare the sales data for two different products. The comparison can be achieved using a <a href="../Introduction/ChartList.html#ms">Multi-Series</a> chart which can accept multiple sets of data. Here, we will see how to build a simple Multi-Series 3D column chart comparing the "Weekly Sales Summary" for two products. Once completed, the chart will look as under: </p>
<img src="Images/FirstMultiSeriesChart.jpg" alt="First Chart - Weekly Sales" width="382" height="285" class="imageBorder" />
<div style="height: 25px; line-height: 25px;"></div>
Follow the steps below to create a Multi-series chart:<br />
<ol>
<li>Create a folder <span class="codeInline">LearningFusionCharts</span> on your hard-drive. We will use this folder as the root folder for building all FusionCharts XT examples. </li>
<li>Create a folder named <span class="codeInline">MyFirstChart</span> inside the above folder. Inside the <span class="codeInline">MyFirstChart</span> folder, create a folder named<span class="codeInline"> FusionCharts</span>. </li>
<li>Copy <span class="codeInline">MSColumn3D.swf</span> from <span class="codeInline">Download Pack > Charts </span>folder to the <span class="codeInline">FusionCharts</span> folder</li>
<li>Copy <span class="codeInline">FusionCharts.js, FusionCharts.HC.js, FusionCharts.HC.Charts.js,</span> and <span class="codeInline">jquery.min.js</span> files from <span class="codeInline">Download Pack > Charts</span> folder to the <span class="codeInline">FusionCharts</span> folder</li>
<li> Create an XML file in <span class="codeInline">MyFirstChart</span> folder with name <span class="codeInline">MSData.xml</span>. The data used to show the comparison of Weekly sales for two products is given below in the table:<br /><br/>
<table width="460" height="182" border="0" cellpadding="5" cellspacing="5" class="table">
<tr class="header">
<td width="118" class="header">Week</td>
<td width="159" align="right" class="header"> Product A </td>
<td width="131" align="right" class="header">Product B </td>
</tr>
<tr class="text">
<td>Week 1 </td>
<td align="right"> $14,400 </td>
<td align="right"> $12,000</td>
</tr>
<tr class="text">
<td>Week 2 </td>
<td align="right"> $19,600 </td>
<td align="right"> $15,000</td>
</tr>
<tr class="text">
<td>Week 3 </td>
<td align="right">$24,000</td>
<td align="right">$20,000</td>
</tr>
<tr class="text">
<td>Week 4 </td>
<td align="right"> $15,700 </td>
<td align="right">$11,000</td>
</tr>
</table><br />
</li>
<li> <a name="xml" id="xml"></a>Create the code given below, which is the <em>XML-lized</em> form of the sales data shown in the table (above). Copy the XML code to <span class="codeInline">MSData.xml</span> file. To know how the XML data for Multi-Series Charts is formatted please read <a href="../DataFormats/XML/MultiSeries.html">Multi-Series Chart XML</a><br />
<br />
<table width="504" cellpadding="0" border="0">
<tr>
<td class="text" valign="top" width="500">
<pre class="code_container prettyprint lang-xml" ><chart caption='Weekly Sales Summary for two Products' xAxisName='Weeks' yAxisName='Amount' numberPrefix='$'>
<categories>
<category Label="Week1"/>
<category Label="Week2"/>
<category Label="Week3"/>
<category Label="Week4"/>
</categories>
<dataset seriesName="Product A">
<set value='14400' />
<set value='19600' />
<set value='24000' />
<set value='15700' />
</dataset>
<dataset seriesName="Product B">
<set value='12000' />
<set value='15000' />
<set value='20000' />
<set value='11000' />
</dataset>
</chart></pre>
</td>
</tr>
</table>
<p class="highlightBlock">Note that you can also provide chart data in JSON format. View an example of JSON data <a href="JSONData.html">here</a>. Or, to learn more about FusionCharts XT JSON data format, please go through <strong>FusionCharts XT data formats > <a href="../DataFormats/JSON/Overview.html">JSON</a></strong> section. </p>
</li>
<li><a name="html" id="html"></a>Create an HTML file <span class="codeInline">ms-weekly-sales.html</span> in the same folder and copy-paste the code given below:<br />
<br />
<pre class="code_container prettyprint lang-html"><html>
<head>
<title>My First chart using FusionCharts</title>
<script type="text/javascript" src="<strong>FusionCharts/FusionCharts.js"</strong>>
</script>
</head>
<body>
<div id="<strong>chartContainer</strong>">FusionCharts XT will load here!</div>
<script type="text/javascript"><!--
<strong> var myChart = new FusionCharts( "FusionCharts/MSColumn3D.swf",
"myChartId", "400", "300", "0" );
myChart.setXMLUrl("MSData.xml");
myChart.render("chartContainer");
</strong>
// -->
</script>
</body>
</html></pre>
</li>
</ol>
<p>Open the file <span class="codeInline">ms-weekly-sales.html</span> in a Web browser and you will see an animated Multi-Series Column 3D chart similar to the one below:</p>
<img src="Images/FirstMultiSeriesChart.jpg" alt="First Chart - Weekly Sales" class="imageBorder" />
<p>See it <a href="../../Code/MyFirstChart/ms-weekly-sales.html" target="_blank">live</a>!</p>
<p class="highlightBlock">Code examples discussed in this section are present in <span class="codeInline">Download Package > Code > MyFirstChart</span> folder.</p> </td>
</tr>
<tr>
<td valign="top" class="header"><a name="Stacked"></a>Creating a Stacked Chart</td>
</tr>
<tr>
<td class="text"><p>If you want to group the data into cumulative stacks, you will just need to change the chart type to Stacked Column chart. The HTML file for a Stacked Column chart will look as under:</p> </td></tr>
<tr>
<td>
<pre class="code_container prettyprint lang-html"><html>
<head>
<title>My First chart using FusionCharts</title>
<script type="text/javascript" src="<strong>FusionCharts/FusionCharts.js"</strong>>
</script>
</head>
<body>
<div id="<strong>chartContainer</strong>">FusionCharts XT will load here!</div>
<script type="text/javascript"><!--
var myChart = new FusionCharts( "FusionCharts/<strong>StackedColumn3D.swf</strong>",
"myChartId", "400", "300", "0" );
myChart.setXMLUrl("MSData.xml");
myChart.render("chartContainer");
// -->
</script>
</body>
</html></pre>
</td></tr>
<tr>
<td class="text"><p class="highlightBlock">The modified HTML file can be found in <span class="codeInline">Download Package > Code > MyFirstChart > stacked-weekly-sales.html</span>.
</p></td></tr>
<tr>
<td class="text">In the above code, we have only changed the name of the SWF file from <span class="codeInline">MSColumn3D.swf</span> to <span class="codeInline">StackedColumn3D.swf </span>(please copy <span class="codeInline">StackedColumn3D.swf</span> file from <span class="codeInline">Charts</span> folder of the<span class="codeInline"> Download Pack</span>). Open the HTML file in a Web browser. The chart will look like as under: <br/>
<br/></td>
</tr>
<tr>
<td><img src="Images/StackedChart.jpg" width="381" height="280" class="imageBorder"/><br/>
<br/>
See it <a href="../../Code/MyFirstChart/stacked-weekly-sales.html" target="_blank">live</a>!</td></tr>
<tr>
<td valign="top" class="text">
<p class="highlightBlock"><strong>What happens if Flash player is not available?</strong><br />
<br/>
In case Flash Player is not available on certain devices (like iPad and iPhone), FusionCharts JavaScript library automatically renders the same chart using JavaScript. If you are running the sample from local file system, please note that you will need to provide the data using <a href="../guide-for-web-developers/how-fusioncharts-works/DataXMLExp.html">Data String method</a>, that is, passing the data (XML/JSON) to the chart as String or JSON Object. Many browsers restrict JavaScript from accessing local file system owing to security reasons. In the above example, since you had provided data as a URL, the JavaScript charts will not be able to access the same, when running locally. If you run the files from a server, it will run absolutely fine, though. When running locally, however, if you provide the data as string (using the <a href="../guide-for-web-developers/how-fusioncharts-works/DataXMLExp.html">Data String method</a>), it works fine. </p>
</td>
</tr>
<tr>
<td valign="top" class="header"><a name="trouble"></a>Troubleshooting</td>
</tr>
<tr>
<td valign="top" class="text"><p>If for any reason, you do not see a chart, run through the following checks:</p>
<p>If you see an endless loading progress bar in your browser, or if the
right click menu (right click at the place where the chart is supposed
to be) shows "<strong>Movie not loaded</strong>",
check the following:</p>
<ul>
<li>Whether you pasted the chart SWF files in <span class="codeInline">FusionCharts </span><span class="text">folder of </span><span class="codeInline">MyFirstChart</span> folder?</li>
<li>Whether you provided the SWF path properly in your <span class="codeInline">HTML</span> page?</li>
<li>Do you have Adobe Flash Player 8 (or above) installed for this
browser?</li>
<li>Whether you enabled your browser to show Active X and Plugin controls?
Normally, all browsers are Flash-enabled, but sometimes security settings can disable execution of Active X and Plugin controls. </li>
</ul>
<p>If you get an "<strong>Error in Loading Data</strong>" message, check the following:</p>
<ul>
<li>Whether <span class="codeInline">XML file </span> is in the same folder
as the HTML file?</li>
<li>Whether <span class="codeInline">XML file </span> is named as <span class="codeInline">Data.xml</span> and not <span class="codeInline">Data.xml.txt</span>? (as many basic
text editors append <span class="codeInline">.txt</span> after the file name)</li>
</ul>
<p>If you get an "<strong>Invalid XML Data</strong>" message, it means that the
XML data document is malformed. Check it again for common errors like:</p>
<ul>
<li>Difference in case of tags. <span class="codeInline"><chart></span> should end with <span class="codeInline"></chart></span> and <strong>not</strong> <span class="codeInline"></Chart></span> or<span class="codeInline"> </CHART></span></li>
<li>Missing opening/closing quotation marks for any attributes, for example, <span class="codeInline"><chart caption=Weekly Sales Summary' </span>should
be <span class="codeInline"><chart caption='Weekly Sales Summary'</span></li>
<li>Missing closing tag for any element.</li>
</ul>
<p>To check whether your final XML is correct, open it in your browser and you will see the error.</p>
<p>If only the text "<strong>FusionCharts XT will load here!</strong>" is displayed, check with the following:</p>
<ul>
<li>Whether you pasted the <span class="codeInline">FusionCharts.js</span>, <span class="codeInline">jquery.min.js</span> , <span class="codeInline">FusionCharts.HC.js </span>and<span class="codeInline"> FusionCharts.HC.Charts.js</span> files in <span class="codeInline">FusionCharts</span> folder of <span class="codeInline">MyFirstChart</span> folder?</li>
<li>Whether you included and provided the path of <span class="codeInline">FusionCharts.js</span> properly in your <span class="codeInline">HTML</span> page?</li>
<li>Are there any JavaScript syntax or runtime errors that might have halted the execution of FusionCharts functions?</li>
<li>Whether you have given different names for the chart's JavaScript variable and chart's ID?</li>
</ul> </td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("Changing chart dimensions|ChangeSize.html","Creating Combination chart|FirstCombinationChart.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>