Open flash chart usage notes

I used an open flash chart (hereinafter referred to as OFC) more than a year ago. Recently, I had a need for a chart, So I remembered it again, however, one year later I found that I couldn't even remember the basic usage. No way. I had to spend more than a day researching and understanding the basic usage methods. It is really better to remember the bad words. It is because of this experience that I made up my mind, record the process of this application, so that you do not need to study it again next time ....

I. Introduction to OFC

OFC is an open-source flash report component that can be used for free and can be used to modify the source code (OFC for short). The latest version is 2.x.

Http://teethgrinder.co.uk/open-flash-chart-2/

The latest version of OFC is available on the official website. There are also some tutorials, but they are all in English and use the PHP language. I am not familiar with it and it looks a little difficult.

Similar Products include fusioncharts. fusioncharts is relatively more powerful and complete, but it is not open-source. Although there is a cracked version, it will be a bit worried after all!

Fusioncharts Official Website: http://www.fusioncharts.com/

Ii. Principles

When the browser loads a webpage containing the control, the flash will be downloaded from the server. After the download is complete, flash will read the data required to display the chart according to our configuration; ofc2 requires that the data must conform to the JSON format, and the data can be fixed or dynamically generated by the program and transmitted to the Flash control. After the data is obtained and read, the Flash control renders the chart and displays it on the browser interface.

Iii. Java API

The data format required by ofc2 is JSON. However, if we manually assemble the data on the server, it is too troublesome and error-prone. Therefore, almost all languages have their own encapsulation to assemble JSON data (generally, they use object-oriented ideas to assemble the data objects required for charts, and then convert them into JSON strings for return ). Using them makes it much easier to create JSON data. Here is the official website on the introduction of various languages for the API implementation: http://teethgrinder.co.uk/open-flash-chart-2/tutorial-other-libraries.php#java

Java APIs corresponding to open flash chart are more than one option, as if the Chinese have their own, but the most common one should be jofc2.

Google Code hosting web site: http://code.google.com/p/jofc2/

In addition, we recently found that the interfaces of jofc2 are incomplete. That is to say, many attributes supported by OFC are not supported in the jofc2 project, such as mouse click events and Bar Chart display animations. This is a pity.

However, we accidentally found that ajofc2 (another Java API for open flash chart 2), an open source library written by Chinese people, has a wide range of support for this database. It only depends on the abundant API support, you have not used the test. Mark it here.

Google Code hosting web site: http://code.google.com/p/ajofc/

At present, the line chart, pie chart, and column chart are completed. The interfaces of other images are not completed yet.

4. A small example

Here is a small example to illustrate the basic usage of OFC, which is very simple. The background is implemented using struts2 and the jofc2 library is used. This section does not explain how to build charts of various forms. Instead, we only talk about the basic principles and usage of OFC. Therefore, we use a simple column chart as an example. If you need more complex charts, you can take a look at the examples provided by OFC (the data-Files folder in the compressed file and the examples in various languages) and the APIs of jofc2, in fact, it is not difficult to assemble appropriate JSON data. The data-Files folder contains a rich array of JSON file examples. You can learn more about the JSON strings supported by OFC.

1. Preparation

Download ofc2, decompress it, and you will find many folders and files in it. There are examples in multiple languages. You can also read the basic usage of OFC. To use OFC, We need to copy several files to the project:

Open-flash-chart.swf

Swfobject. js

Download jofc2, like other Java open-source projects, which provides API documentation, Jar packages, and source code. We need to add the jar package to the project's classpath:

Jofc2-1.0-0.jar

Xstream-1.3.1.jar

In this way, the preparation for the example is complete, and the program is written below.

2. JSP code

Introduce JS files into JSP files (jquery is used ):

<script type="text/javascript" src="<%=path %>/js/jquery-1.7.2.min.js"></script><script type="text/javascript" src="<%=path %>/js/ofc2/swfobject.js"></script><script type="text/javascript" src="<%=path %>/jsp/ofc2/ofc2-demo.js"></script>

Write the following HTML code in JSP:

<Body> <input type = "hidden" id = "contextpath" value = "<% = PATH %>"/> <button onclick = "chart () "> load charts </button> <div> <Div id =" chart "> </div> </body>

3. Prepare the JS Code to embed the SWF file and specify the URL for loading data. You can specify the SWF attributes, such as the window mode (wmode), and specify the SWF width and height:

var contextPath;$(function (){contextPath = $("#contextPath").val();})function chart() {var flashPath = contextPath + "/js/ofc2/open-flash-chart.swf";var dataPath = contextPath + "/ofc2/chart!barChart.action";swfobject.embedSWF(flashPath, "chart", "800", "520", "9.0.0", "expressInstall.swf",{"data-file":dataPath}, {wmode:"transparent"});}

4. The struts2 action assembles JSON data. It first assembles the data into an object using jofc and then converts the data into a string for output:

Public class chartaction extends actionsupport {Private Static final long serialversionuid = 1l; Public String barchart () {barchart = new barchart (style. glass); random = new random (1l); xaxis = new xaxis (); xaxis. setcolour ("#909090"); xaxis. setgridcolour ("# adb5c7"); int max = 0; For (INT I = 0; I <10; I ++) {int temp = random. nextint (100); If (max <temp) max = temp; bar = new bar (temp); barchart. addbars (bar); xaxis. addlabels ("test" + temp);} yaxis = new yaxis (); yaxis. setmax (MAX + 10); yaxis. setsteps (max/10); Chart chart = new chart ("chart test", "{font-size: 20px; font-weight: bold; color: # a2acba; text-align: center;} "); chart. addelements (barchart); text xlegend = new text ("X axis Legend", "{font-size: 16px; font-weight: bold; color: # a2acba; text-align: center;} "); chart. setxlegend (xlegend); chart. setxaxis (xaxis); chart. setyaxis (yaxis); try {writechart (chart, servletactioncontext. getresponse ();} catch (exception e) {e. printstacktrace ();} return NULL;} private void writechart (Chart chart, httpservletresponse response) throws exception {response. setcontenttype ("application/JSON-RPC; charset = UTF-8"); response. setheader ("cache-control", "No-Cache"); response. setheader ("expires", "0"); response. setheader ("Pragma", "No-Cache"); printwriter writer = response. getwriter (); writer. write (chart. tostring (); writer. flush (); writer. close ();}

5. program running

6. Description

The above example is only a small example of a column chart. The column chart also supports 3D effects. In addition, OFC supports multiple chart forms. There is no need to write a program for testing here. If we understand the basic usage method, we can make some research on the APIS provided by jofc or other open-source projects when we need to render a chart (the same is true for other languages ). In addition, the OFC download document also contains examples of various charts and JSON data formats required for each type of chart. It is not difficult to generate the required charts by referring to these examples.

In the example, the swfobject. embedswf () method used by JS Code is provided by swfobject. js and is used to embed the flash control on the page. The Calling format is as follows:

swfobject.embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes)

The first five of the nine parameters are required, and the last four are optional. Let's talk about several important parameters:

Swfurl:Specifies the position of the embedded SWF file. In this example, the position of the open-flash-chart.swf file is stored;

ID:String, required parameter, specifying the ID of the HTML element that will be replaced by the Flash content. In this example, the ID of a div is specified;

Width:String, required parameter, specifying the flash width, in addition to numbers, you can also specify the percentage, such as 100%;

Height:String, a required parameter, indicating the height of the Flash. In addition to numbers, you can also specify the value in percent format, such as 100%;

Version:String, required parameter, specifying the Flash Player version corresponding to your published SWF (Format: Major. Minor. Release );

Expressinstallswfurl:String, an optional parameter. Specify the URL of express install SWF and activate Adobe express install;

Flashvars:Object object, an optional parameter. Use name: value to specify your flashvars and define the data passed to the Flash control. You can also define it in Params. The URL for obtaining JSON data is provided here;

Params:Object object, an optional parameter. You can use name: value to specify the Params of your nested object element to control the Flash Action. Many parameters can be defined, the preceding example specifies the window mode as transparent;

Attributes:Object object, an optional parameter. Use name: value to specify the object attributes.

7. Other knowledge points 7.1. Custom loading tips

When loading data, OFC displays the "loading data" on the flash interface, and there is an image on the right side that has been rotating, like this:

Can we change the default prompt information? The answer is yes. On the official website, a tutorial is provided specifically to address this problem. The method is to set the loading data prompt information when embedding the SWF file, as shown below (see the passed parameters ):

Swfobject. embedswf ("open-flash-chart.swf", "my_chart", "550", "400", "9.0.0", "expressinstall.swf", {"data-file": "Gallery/loading. PHP "," loading ":" loading data. Please wait... "});

In this way, the default prompt information is replaced and displayed as follows: