|
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 Combination Chart</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 Combination chart" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">Creating your First Combination Chart</td>
</tr>
<tr>
<td class="text">
<p>In the <a href="FirstMultiSeriesChart.html">previous example</a>, we have seen sales comparison of two products using Multi-Series and Stacked charts. You might want to plot the data of individual products using different chart types on the same canvas. For example, the sales for Product A as Column chart and the sales for Product B as Area chart . In this example, we will see how to combine these two different charts into one canvas and represent the data. For this we will use a <a href="../Introduction/ChartList.html#combi">Combination chart</a>. We will use the same Sales comparison data for two products. The chart will look as under: </p>
<img src="Images/SingleYCombi.jpg" alt="First Chart - Weekly Sales" width="383" height="282" class="imageBorder"/> </td>
</tr>
<tr>
<td class="text">
<p>The data for the above chart is as under: (saved as <span class="codeInline">CombiData.xml</span>) </p></td></tr>
<tr>
<td class="text" valign="top" ><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" <strong>renderAs='Area'</strong>>
<set value='12000' />
<set value='15000' />
<set value='20000' />
<set value='11000' />
</dataset>
</chart></pre>
<br/></td>
</tr>
<tr>
<td class="text">The above data is same as that of the multi-series data. The only change made is in the second <span class="codeInline"><dataset></span> element. A new attribute <span class="codeInline">renderAs='area'</span> is included. This allows the chart to render the dataplot as Area. If nothing is specified, as for the dataset of Product A, Column chart will be plotted. For more details on this XML structure, please go through <strong>FusionCharts XT Data Format > XML > <a href="../DataFormats/XML/Combination.html#single">Combination Chart</a> </strong>page. <br/>
<br/></td></tr>
<tr>
<td class="text">In the HTML file we have changed the name of the SWF file from <span class="codeInline">MSColumn3D.swf</span> to <span class="codeInline">MSCombi2D.swf</span>. You need to copy <span class="codeInline">MSCombi2D.swf</span> file from <span class="codeInline">Charts</span> folder of the <span class="codeInline">Download Pack</span>. The HTML code to render the following data is as under:<br/>
<br/></td>
</tr>
<tr><td><pre class="code_container prettyprint lang-html"><html>
<head>
<title>My First chart using FusionCharts XT</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>MSCombi2D.swf</strong> ",
"myChartId", "400", "300", "0" );
myChart.setXMLUrl("CombiData.xml");
myChart.render("chartContainer");
// -->
</script>
</body>
</html></pre>
<br/></td></tr>
<tr>
<td class="header"><a name="multiple"></a>Creating Combination chart using Data with multiple units</td></tr>
<tr>
<td valign="top" class="text"><p>Now, we want to show a combination of weekly sales comparison along with total quantity of products sold in four weeks. The number of products sold will be represented by a line chart. The line chart will be plotted on the secondary axis with a different unit appearing on the right side of the chart. Here, we will need to use a <a href="../Introduction/ChartList.html#combidy">Dual Y Axis chart</a>. The chart will look as under:</p>
<img src="Images/CombiChart.jpg" alt="First Chart - Weekly Sales" width="477" height="327" class="imageBorder" />
<p>
Follow the steps below to create a combination chart:</p>
<ul>
<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">MSColumn3DLineDY.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</span>, <span class="codeInline">FusionCharts.HC.js</span>, <span class="codeInline">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">CombiDYData.xml</span>. The data used to show the comparison of Weekly revenue and total quantity for four weeks is given below in the table:<br />
<br/>
<table width="500" height="182" border="0" cellpadding="5" cellspacing="5" class="table">
<tr class="header">
<td class="header">Week</td>
<td align="right" class="header"> Revenue </td>
<td align="right" class="header">Quantity</td>
</tr>
<tr class="text">
<td>Week 1 </td>
<td align="right"> $26,400 </td>
<td align="right"> 160</td>
</tr>
<tr class="text">
<td>Week 2 </td>
<td align="right"> $34,600 </td>
<td align="right"> 190</td>
</tr>
<tr class="text">
<td>Week 3 </td>
<td align="right">$44,000</td>
<td align="right"> 20</td>
</tr>
<tr class="text">
<td>Week 4 </td>
<td align="right"> $26,700 </td>
<td align="right">160</td>
</tr>
</table>
<br />
<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">CombiDYData.xml</span> file.<br />
<br />
<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="Revenue">
<set value='26400' />
<set value='35600' />
<set value='44000' />
<set value='26700' />
</dataset>
<dataset <strong>seriesName='Total Quantity' ParentYAxis='s' </strong>showValues='0'>
<set value='160' />
<set value='190' />
<set value='220' />
<set value='160' />
</dataset>
</chart></pre>
<p><br />
In the above data, we have added a <span class="codeInline">dataset</span> with "Quantity" as <span class="codeInline">seriesName</span>. Also, we set this dataset to render on the Secondary y-axis using the <span class="codeInline">parentYAxis</span> attribute. The <span class="codeInline">parentYAxis</span> attribute allows you to set the parent axis of the dataset. The required value can be either <span class="codeInline">P</span> (primary axis) or <span class="codeInline">S</span> (secondary axis). By default, primary datasets are drawn against the left y-axis and the secondary against the right-axis. You can, however, chose to reverse that as well. For more details on this XML structure, please go through <strong>FusionCharts XT Data Format > XML > <a href="../DataFormats/XML/Combination.html#dual">Combination Chart</a> </strong>page. </p>
<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">combi-weekly-sales-quantity.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 XT</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>MSColumn3DLineDY.swf</strong>",
"myChartId", "400", "300", "0" );
myChart.setXMLUrl("CombiDYData.xml");
myChart.render("chartContainer");
// -->
</script>
</body>
</html></pre>
</li>
</ul>
<p>Open the file <span class="codeInline">combi-weekly-sales-quantity.html</span> in a Web browser and you will see an animated Combination chart similar to the one below:</p>
<img src="Images/CombiChart.jpg" alt="First Chart - Weekly Sales" class="imageBorder" />
<p>See it <a href="../../Code/MyFirstChart/combi-weekly-sales-quantity.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>
<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 the<span class="codeInline"> XML </span>file is in the same folder
as the HTML file?</li>
<li>Whether the <span class="codeInline">XML</span> file 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 the <span class="codeInline">FusionCharts</span> folder of the <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("Creating Multi-Series & Stacked charts|FirstMultiSeriesChart.html","Creating Scatter-Bubble chart|ScatterandBubbleChart.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>