DWR (AJAX) + Highcharts graph, pie chart, dwrhighcharts

DWR (AJAX) + Highcharts graph, pie chart, dwrhighcharts

Basic requirements:
1. The front-end will use the DWR framework (or AJAX) to call the Java background code to obtain the data to be displayed in Hightcharts.
2. Understand the JSON (JavaScript Object Notation) Format
3. Bind x and Y axes of Hightcharts
4. Use custom styles of Hightcharts
The Highcharts code (or the Highcharts configuration) is a json string. To put it bluntly, if you want to use the Hightcharts ing plug-in on the foreground, the Data Type returned by the background must be a json string.
The following uses the DWR framework as an example to draw a curve (x, Y axis) and a pie chart (without the x axis) to demonstrate how to bind background data to the x and Y axes of Highcharts. If you do not want to explain it, first map it to see the effect:

Example 1: Graph

1) JAVA background code:

2) Front-end DWR call:

Please check out what alert is...

3) configure a Hightcharts graph (define a Hightchars), var gline ={}; Nima: Which one looks like is JSON
Because Hightcharts depends on Jquery, jquery-1.8.3.min.js must be introduced, and highcharts 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 the data is bound to x, and the Y axis is displayed.
(Continue to complete the code)

Note: Use of the eval function !!!!

Example 2: Pie Chart

1) JAVA background code:

2) Front-end DWR call:

Please check out what alert is...

3) configure a Hightcharts pie chart:, var dpie = {};

4) bind data
Dpie. series [0]. data = eval (data );
New Highcharts. Chart (dpie );

Ii. Use custom styles of Hightcharts

Apply the style to all Highcharts:
Highcharts. setOptions (myTheam); // set the topic style for the chart
If you want to apply different styles to each graph, write Highcharts. setOptions (myTheam) in the background data method called by each DWR. The following two themes are defined: myTheam and myTheam1.

DWR (AJAX) + Highcharts ...) Summary V2.0
Improvement step 1): After learning to use DWR (AJAX) in j2ee, sometimes the data returned from the client from the server is an object, and it is easy to put together the json string manually, du Niang knows the json-lib class library to easily support conversion of objects to json strings in java.
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 front-end will use the DWR framework (or AJAX) to call the Java background code to obtain the data to be displayed in Hightcharts.
2. Understand the JSON (JavaScript Object Notation) Format
3. Bind x and Y axes of Hightcharts
4. Use custom styles of Hightcharts
The Highcharts code (or the Highcharts configuration) is a json string. To put it bluntly, if you want to use the Hightcharts ing plug-in on the foreground, the Data Type returned by the background must be a json string.
The following uses the DWR framework as an example to draw a curve (x, Y axis) and a pie chart (without the x axis) to demonstrate how to bind background data to the x and Y axes of Highcharts. If you do not want to explain it, first map it to see the effect:

Example 1: Graph

1) JAVA background code:

2) Front-end DWR call:

3) JsonConveterUtil: Json converter tool class

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