FusionCharts is a product of InfoSoft Global, which is a professional Flash graphics solution provider. They also have several other products based on Flash technology, all of which are very beautiful. FusionCharts free is a cross-platform, cross-browser flash charting component solution that can be called by ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, simple HTML pages and even PPT.
FusionCharts is a Flash chart component, which can be used to make data animation charts. The animation effects are flash produced by Adobe Flash 8 (formerly Macromedia Flash). FusionCharts can be used in any web page scripting language similar to HTML, .NET , ASP, JSP, PHP, ColdFusion, etc., providing interactive and powerful charts. Using XML as its data interface, FusionCharts leverages the fluid beauty of Flash to create compact, interactive and visually arresting charts.
Animation and Interaction Diagrams
Using FusionCharts, you can quickly and easily deliver interactive animated charts to end users. Different chart types support different forms of animation and interactivity, thus providing a different experience to the end user.
Simple to use yet powerful AJAX/JavaScript integration
FusionCharts provides an advanced way to combine charts with AJAX applications or JavaScript modules. You can update charts at any time on the client side, call JavaScript functions for hot links, or request dynamic XML data to be made to the server without involving any page refreshes.
easy to use
With FusionCharts, you don't have to install anything on your server. All you need to do is copy-paste the SWF file (the core file FusionCharts) onto your server, just like you would do any image file - you're ready to go! Therefore, even when these servers do not allow the installation of ActiveX or any other form of component, FusionCharts can run smoothly.
FusionCharts makes the chart creation process easy and convenient. Since it uses XML as its data source, all you need to do is convert your data to XML format, then use a programming language or use a visual GUI to provide FusionCharts - and all that is needed to build interactive and animated charts .
runs on various platforms
FusionCharts can be used to create charts regardless of the server-side scripting language or client-side scripting language you use. FusionCharts uses XML as a data interface and can run on any server and any scripting language. To view the chart, users only need to install Adobe Flash Player, which is embedded on almost every browser.
Reduce the load on your server
In traditional image-based rendering systems, charts, images are generated server-side. So for each chart you need to provide to the user, you can
Build complex images on the server and stream them to the client. When the need is high, this can be an expensive resource on the server, as image creation requires a large number of people on the server.
FusionCharts brings you great comfort - all charts are rendered on the client-side using the widely installed Adobe Flash platform. The server is just responsible for streaming the pre-built SWF file and your XML data file. From there, Flash Player takes responsibility for making the chart. Additionally, the chart SWF file can be stored, allowing you to just update the data instead of sending the chart SWF file every time.
Tons of chart types
FusionCharts v3 provides you with a large number of chart types. From basic bar charts, column charts, line charts, pie charts, etc., to advanced combination and scrolling charts, you can build all charts with the same ease of use. Web & Enterprise applications support over 90 chart types and 550 maps, and JS supports a variety of real-time charts, maps, editable charts and gauges.
drill down
With LinkedCharts, you can create unlimited levels of drill-down charts in minutes. Each level can display different chart types and data without writing any additional code.
Special characters
In FCF, some special encodings need to be encoded. Such as:
"€" euro sign -- needs to be replaced with "%80"
"£" pound sign -- needs to be replaced with "%A3"
"￥" person name currency symbol - need to be replaced with "%A5"
"￠" sub-symbol --- need to be replaced with "%A2"
"%" percent sign ------ needs to be replaced with "%25"
"&" hyphen ------ needs to be replaced with "&"
">" is greater than sign ------ need to be replaced with ">"
"'" single quote --- need to be replaced with "'"
If you want to display double quotation marks, you can use it directly, provided that the attribute value is enclosed in single quotation marks. If the attribute value is enclosed in double quotation marks, to display the single quotation mark, it can also be used directly without replacing it with "'".
Install and use
1. Create a new folder ( such as FusionCharts) in the web project directory , and copy all SWF files to this folder.
2. Import the FusionCharts.js file on the page, such as:
<script type="text/javascript" src="FusionCharts.js"></script>
3. js loads data to generate reports ( there are two methods )
Method 1: xml file reference method
(1) Define a fixed-format xml file (take Data.xml as an example)
The content of Date.xml is as follows:
| <graph caption=' Monthly Sales Column Chart ' xAxisName=' Month ' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'> <set name='一月' value='462' color='AFD8F8' /> <set name='二月' value='857' color='F6BD0F' /> <set name='三月' value='671' color='8BBA00' /> <set name='四月' value='494' color='FF8E46' /> <set name='五月' value='761' color='008E8E' /> <set name='六月' value='960' color='D64646' /> <set name='七月' value='629' color='8E468E' /> <set name='八月' value='622' color='588526' /> <set name='九月' value='376' color='B3AA00' /> <set name='十月' value='494' color='008ED6' /> <set name=' November ' value='761' color='9D080D' /> <set name=' December ' value='960' color='A186BE' /> </graph> |
(2) js loading method, the code is as follows:
| <div id=”chartdiv1”></div> <script type="text/javascript"> |
方法二：字符串加载法
（1） 定义一个有固定格式的字符串，即可以将上述xml文件组合成字符串
| var dataXml = “<graph caption='每月销售额柱形图' xAxisName='月份' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'><set name='一月' value='462' color='AFD8F8' /><set name='二月' value='857' color='F6BD0F' /><set name='三月' value='671' color='8BBA00' /><set name='四月' value='494' color='FF8E46' /><set name='五月' value='761' color='008E8E' /><set name='六月' value='960' color='D64646' /><set name='七月' value='629' color='8E468E' /><set name='八月' value='622' color='588526' /><set name='九月' value='376' color='B3AA00' /><set name='十月' value='494' color='008ED6' /><set name='十一月' value='761' color='9D080D' /><set name='十二月' value='960' color='A186BE' /></graph>”; |
（2）js加载方法，代码如下：
| <div id=”chartdiv1”></div> <script type="text/javascript"> |
解析：操作步骤：
<1>建立对象：
用四个参数建立了一个FusionCharts对象，
var myChart = new FusionCharts("../FusionCharts/FCF_Column3D.swf", "myChartId", "600", "500");
第一个参数是SWF文件的地址。
第二个是图形的id。这个id可以随便叫什么，但是要注意，当一个页面里有多个图形的时候，这个id一定要是唯一的。
第三个参数是图形的宽。
第四个参数是图形的高。
<2> 加载数据：
第一种加载方法需要设置数据文件的地址。如：
myChart.setDataURL("Data.xml");
第二种加载方法需要设置对应的字符串。如：
myChart2.setDataURL(dataXml); //dataXml为字符串
<3> 把图形渲染在指定的地方。
myChart.render("chartdiv");
"chartdiv"就是前面的DIV的id，这就表示把图形render到"chartdiv"，即Flash图形就出现在这个id为"chartdiv1"的DIV里。