Fusioncharts Study Notes

Http://hi.baidu.com/touyacathy/blog/item/d47cc5fa89bf049958ee9046.html

1. js-based calling. For future scalability and cross-browser compatibility

 

2. The logo can be loaded, and various positions can be set, as well as the scope of the logo, as well as transparency. The example is as follows:

<Chart logourl = '/img/logo.gif' logoposition = 'cc' logoalpha = '50' logoscale = '000000'>

:

 

 

 

3 label has multiple optional formats:

Modes for data labels

The data labels can be displayed on the charts in the following ways:

• Wrap Mode
• Rotated and slanted Mode
• Staggered mode with customizable staggered lines
• Every n-th label

The n-th label is used to solve the label length on the X axis and cannot be displayed for each label. It can be used to control the number of labels displayed in flash.

The figure above illustrates the problem. If the date is displayed every six days, you only need to set <chart labelstep = '6'>

 

4 number can be formatting, you can specify whether to retain decimal places, whether to use commas to separate and so on

 

5. If the data difference is huge, different units can be displayed. For example, the Unit can be automatically converted by flash. In an icon, the second, minute, hour, day, week, And month are displayed, you can also display K/M/G/T...

However, in China, the following example is more in line with national conditions:

<Chart numberscalevalue = '000000,10000' numberscaleunit = '10 thousand, 10000,100 Ms'>

 

6. You can specify your own about link and change "about fusioncharts" to "about intelligence". Then, the link is about the intelligence page.

<Chart showaboutmenuitem = '1' aboutmenuitemlabel = 'about intelligence out' aboutmenuitemlink = 'N-/site_about.html '>

 

7. The <set> element of each SWF is very important. It indicates how many parameters can be set for the displayed information. For example, the link label can be used to specify the URL, and there are various syntaxes, there are "N-URL", "j-function-param1, Param 2"

There are also "F-idframe-URL" and so on, namely opening a link in a new window, calling JS functions, passing parameters, and opening in IFRAME

8 Export image/pdf effects:
There are two modes: server-side and client-side. server-side needs to send the original BMP image back to the server, and the GD module on the server (of courseProgramIs included in fusioncharts) to convert to PNG/jpg/pdf and then output to the client. This puts pressure on the server. The advantage is that images can be kept on the server, post-processing (for example, sending an email to a customer rather than directly downloading it)
Generally, the client-side mode should be selected, because there is no pressure on the server. Why should we transmit data back to the server?
However, there is a problem with the client-side mode, that is, the fusioncharts tool is implemented in Flash 8, while Flash 8 does not have the stream input/output function (I did not verify it in this document ), therefore, you need to use flash10 to process image stream data. Therefore, you need to add a div that looks like a button. After export, You need to click this button once to save the image. the buttons can be customized.

 

How to customize the Chinese menu during export? Example:
<Chart exportenabled = '1' exportatclient = '1' exportdialogmessage = 'is being exported. Please wait... 'exportformats = 'jpeg = export to jpg image | PNG = export to PNG Image | PDF = export to PDF file'>

In the export button of Flash 10, culture and customization are completed through JS:
<Div id = "fcexpdiv" align = "center"> xxxxxxxxxxxxxxxxxxxx </div>
<SCRIPT type = "text/JavaScript">
// Render the export component in this
// Note: fcexporter1 is the dom id of the DIV and shocould be specified as value of exporthandler
// Attribute of chart XML.
VaR myexportcomponent = new fusionchartsexportobject ("fcexporter1", "/fusioncharts/charts/fcexporter.swf ");
// Customize the component Properties
// Width and height
Myexportcomponent. componentattributes. width = '2013 ';
Myexportcomponent. componentattributes. Height = '60 ';
// Background color
Myexportcomponent. componentattributes. bgcolor = 'ffffdd ';
// Border Properties
Myexportcomponent. componentattributes. borderthickness = '2 ';
Myexportcomponent. componentattributes. bordercolor = '0372ab ';
// Font Properties
Myexportcomponent. componentattributes. fontface = 'arial ';
Myexportcomponent. componentattributes. fontcolor = '0372ab ';
Myexportcomponent. componentattributes. fontsize = '12 ';
// Message-caption of Export Component
Myexportcomponent. componentattributes. showmessage = '1 ';
Myexportcomponent. componentattributes. Message = 'right-click to export the report, and click this button to save the IMG ';
// Button visual Configuration
Myexportcomponent. componentattributes. btnwidth = '000000 ';
Myexportcomponent. componentattributes. btnheight = '25 ';
Myexportcomponent. componentattributes. btncolor = 'e1f5ff ';
Myexportcomponent. componentattributes. btnbordercolor = '0372ab ';
// Button font Properties
Myexportcomponent. componentattributes. btnfontface = 'verdana ';
Myexportcomponent. componentattributes. btnfontcolor = '0372ab ';
Myexportcomponent. componentattributes. btnfontsize = '15 ';
// Title of Button
Myexportcomponent. componentattributes. btnsavetitle = 'image generated, click Save'
Myexportcomponent. componentattributes. btndisabledtitle = 'right-click the report to export the IMG ';
// Render the exporter SWF in our Div fcexpdiv
Myexportcomponent. Render ("fcexpdiv ");
</SCRIPT>

By the way, most importantly, if you want to use client-side for export, don't forget to set the last parameter to 1 when calling fusioncharts in JS !!
<Div id = "chartdiv" align = "center"> the chart will appear within this Div. </div>
<SCRIPT type = "text/JavaScript">
VaR MyChart = new fusioncharts ("/fusioncharts/charts/column2d.swf", "mychartid", "900", "300", "0", "1 ");
// This is the last parameter above. It must be 1 to interact with another control button.
MyChart. setdataurl ("/XML/fc_cn.xml ");
MyChart. Render ("chartdiv ");
</SCRIPT>

9. For Encoding Problems, if you use setdataurl, you need to use utf8 signed text. The so-called signature is actually a few special characters at the beginning. In PHP, the implementation is:

Header ('content-type: text/xml ');
Echo pack ("C3", 0xef, 0xbb, 0xbf );

// Now write your XML data to output stream

Of course, you can use an XML file encoded in GBK to check the code of your website.

 

If you use the setdataxml method, there seems to be no restrictions. in a timely manner, the entire HTML is utf8 without a signature, and there is no garbled code, which is quite good.

10 setdataurl. Only one parameter can be received.

Use escape (URL) to solve the problem