Address: http://sarin.iteye.com/blog/711494
The first time we saw Fusion Charts on Bug Free, we had a statistical function. We saw this data report, which was also implemented by Flash. It is similar to Open Flash Chart, but the data format is completely different. OFC uses JSON data, while Fusion Chart uses XML data. OFC uses a single file, while FC uses multiple files (different Flash displays different types of reports ). Fusion Charts's official website is http://www.fusioncharts.com/free, where you can download sdks and view examples. Download the swf file, sample code, and supported JS files in the Fusion Charts Free development kit. We only need swf and js, And the development environment is self-built, which is very simple. Note that here we use free Fusion
Charts Free.
Because the Fusion Charts data source is in XML format, you need to prepare an xml api. There are many options, such as JDOM and DOM4J, which are good. Because Hibernate only uses Dom4J to parse XML by default, to avoid too many JAR dependencies, Dom4j is used to generate XML text. The following is a preliminary encapsulation of Dom4j to make it easier to use.
Package org. xxx. core. util; import java. io. IOException; import org. dom4j. document; import org. dom4j. export enthelper; import org. dom4j. element;/*** use dom4j to generate the XML tool class ** @ author Sarin **/public class XMLUtil {private Document document Document = null; public document getDocument () {return Document ;} /*** constructor: Initialize Document */public XMLUtil () {document = incluenthelper. createDocument ();}/*** generate the root node ** @ param rootName * @ return */public Element addRoot (String rootName) {Element root = document. addElement (rootName); return root;}/*** generate node ** @ param parentElement * @ param elementName * @ return */public Element addNode (Element parentElement, String elementName) {Element node = parentElement. addElement (elementName); return node;}/*** adds an attribute ** @ param thisElement * @ param attributeName * @ param attributeValue */public void addattriement (Element thisElement, string attributeName, String attributeValue) {thisElement. addAttribute (attributeName, attributeValue);}/*** adds multiple attributes to the node ** @ param thisElement * @ param attributeNames * @ param attributeValues */public void addAttributes (Element thisElement, string [] attributeNames, String [] attributeValues) {for (int I = 0; I <attributeNames. length; I ++) {thisElement. addattries (attributeNames [I], attributeValues [I]);} /*** add node value ** @ param thisElement * @ param text */public void addText (Element thisElement, String text) {thisElement. addText (text);}/*** get the final XML ** @ return * @ throws IOException */public String getXML () {return document. asXML (). substring (39 );}}
The obtained XML contains the declaration, which is not required in Fusion Chart. Therefore, it is intercepted from the root flag. Next let's take a look at the XML format of Fusion Chart parsing. An example taken from the official website:
<graph yAxisName='Sales Figure' caption='Top 5 Sales Person' numberPrefix='$' decimalPrecision='1' divlinedecimalPrecision='0' limitsdecimalPrecision='0'> <set name='Alex' value='25000' color='AFD8F8'/> <set name='Mark' value='35000' color='F6BD0F'/><set name='David' value='42300' color='8BBA00'/><set name='Graham' value='35300' color='FF8E46'/><set name='John' value='31300' color='008E8E'/></graph>
The root tag is graph, which has configurable attributes. For details, refer to the official documentation. The set sub-tag is used as the data in a single-category report. The following shows a specific data source generation method. Struts2 is used as the Web framework to process requests.
Package org. xxx. app. action; import java. util. hashMap; import java. util. list; import java. util. map; import org. dom4j. element; import org. xxx. core. util. XMLUtil; public class ChartAction extends BaseAction {private String xmlStr; public String getXmlStr () {return xmlStr;} public String chart () throws Exception {XMLUtil xml = new XMLUtil (); element graph = xml. addRoot ("graph"); xml. addAttribute (graph, "caption", "Access statistics"); xml. addattrition (graph, "subCaption", "browser type Statistics"); xml. addAttribute (graph, "basefontsize", "12"); xml. addAttribute (graph, "xAxisName", "browser type"); xml. addAttribute (graph, "decimalPrecision", "0"); // decimal precision, 0 is precise to a single xml. addAttribute (graph, "showValues", "0"); // The Value List browserList = getServMgr () is not displayed in the report (). getChartService (). getStatsByType ("browser"); for (int I = 0; I <browserList. size (); I ++) {Map item = (HashMap) browserList. get (I); Element set = xml. addNode (graph, "set"); set. addAttribute ("name", (String) item. get ("statVar"); set. addAttribute ("value", item. get ("statCount "). toString (); set. addAttribute ("color", Integer. toHexString (int) (Math. random () * 255*255*255 )). toUpperCase ();} xmlStr = xml. getXML (); return "chart ";}}
The JdbcTemplate of Spring is used for data acquisition. The method is as follows:
private static final String SQL_GET_STATS = "select statVar,statCount from stats where statType=?";public List getStatsByType(String type) {return jt.queryForList(SQL_GET_STATS, new Object[] { type });}
For more information about the data table structure, see explain. After the retrieved data is traversed, the output is displayed on the page, which is also very simple. The page is as follows:
For more information about the data table structure, see explain. After the retrieved data is traversed, the output is displayed on the page, which is also very simple. The page is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Use the setDataXML () method to obtain the passed xmlStr, which is the XML data we need. A simple report is enough. For multi-category reports, the XML format is different. Refer to the official example to rewrite XML. Let's take a look at the generated reports.