DWR (AJAX) +highcharts plot graph, pie chart

Basic requirements:
1. The foreground will use the DWR framework (or AJAX) to invoke Java backend code to get the data to be displayed in Hightcharts
2. Understanding the format of JSON (JavaScript Object Notation)
3. Hightcharts x, y axis data binding
4. Hightcharts the use of their own definition of style
The Highcharts code (or Highcharts's configuration) is a JSON string, which is to say that to use the Hightcharts plugin in the foreground, the data type returned in the background must be a JSON string. Hightcharts will know.

The following is an example of the DWR framework. Draw a graph (x, Y axis). and pie chart (no x-axis), demonstrating how background data is bound to the X, Y axis of highcharts. Do not explain, the first map to see the effect:

Example 1: Graph

1) Java Backend code:

2) The foreground DWR call:

Take a look at what the alert is, what a ghost it is ...

3) Configure a hightcharts curve (define a hightchars). var gline = {}; No, it looks like it's all JSON.
Hightcharts relies on jquery and so must introduce Jquery-1.8.3.min.js, and Hightcharts core highcharts.js

<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script><script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/4.0.1/highcharts.js"></script>

4) A highcharts graph has been defined above, and now it is bad to bind data to the X, Y axis display
(Continue to add 2) in the code)

Note: Use of the Eval function.

！！

Example 2: Pie chart

1) Java Backend code:

2) The foreground DWR call:

Take a look at what the alert is, what a ghost it is ...

3) Configure a hightcharts pie chart:, var dpie = {};

4) Binding Data
Dpie.series[0].data = eval (data);
New Highcharts.chart (Dpie);

Second, the use of hightcharts to define their own style

Apply a style to all highcharts:
Highcharts.setoptions (Mytheam);//Set the theme style for the chart
Suppose you want to apply a different style to each diagram, the highcharts.setoptions (Mytheam) is written in each DWR call to the background data method. For example, the following: two themes defined mytheam and myTheam1

DWR (AJAX) +highcharts draw various graphs (histogram, pie chart, curve ...) ) Summary V2.0
Improvement Step 1): After learning to use DWR (AJAX) In the Java EE, sometimes the data returned from the server to the client is an object, you manually pieced together the JSON string easy error, through the degree Niang know json-lib this class library, Easy to support conversion of objects in Java to JSON strings.
Dependent class Library: Json-lib-2.4-jdk15.jar
Ezmorph-1.0.6.jar
Commons-logging.jar
Commons-lang.jar
Commons-collections.jar Basic requirements:
1. The foreground will use the DWR framework (or AJAX) to invoke Java backend code to get the data to be displayed in Hightcharts
2. Understanding the format of JSON (JavaScript Object Notation)
3. Hightcharts x, y axis data binding
4. Hightcharts the use of their own definition of style
The Highcharts code (or Highcharts's configuration) is a JSON string. To be blunt is to want to use the Hightcharts plugin to draw in the foreground, the data type returned in the background must be a JSON string, Hightcharts will know.
The following is an example of the DWR framework, which draws a graph (x, Y axis). and pie chart (no x-axis), demonstrating how background data is bound to the X, Y axis of highcharts.

Do not explain, the first map to see the effect:

Example 1: Graph

1) Java Backend code:

2) The foreground DWR call:

3) Jsonconveterutil:json Converter Tool class

Tool class and source code download: Http://pan.baidu.com/s/1mgxHExa

DWR (AJAX) +highcharts plot graph, pie chart