Echarts ssh+jqueryajax+json+jsp populating the data in the database into Echarts

This article references from: http://blog.csdn.net/ArcticFoxHan/article/details/380716411. Import the package and build the SSH framework

Import jquery JS package, <script src= "Js/jquery.1.7.1.js" ></script>

Import the Echarts package. <script src= "Http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js" ></script>

The premise is that your SSH has been set up and the data has been passed to the struts layer.

2. In the action layer, encapsulate the data as a JSON object and output through the Servletresponse object

My actual function is to tell the actual power data and plan the power data displayed on the Echarts chart. Place the actual and planned power in the ArrayList, and then place the two ArrayList in a ArrayList, such as merge. The merge object is then encapsulated in Jsonarray, where the Jsonarray actually has two single arrays, and the Jsonarray object is exported through the Servlet's response object, and the JSP requesting this method obtains the object.

1  PublicString Getallpower () {2HttpServletRequest request =servletactioncontext.getrequest (); 3HttpServletResponse response =Servletactioncontext.getresponse (); 4         Try {  5Request.setcharacterencoding ("Utf-8"); 6Response.setcharacterencoding ("Utf-8"); 7}Catch(unsupportedencodingexception e) {8             //TODO auto-generated Catch block9 E.printstacktrace (); Ten         }   OneList<power> powers =Powercompareservice.getallpower ();  A         //get actual power and planned power -List actualpowerlist =NewArrayList ();  -List expectedpowerlist =NewArrayList ();  the          for(Power power:powers) { - Actualpowerlist.add (Power.getactualpower ());  - Expectedpowerlist.add (Power.getexpectedpower ());  -         }   +list<list> merge =NewArrayList ();  - Merge.add (actualpowerlist);  + Merge.add (expectedpowerlist);  AJsonarray Jsonarray =jsonarray.fromobject (merge);  at         Try {   -Response.setheader ("Cache-control", "No-cache");  -Response.setcontenttype ("Aplication/json;charset=utf-8");  - response.getwriter (). print (Jsonarray);  -}Catch(IOException e) { -             //TODO auto-generated Catch block in E.printstacktrace ();  -         }   to         //Request.setattribute ("List_powers", Powers);  +         //return "Success";  -         return NULL;  the}

Note that you need to return NULL, because you do not want struts to navigate to other places, but to request it through jquery Ajax.

3.JqueryAjax request JSON data

<%@ page language= "java" import= "java.util.*" pageencoding= "UTF-8"%> <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" > 
$.ajax ({
URL: ' Power.action ',
Type: ' GET ',
DataType: ' JSON ',
Async:false,
Success:function (Jsonarray) {
for (x in jsonarray[0]) {
ACTUALPOWER[X] = jsonarray[0][x];
}
for (x in jsonarray[0]) {
EXPECTEDPOWER[X] = jsonarray[1][x];
}
}
});
Where the URL parameter is the requested action
DataType data type selection JSON
Success is the return of a successful request, Jsonarray is the request succeeds, the above action method through the servlet passes over the JSON object. A two-dimensional array jsonarray[0] is directly able to get to the first encapsulated ArrayList, and Jsonarray[0][x] gets the x data in the ArrayList. 4.Echarts
The chart data fill in Echarts is the array () object.
Data:actualpower,
This directly fills in the data that JSON passes over.
5. Display
Echarts ssh+jqueryajax+json+jsp populating the data in the database into Echarts