|
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 Scatter & Bubble 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 Scatter & Bubble chart" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">Creating your First Scatter & Bubble Chart</td>
</tr>
<tr>
<td valign="top" class="text">
<p>In previous examples, we have learned how to create <a href="FirstChart.html">Single series</a>, <a href="FirstMultiSeriesChart.html">Multi series</a>, <a href="FirstMultiSeriesChart.html#Stacked">Stacked</a> and <a href="FirstCombinationChart.html">Combination</a> charts using the Sales Comparison data. Now, we will create two different kinds of charts namely, Scatter and Bubble charts.
</p>
</td></tr>
<tr><td class="header"><a name="scatter"></a>Creating a Scatter Chart</td></tr>
<tr>
<td class="text"><p>The XY or Scatter chart is used when there are two interdependent parameters to be shown on a chart. For example, to understand the variation of rainfall with temperature, the XY chart is an ideal choice. We have used data comparing the performance level of two servers. For our example, we will compare the performance level of two servers. We will compare the Response Time (in secs) vs. the Server Load (TPS). The final chart will look as under:</p>
<img src="Images/ScatterChart.jpg" alt="First Chart - Weekly Sales" width="394" height="296" class="imageBorder" />
<p>Follow the steps below to create a Scatter chart:</p>
<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">Scatter.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 the <span class="codeInline">MyFirstChart</span> folder with name <span class="codeInline">ScatterData.xml</span>. The data used to compare the performance of two servers is given below in the table:<br />
<br/>
<table cellspacing="0" cellpadding="5" class="table"width="624" >
<tr style="border-bottom:1px solid #cccccc;">
<td height="24" colspan="2" align="center" class="header"> Server 1 </td>
<td colspan="2" align="center" class="header"> Server 2</td>
</tr>
<tr>
<td height="24" align="right"class="headerwhite"><span class="textBold">Server Load(TPS)</span></td>
<td align="right"class="headerwhite"><span class="textBold">Response Time(Sec)</span></td>
<td align="right"class="headerwhite"><span class="textBold">Server Load(TPS)</span></td>
<td align="right"class="headerwhite"><span class="textBold">Response Time(Sec)</span></td>
</tr>
<tr>
<td width="10%" height="24" align="right"class="borderBottom">21</td>
<td width="15%" align="right"class="borderBottom">2.4</td>
<td width="10%" align="right"class="borderBottom">23</td>
<td width="14%" align="right"class="borderBottom">1.4</td>
</tr>
<tr>
<td height="24" align="right"class="borderBottom">32</td>
<td align="right"class="borderBottom">3.5</td>
<td align="right"class="borderBottom">29</td>
<td align="right"class="borderBottom">1.5</td>
</tr>
<tr>
<td height="24" align="right" class="borderBottom">43</td>
<td align="right" class="borderBottom">2.5</td>
<td align="right" class="borderBottom">33</td>
<td align="right" class="borderBottom">1.5</td>
</tr>
<tr>
<td height="24" align="right" class="borderBottom">48</td>
<td align="right" class="borderBottom">4.1</td>
<td align="right" class="borderBottom">41</td>
<td align="right" class="borderBottom">1.1</td>
</tr>
</table><br /></span></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">ScatterData.xml</span> file. To know how the XML data for XY plot chart is formatted please read <a href="../DataFormats/XML/ScatterBubble.html">Scatter & Bubble Chart XML</a><br />
<br />
<pre class="code_container prettyprint lang-xml" ><chart palette='2' caption='Server Performance' yAxisName='Response Time (sec)' xAxisName='Server Load (TPS)' yAxisMaxValue='7'>
<dataset seriesName='Server 1' color='009900' anchorSides='3' anchorRadius='4' anchorBgColor='D5FFD5' anchorBorderColor='009900'>
<set y='2.4' x='21' />
<set y='3.5' x='32' />
<set y='2.5' x='43' />
<set y='4.1' x='48' />
</dataset>
<dataset seriesName='Server 2' color='0000FF' anchorSides='4' anchorRadius='4' anchorBgColor='C6C6FF' anchorBorderColor='0000FF'>
<set y='1.4' x='23'/>
<set y='1.5' x='29'/>
<set y='1.5' x='33'/>
<set y='1.1' x='41'/>
</dataset>
</chart></pre>
<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">server-performance.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"><!--
<strong> var myChart = new FusionCharts( "FusionCharts/Scatter.swf",
"myChartId", "400", "300", "0" );
myChart.setXMLUrl("ScatterData.xml");
myChart.render("chartContainer");
</strong>
// -->
</script>
</body>
</html></pre>
</li>
</ol>
<p>Open the file <span class="codeInline">server-performance.html</span> in a Web browser and you will see an animated Scatter chart similar to the one below:</p>
<img src="Images/ScatterChart.jpg" alt="First Chart - Weekly Sales" width="394" height="296" class="imageBorder" />
<p>See it <a href="../../Code/MyFirstChart/server-performance.html" target="_blank">live</a>!</p>
</td>
</tr>
<tr>
<td class="header"><a name="bubble"></a>Creating a Bubble Chart</td>
</tr>
<tr><td class="text">
<p>The bubble chart is used when there are three inter-dependent numeric parameters to be shown on a chart. For example, you can use the bubble chart to manage your investments better with age of the investments, its return on investment and the amount invested as the three parameters you plot. We will create a simple bubble chart that looks as under:</p>
<img src="Images/BubbleChart.jpg" alt="First Chart - Weekly Sales" width="395" height="294" class="imageBorder" />
<p>Follow the steps below to create a Bubble chart:</p>
<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">Bubble.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 the <span class="codeInline">MyFirstChart</span> folder with name <span class="codeInline">BubbleData.xml</span>The data used here is to analyze age of the investment, return on investment and the amount invested in Equities and Mutual funds. <br/>
<br/>
<table cellspacing="0" cellpadding="5" class="table"width="649" >
<tr style="border-bottom:1px solid #cccccc;">
<td height="24" colspan="3" align="center" class="header"><span class="">Equities</span></td>
<td colspan="3" align="center" class="header">Mutual Funds</td>
</tr>
<tr>
<td width="20%" height="24" align="right"class="headerwhite"><span class="textBold">Age of Investment (Years) </span></td>
<td width="15%" align="right"class="headerwhite"><span class="textBold">Return on Investment </span></td>
<td width="15%" align="right"class="headerwhite"><span class="textBold">Amount Invested </span></td>
<td width="20%" align="right"class="headerwhite"><span class="textBold">Age of Investment (Years) </span></td>
<td width="15%" align="right"class="headerwhite"><span class="textBold">Return on Investment </span></td>
<td width="15%" align="right"class="headerwhite"><span class="textBold">Amount Invested</span></td>
</tr>
<tr>
<td height="24" align="right"class="borderBottom">1.5</td>
<td align="right"class="borderBottom">20</td>
<td align="right"class="borderBottom">15000</td>
<td align="right"class="borderBottom">3.5</td>
<td align="right"class="borderBottom">25</td>
<td align="right"class="borderBottom">15000</td>
</tr>
<tr>
<td height="24" align="right" class="borderBottom">4.5</td>
<td align="right" class="borderBottom">75</td>
<td align="right" class="borderBottom">10000</td>
<td align="right" class="borderBottom">8.5</td>
<td align="right" class="borderBottom">10</td>
<td align="right" class="borderBottom">10000</td>
</tr>
<tr>
<td height="24" align="right" class="borderBottom">6</td>
<td align="right" class="borderBottom">105</td>
<td align="right" class="borderBottom">30000</td>
<td align="right" class="borderBottom">8.5</td>
<td align="right" class="borderBottom">75</td>
<td align="right" class="borderBottom">16000</td>
</tr>
<tr>
<td height="24" align="right">7</td>
<td align="right">70</td>
<td align="right">16000</td>
<td align="right"> </td>
<td align="right"> </td>
<td align="right"> </td>
</tr>
<tr>
<td height="24" align="right">8</td>
<td align="right">20</td>
<td align="right">15000</td>
<td align="right"> </td>
<td align="right"> </td>
<td align="right"> </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">BubbleData.xml</span> file. To know how the XML data for XY plot chart is formatted please read <a href="../DataFormats/XML/ScatterBubble.html">Scatter & Bubble Chart XML</a><br />
<br /></li><pre class="code_container prettyprint lang-xml" ><chart caption='Investments - Equities & Mutual Funds' subCaption='Size of bubbles show magnitude of investment' yAxisName='Return on Investment'
xAxisName='Age of Investment(Years)' yNumberSuffix='%' yAxisMaxValue='150' xAxisLabelDisplay='auto' numVDivLines='9' >
<dataset seriesName='Equities' >
<set y='20' x='1.5' z='15000' />
<set y='75' x='4.5' z='10000' />
<set y='105' x='6' z='30000' />
<set y='70' x='7' z='16000' />
<set y='20' x='8' z='15000' />
</dataset>
<dataset seriesName='Mutual Funds' >
<set y='25' x='3.5' z='15000'/>
<set y='10' x='8.5' z='10000'/>
<set y='75' x='8.5' z='16000'/>
</dataset>
</chart></pre>
<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">investment-analysis.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"><!--
<strong> var myChart = new FusionCharts( "FusionCharts/Bubble.swf",
"myChartId", "400", "300", "0" );
myChart.setXMLUrl("BubbleData.xml");
myChart.render("chartContainer");
</strong>
// -->
</script>
</body>
</html></pre>
</li>
</ol>
<p>Open the file <span class="codeInline">investment-analysis.html</span> in a Web browser and you will see an animated Bubble chart similar to the one below:</p>
<img src="Images/BubbleChart.jpg" alt="First Chart - Weekly Sales" width="395" height="294" class="imageBorder"/>
<p>See it <a href="../../Code/MyFirstChart/investment-analysis.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/>
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 have pasted the chart SWF files in the <span class="codeInline">FusionCharts </span><span class="text">folder of the </span><span class="codeInline">MyFirstChart</span> folder?</li>
<li>Whether you have 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 <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("Creating Combination chart|FirstCombinationChart.html","Creating multiple charts in a page|MultipleCharts.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>