Graph Generation Tool (funsionChartsFree and ifreeChart)

In the previous article, we talked about displaying tree data on the page, which enables users to better view the level between data. This blog shows how to display data through bar charts, pie charts, and so on, similar to the graphic display of data analysis and processing in our mathematics, this allows users to more intuitively view the relationship between data and the relationship between the overall and individual. Look at the two pictures below. Are they very beautiful and more important! Of course, this product provides us with many types of charts for our use. The requirements for charts can basically meet our needs.

Okay. When will we select these images to display data first? A bar chart is more suitable for displaying the same data based on different time periods and ages. What about a pie chart? It is more suitable for viewing the usage of the same data and other data, such as the salary segment query of employees of a company, which can display the size of each internal block very vividly ...... Therefore, to use these images, we need to understand when it is more appropriate. Never use them for the purpose of use. This is the focus.

 

Well, let's take a look at how to display the database data into such a beautiful image.

1. FunsionChartsFree:

1. Introduction: FusionCharts is a product of InfoSoft Global. InfoSoft Global is a professional Flash graphics solution provider. Its Flash-based products are very beautiful. FusionCharts free is a cross-platform, cross-browser flash chart Component solution.

2. Principle: FunsionChartsFree is implemented through the knowledge of Flash + xml + Js. First, we need to query the database and write the queried data into a specified standard XML file (just like the tree we mentioned yesterday ), then, combined with the Flash files of different styles provided by FunsionChartsFree, you can set them by reading JavaScript on the front end, that is, you can display them to our jsp page in the desired way, which is very convenient to use. (We recommend that you take a look at the examples provided by this product. We can generate them through examples)

3. Use:

A. First, copy the provided JS Code and the Flash that you want to implement the graphic style to the project. Here the circular style Flash file is used for Demonstration:

FCF_Doughnut2D.swf (corresponding Flash file)

FusionCharts. js (corresponding core JS file)

 

B. Then, query the database in the background and concatenate strings to generate the corresponding xml file. The XML specifications of different styles should also be different. Check the source code in the example:

<graph showNames='1'  decimalPrecision='0'  >   <set name='USA' value='20'/><set name='France' value='7'  />    <set name='India' value='12' />    <set name='England' value='11' /><set name='Italy' value='8' />    <set name='Canada' value='19'/>    <set name='Germany' value='15'/></graph>

C. Finally, let's take a look at the operations of the JS Code the day before yesterday. Here we write a basic JavaScript code. Of course we can also implement it through JQuery code:

// Click Details and use a pie chart to display the proportional state function viewScale (orgcode) {var xRequest; // create an object if (window. XMLHttpRequest) {xRequest = new XMLHttpRequest ();} else if (window. activeXObject) {xRequest = new ActiveXObject ("Microsoft. XMLHTTP ");} // sets the callback function xRequest. onreadystatechange = function () {if (xRequest. readyState = 4) {if (xRequest. status = 200) {var orgcode = xRequest. responseText; // these three lines of code are used to display // specify the corresponding Falsh file var chart = new FusionCharts ("/char Ts/FCF_Doughnut2D.swf "," ChartId "," 400 "," 240 "); // specify the data source chart. setDataURL ("data source corresponding to XML"); // specify the display position chart. render ("chartdiv");} else {alert (xRequest. status) ;}}; // open the channel // Add a timestamp to solve the browser cache problem in the get method. XRequest. open ("GET", "/servlet/viewScale? TimeStamp = "+ new Date (). getTime () +" & orgcode = "+ orgcode, true); xRequest. send ();}

After simple processing, we can display the desired effect on the page:

The above is a simple use of FunsionChartsFree. Of course, in order to better satisfy users, we can use the policy mode to provide a selection box on the page. However, the user selects the display method, and we have achieved several graphics display in the background, this will greatly satisfy the user experience, but it is still very good.

 

For more information about FunsionChartsFree, see FusionCharts_Free Chinese Development Guide (details)

 

Ii. ifreeChart

1. Introduction: JFreeChart is a JAVA project on the open source site SourceForge.net. It is mainly used for a variety of charts, including: pie chart, bar chart (common bar chart and stack bar chart), line chart, Area Chart, distribution chart, hybrid chart, Gantt chart, and some dashboard. The difference from the above is that the image here may not have a beautiful image, because it is implemented using JAVA, and the above is implemented through Flash, but it is enough for our ordinary aesthetics.

2. Use,

A, first need to introduce IfreeChart core jar package: jfreechart-1.0.2.jar and jcommon-1.0.5.jar

B. Write the Java code directly. Here is an example:

/*** This class is used to demonstrate the simplest bar chart generation * @ author Winter Lau */public class B {public static void main (String [] args) throws IOException {CategoryDataset dataset = getDataSet2 (); JFreeChart chart = ChartFactory. createBarChart3D ("fruit yield Chart", // chart title "Fruit", // display label of the Directory axis "yield", // display label of the value axis dataset, // dataset PlotOrientation. VERTICAL, // chart direction: horizontal, VERTICAL true, // whether to display the legend (for a simple column chart, it must be false) false, // generate tool false // generate URL link); FileOutputStream fos_jpg = null; try {fos_jpg = new FileOutputStream ("D :\\ fruit.jpg"); ChartUtilities. writeChartAsJPEG (fos_jpg, 1.0f, chart, 400,300, null);} finally {try {fos_jpg.close ();} catch (Exception e) {}}/ **** obtain a dataset object used in the demo combination * @ return */public static CategoryDataset getDataSet2 () {DefaultCategoryDataset dataset = new DefaultCategoryDataset (); dataset. addValue (100, "Beijing", "apple"); dataset. addValue (100, "Shanghai", "apple"); dataset. addValue (100, "Guangzhou", "apple"); dataset. addValue (200, "Beijing", "Pears"); dataset. addValue (200, "Shanghai", "Pears"); dataset. addValue (200, "Guangzhou", "Pears"); dataset. addValue (300, "Beijing", "grape"); dataset. addValue (300, "Shanghai", "grape"); dataset. addValue (300, "Guangzhou", "grape"); dataset. addValue (400, "Beijing", "banana"); dataset. addValue (400, "Shanghai", "banana"); dataset. addValue (400, "Guangzhou", "banana"); dataset. addValue (500, "Beijing", "litchi"); dataset. addValue (500, "Shanghai", "litchi"); dataset. addValue (500, "Guangzhou", "litchi"); return dataset ;}}

3. generated image:

It is still very good. Here is a simple demonstration. We also need to select based on actual business needs and then present them differently. We need to look at some examples on the Internet and relevant API documents for development. For more information about JfreeChart, see JfreeChart.

This is a friendly page that is displayed through some charts. Of course there may be some other plug-ins. Here we will summarize these two plug-ins, and I feel very good.