|
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/Introduction/ |
Upload File : |
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JavaScript Charting capabilities </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>
<script type="text/javascript" src="../../Charts/FusionCharts.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|Overview.html", "Introduction", "JavaScript charting capabilities" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">JavaScript Charting capabilities </td>
</tr>
<tr>
<td valign="top" class="text">
<p>In FusionCharts XT, you can render the charts on devices where Flash player is not supported (like in iPhone or iPad), is not installed or is disabled using the built-in JavaScript rendering capabilities. The charts rendered by this module are purely using JavaScript and do not need Flash Player at all. </p>
<p>FusionCharts XT gives you the option of either using automatic fallback, wherein the charts figure out the best mode of rendering (either Flash or JavaScript, based on availability of Flash Player), or lets you configure whether to render charts exclusively using JavaScript. If you are already using FusionCharts XT and wish to add JavaScript fallback, you just need to replace the old SWF and JavaScript files with the new ones - without changing a single line of code. </p>
<p>In case you wish to render JavaScript charts only, irrespective of whether Flash Player is installed or not, all you need to do is add a single line of code to your existing implementation. This has been covered in <a href="../FirstChart/UsingPureJS.html#force">forthcoming sections</a>. Meanwhile, let's get a small overview of FusionCharts XT JavaScript charting capabilities. </p>
</td></tr>
<tr>
<td valign="top" class="header"><a name="how"></a>How it works?</td>
</tr>
<tr>
<td valign="top" class="text">
<p>FusionCharts XT features a completely new FusionCharts JavaScript class. FusionCharts JavaScript class now consists of four main files: <span class="codeInline">FusionCharts.js</span>,<span class="codeInline"> FusionCharts.HC.js, FusionCharts.HC.Charts.js</span> and<span class="codeInline"> jquery.min.js</span>. These four files are present in <span class="codeInline">Download Pack > Charts</span> folder. You will only need to include <span class="codeInline">FusionCharts.js</span> in your Web page (however, do not forget to copy the rest of files to your web application). The rest of the JavaScript files will be automatically loaded on-demand by <span class="codeInline">FusionCharts.js</span>. </p>
<p>Once FusionCharts class determines that Flash player is not available in the device, it automatically switches the rendering mode to JavaScript. If you wish to render the chart as JavaScript by default, you can <a href="../FirstChart/UsingPureJS.html#force">do this by setting the rendering method </a>to JavaScript from your code.</p>
</td>
</tr>
<tr>
<td ><table width="800" border="0" cellspacing="0" cellpadding="0" height="388" style="padding:0;margin:0;">
<tr>
<td width="500" style="background-image:url(../FirstChart/Images/iPad.jpg);background-repeat:no-repeat; background-position:bottom; height:388px; padding:0 0 40px 0;" height="388" align="center" valign="bottom" id="ipadChartLive"> </td>
<td width="300" style="background-image:url(../FirstChart/Images/iphone.jpg); background-repeat:no-repeat; background-position:bottom; height:388px;padding:0 0 44px 0;" height="388" align="center" valign="bottom" id="iphoneChartLive"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td valign="top" class="header"><a name="JSsupported_charts" id="JSsupported_charts"></a>Chart types supported </td>
</tr>
<tr>
<td valign="top" class="text"><p>Given below is the list of chart types supported by the FusionCharts JavaScript renderer:</p>
<table width="80%" border="0" align="left" cellpadding="0" cellspacing="0" class="table">
<tr>
<td valign="top" class="header" >Chart Type</td>
<td width="35%" valign="top" class="header">JavaScript Chart Alias</td>
<td width="35%" valign="top" class="header">Flash file (SWF Name)</td>
</tr>
<tr>
<td colspan="3" valign="top" class="text"><strong>Single Series Charts</strong></td>
</tr>
<tr class="">
<td valign="top" class="text" style="padding-left:20px;">Column 3D </td>
<td valign="top">Column3D</td>
<td valign="top" class="text">Column3D.swf</td>
</tr>
<tr>
<td valign="top" class="text" style="padding-left:20px;">Column 2D </td>
<td valign="top">Column2D</td>
<td valign="top" class="text">Column2D.swf</td>
</tr>
<tr>
<td valign="top" class="text" style="padding-left:20px;">Line 2D </td>
<td valign="top">Line</td>
<td valign="top" class="text">Line.swf</td>
</tr>
<tr>
<td valign="top" class="text" style="padding-left:20px;">Area 2D </td>
<td valign="top">Area2D</td>
<td valign="top" class="text">Area2D.swf</td>
</tr>
<tr>
<td valign="top" class="text" style="padding-left:20px;">Bar 2D </td>
<td valign="top">Bar2D</td>
<td valign="top" class="text">Bar2D.swf</td>
</tr>
<tr>
<td valign="top" class="text" style="padding-left:20px;">Pie 2D </td>
<td valign="top">Pie2D</td>
<td valign="top" class="text">Pie2D.swf</td>
</tr>
<tr>
<td valign="top" class="text" style="padding-left:20px;">Pie 3D </td>
<td valign="top">Pie3D</td>
<td valign="top" class="text">Pie3D.swf</td>
</tr>
<tr>
<td valign="top" class="text" style="padding-left:20px;">Doughnut 2D </td>
<td valign="top">Doughnut2D</td>
<td valign="top" class="text">Doughnut2D.swf</td>
</tr>
<tr>
<td valign="top" class="text" style="padding-left:20px;">Doughnut 3D </td>
<td valign="top">Doughnut3D</td>
<td valign="top" class="text">Doughnut3D.swf</td>
</tr>
<tr>
<td valign="top" class="text" style="padding-left:20px;">Pareto 2D </td>
<td valign="top">Pareto2D</td>
<td valign="top" class="text">Pareto2D.swf</td>
</tr>
<tr>
<td valign="top" class="text" style="padding-left:20px;">Pareto 3D </td>
<td valign="top">Pareto3D</td>
<td valign="top" class="text">Pareto3D.swf</td>
</tr>
<tr>
<td colspan="3" valign="top" class="text"> </td>
</tr>
<tr>
<td colspan="3" valign="top" class="text"><strong>Multi-series Charts </strong></td>
</tr>
<tr>
<td valign="top" class="text" style="padding-left:20px;">Multi-series Column 2D </td>
<td valign="top">MSColumn2D</td>
<td valign="top" class="text">MSColumn2D.swf</td>
</tr>
<tr>
<td valign="top" class="text" style="padding-left:20px;">Multi-series Column 3D</td>
<td valign="top">MSColumn3D</td>
<td valign="top" class="text">MSColumn3D.swf</td>
</tr>
<tr>
<td valign="top" class="text" style="padding-left:20px;">Multi-series Line 2D</td>
<td valign="top">MSLine</td>
<td valign="top" class="text">MSLine.swf</td>
</tr>
<tr>
<td valign="top" class="text" style="padding-left:20px;">Multi-series Bar 2D</td>
<td valign="top">MSBar2D</td>
<td valign="top" class="text">MSBar2D.swf</td>
</tr>
<tr>
<td valign="top" class="text" style="padding-left:20px;">Multi-series Bar 3D </td>
<td valign="top">MSBar3D</td>
<td valign="top" class="text">MSBar3D.swf</td>
</tr>
<tr>
<td valign="top" class="text" style="padding-left:20px;">Multi-series Area 2D</td>
<td valign="top">MSArea</td>
<td valign="top" class="text">MSArea.swf</td>
</tr>
<tr>
<td valign="top" class="text" style="padding-left:20px;">Marimekko</td>
<td valign="top">Marimekko</td>
<td valign="top" class="text">Marimekko.swf</td>
</tr>
<tr>
<td valign="top" class="text" style="padding-left:20px;">Zoom Line</td>
<td valign="top">ZoomLine</td>
<td valign="top" class="text">ZoomLine.swf</td>
</tr>
<tr>
<td colspan="3" valign="top" class="text"> </td>
</tr>
<tr>
<td colspan="3" valign="top" class="text"><strong>Stacked Charts </strong></td>
</tr>
<tr>
<td valign="top" class="text" style="padding-left:20px;">Stacked Column 3D </td>
<td valign="top">StackedColumn3D</td>
<td valign="top" class="text">StackedColumn3D.swf</td>
</tr>
<tr>
<td valign="top" class="text" style="padding-left:20px;">Stacked Column 2D</td>
<td valign="top">StackedColumn2D</td>
<td valign="top" class="text">StackedColumn2D.swf</td>
</tr>
<tr>
<td valign="top" class="text" style="padding-left:20px;">Stacked Bar 2D</td>
<td valign="top">StackedBar2D</td>
<td valign="top" class="text">StackedBar2D.swf</td>
</tr>
<tr>
<td valign="top" class="text" style="padding-left:20px;">Stacked Bar 3D </td>
<td valign="top">StackedBar3D</td>
<td valign="top" class="text">StackedBar3D.swf</td>
</tr>
<tr>
<td valign="top" class="text" style="padding-left:20px;">Stacked Area 2D </td>
<td valign="top">StackedArea2D</td>
<td valign="top" class="text">StackedArea2D.swf</td>
</tr>
<tr>
<td valign="top" class="text" style="padding-left:20px;">Multi-series Stacked Column 2D </td>
<td valign="top">MSStackedColumn2D</td>
<td valign="top" class="text">MSStackedColumn2D.swf</td>
</tr>
<tr>
<td colspan="3" valign="top" class="text"> </td>
</tr>
<tr>
<td colspan="3" valign="top" class="text"><strong>Combination Charts </strong></td>
</tr>
<tr>
<td valign="top" class="text" style="padding-left:20px;">True 3D Chart (Multi-series 3D Single Y Combination chart - Column + Line + Area) </td>
<td valign="top">MSCombi3D</td>
<td valign="top">MSCombi3D.swf</td>
</tr>
<tr>
<td valign="top" class="text" style="padding-left:20px;">Multi-series 2D Single Y Combination Chart (Column + Line + Area) </td>
<td valign="top">MSCombi2D</td>
<td valign="top">MSCombi2D.swf</td>
</tr>
<tr>
<td valign="top" class="text" style="padding-left:20px;">Multi-series Column 3D + Multi-series Line - Single Y Axis </td>
<td valign="top">MSColumnLine3D</td>
<td valign="top">MSColumnLine3D.swf</td>
</tr>
<tr>
<td valign="top" class="text" style="padding-left:20px;">Stacked Column2D + Line single Y Axis </td>
<td valign="top">StackedColumn2DLine</td>
<td valign="top">StackedColumn2DLine.swf</td>
</tr>
<tr>
<td valign="top" class="text" style="padding-left:20px;">Stacked Column3D + Line single Y Axis </td>
<td valign="top">StackedColumn3DLine</td>
<td valign="top">StackedColumn3DLine.swf</td>
</tr>
<tr>
<td valign="top" class="text" style="padding-left:20px;">Multi-series 2D Dual Y Combination Chart (Column + Line + Area) </td>
<td valign="top">MSCombiDY2D</td>
<td valign="top">MSCombiDY2D.swf</td>
</tr>
<tr>
<td valign="top" class="text" style="padding-left:20px;">Multi-series Column 3D + Multi-series Line - Dual Y Axis </td>
<td valign="top">MSColumn3DLineDY</td>
<td valign="top">MSColumn3DLineDY.swf</td>
</tr>
<tr>
<td valign="top" class="text" style="padding-left:20px;">Stacked Column 3D + Line Dual Y Axis </td>
<td valign="top">StackedColumn3DLineDY</td>
<td valign="top">StackedColumn3DLineDY.swf</td>
</tr>
<tr>
<td valign="top" class="text" style="padding-left:20px;">Multi-series Stacked Column 2D + Line Dual Y Axis </td>
<td valign="top">MSStackedColumn2DLineDY</td>
<td valign="top" class="text">MSStackedColumn2DLineDY.swf</td>
</tr>
<tr>
<td colspan="3" valign="top" class="text"> </td>
</tr>
<tr>
<td colspan="3" valign="top" class="text"><strong>XY Plot Charts </strong></td>
</tr>
<tr>
<td valign="top" class="text" style="padding-left:20px;">Scatter Chart </td>
<td valign="top">Scatter</td>
<td valign="top">Scatter.swf</td>
</tr>
<tr>
<td class="text" style="padding-left:20px;">Bubble Chart </td>
<td>Bubble</td>
<td>Bubble.swf</td>
</tr>
<tr>
<td colspan="3" class="text"> </td>
</tr>
<tr>
<td colspan="3" class="text"><strong>Scroll Charts </strong></td>
</tr>
<tr>
<td class="text" style="padding-left:20px;">Scroll Column 2D </td>
<td>ScrollColumn2D</td>
<td>ScrollColumn2D.swf</td>
</tr>
<tr>
<td class="text" style="padding-left:20px;">Scroll Line 2D </td>
<td>ScrollLine2D</td>
<td>ScrollLine2D.swf</td>
</tr>
<tr>
<td class="text" style="padding-left:20px;">Scroll Area 2D </td>
<td>ScrollArea2D</td>
<td>ScrollArea2D.swf</td>
</tr>
<tr>
<td class="text" style="padding-left:20px;">Scroll Stacked Column 2D </td>
<td>ScrollStackedColumn2D</td>
<td>ScrollStackedColumn2D.swf</td>
</tr>
<tr>
<td class="text" style="padding-left:20px;">Scroll Combination 2D (Single Y) </td>
<td>ScrollCombi2D</td>
<td>ScrollCombi2D.swf</td>
</tr>
<tr>
<td class="text" style="padding-left:20px;">Scroll Combination 2D (Dual Y) </td>
<td>ScrollCombiDY2D</td>
<td>ScrollCombiDY2D.swf</td>
</tr>
<tr>
<td colspan="3" class="text"> </td>
</tr>
<tr>
<td colspan="3" class="text"><strong>Others</strong></td>
</tr>
<tr>
<td class="text" style="padding-left:20px;">Single Series Grid Component </td>
<td>SSGrid</td>
<td class="text">SSGrid.swf</td>
</tr>
</table></td>
</tr>
<tr>
<td height="20"></td>
</tr>
<tr>
<td valign="top" class="header"><a name="limitations"></a>How different is JavaScript charts from Flash charts?</td>
</tr>
<tr>
<td valign="top" class="text">
<p>FusionCharts XT in its JavaScript flavor essentially tries to provide a uniform visualization experience on desktop and mobile platforms by rendering FusionCharts using advanced HTML5 capabilities of devices that does not support Flash. However, due to the inherent difference between the technologies and differences in various browsers causes minor disparity between the Flash and JavaScript variants of the charts.</p>
<p>
<strong>Nature of Configuration</strong></p>
<p>Due to various reasons, there are minor implementation differences between Flash and JavaScript variants of our charts. Almost all such differences have workarounds to make them appear same using the same data configuration. Listed below are the major ones:
</p><table width="95%" border="0" align="left" cellpadding="2" cellspacing="0">
<tr valign="middle" class="text">
<td width="15"> <div align="center"><img src="../Images/Bullet.gif" width="18" height="19" /></div> </td>
<td class="textBold">Lack of multi-line support when axis labels are rotated or slanted</td>
</tr>
<tr valign="top" class="text">
<td> </td>
<td><p><img src="JSDiffrencesImages/MSLineLabels.jpg" width="1158" height="342" /></p>
</td></tr>
<tr valign="middle" class="text">
<td><img src="../Images/Bullet.gif" width="18" height="19" /></td>
<td class="textBold">Visual difference in Scroll-bars</td>
</tr>
<tr valign="top" class="text">
<td> </td>
<td><p><img src="JSDiffrencesImages/ScrollDiff.jpg" width="970" height="358" /></p>
<p><img src="JSDiffrencesImages/ScrollDiff2.jpg" width="1160" height="351" /></p>
</td>
</tr>
<tr valign="middle" class="text">
<td><img src="../Images/Bullet.gif" width="18" height="19" /></td>
<td class="textBold"><strong>Visual difference when round edges is applied to 2D charts using <span class="codeInline">useRoundEdges = '1' </span></strong></td>
</tr>
<tr valign="top" class="text">
<td> </td>
<td>
<p><img src="JSDiffrencesImages/UseRoundEdges.jpg" width="1138" height="345" /></p>
</td>
</tr>
</table><div style="clear:both;"></div>
<p><strong>Browser Dependency</strong></p>
<p>JavaScript and HTML5 are browser dependent features and every browser has certain differences in the way they handle implementation of HTML5 support. Hence, however hard we try to bridge the difference, there is still a likelihood of minor differences to be encountered when comparing the same chart configuration on various browsers. </p>
<p>For example, for a column chart with <span class="codeInline">plotGradientColor='ff0000,00ff00,0000ff' and plotfillalpha='50,100,50'</span> in its <span class="codeInline"><chart></span> attribute list, there is a difference in the way IE (below IE 9) handles alpha (opacity) of colors. On FireFox and other browsers supporting SVG the chart will look like the following:</p>
<p><img src="JSDiffrencesImages/SVG.jpg" width="929" height="348" /></p>
<p>However on IE 6,7 and 8 supporting VML the same chart will be rendered as the following image:</p>
<p><img src="JSDiffrencesImages/VML.png" width="927" height="337" /> </p>
</td>
</tr>
<tr>
<td valign="top" class="text">
</td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function() {
var dataXML1 = "<chart useRoundEdges='1' caption='Monthly Sales Summary' xAxisName='Month' canvasBgAlpha='0' canvasBorderAlpha='0' splotSpacePercent='50' yAxisMaxValue='200' numDivLines='3' yAxisName='Sales' showValues='0'>\n\
<set label='Jan' value='122' />\n\
<set label='Feb' value='101' />\n\
<set label='Mar' value='135' />\n\
<set label='Apr' value='122' />\n\
<set label='May' value='152' />\n\
<set label='Jun' value='182' />\n\
<set label='Jul' value='116' />\n\
<set label='Aug' value='100' />\n\
<set label='Sep' value='98' />\n\
<set label='Oct' value='135' />\n\
<set label='Nov' value='102' />\n\
<set label='Dec' value='112' />\n\
<trendLines>\n\
<line startValue='0.1' displayValue=' ' color='BBBBBB' />\n\
<line startValue='200' displayValue=' ' color='BBBBBB' />\n\
</trendLines>\n\
</chart>";
var dataXML2 = "<chart bgAlpha='0,0' showBorder='0' canvasBgAlpha='0' canvasBorderAlpha='0' showLabels='0' showValues='0' yAxisMaxValue='200' numDivLines='3' showYAXisValues='0' chartLeftMargin='0'\n\
chartRightMargin='0' chartTopMargin='0' chartBottomMargin='0' canvasPadding='5' lineColor='67B2E1' >\n\
<set label='Jan' value='122' />\n\
<set label='Feb' value='101' />\n\
<set label='Mar' value='135' />\n\
<set label='Apr' value='122' />\n\
<set label='May' value='152' />\n\
<set label='Jun' value='182' />\n\
<set label='Jul' value='116' />\n\
<set label='Aug' value='100' />\n\
<set label='Sep' value='98' />\n\
<set label='Oct' value='135' />\n\
<set label='Nov' value='102' />\n\
<set label='Dec' value='112' />\n\
</chart>";
FusionCharts.setCurrentRenderer('javascript');
var salesChart = new FusionCharts('../../Charts/Column2D.swf', 'chart-1', '420', '280', '0', '1');
salesChart.setXMLData(dataXML1);
salesChart.render('ipadChartLive');
var salesLine = new FusionCharts('../../Charts/Line.swf', 'chart-2', '175', '70', '0', '1');
salesLine.setXMLData(dataXML2);
salesLine.render('iphoneChartLive');
});
</script>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("List of Charts|ChartList.html","Version History|WhatsNew32.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>