Highchart dynamically obtains json data, and the update icon is displayed.

This is a bit messy. It is a little bit added during development, and some information is also found online. Please read it with patience. You can obtain json data from jsp to dynamically update charts and export images. The Chinese Garbled text of exported images will be introduced in the next article. Tangyj

Currently, multiple page values can be passed through ajax requests, but the problem is that

1. You cannot agree to assign the passed data to series.

Chart. addSeries (data) invalid

2. You cannot set chart. series [0]. setName ('20140901') for multiple lines. It is invalid.

Only chart. series [0]. setData (a [0]. data );

3. The parameter cannot be passed dynamically. Pass the value over. For how to solve these problems, see the jsp below)

The home page needs to be imported

<Scripttype = "text/javascript" src = "../common/tang/highcharts. js"> </script>

The request page needs to be imported

<% @ Pageimport = "org. json. simple. *" %>

To export images, add

Exporting. js File

Add the preceding jar package to lib.

Example of how to modify the value of highchart:

Dynamic component Modification

Http://www.stepday.com/topic? 292

Http://www.stepday.com/search? API

Http://www.baidu.com? Tn = baiduhome_pg & ie = UTF-8 & bs = highchart + doc & f = 8 & rsv_bp = 1 & rsv_spt = 1 & wd = highcharts % E5 % B8 % AE % E5 % 8A % a9 % E6 % 96% 87% E6 % A1 % A3 & rsv_sug3 = 7 & rsv_sug = 1 & rsv_sug1 = 7 & rsv_sug4 = 80 & inputT = 5552

Http://api.highcharts.com/highcharts

Home Page

<Scripttype = "text/javascript">

Varchart;

$ (Function (){

Vardate = ['October 1st ', 'October 1st', 'October 1st ', 'October 1st', 'October 1st ', 'October 1st', 'October 1st ', 'August 11', 'August 11', 'August 11'];

FunctiongetForm (){

// Declare the report object

Chart = newHighcharts. Chart ({

Chart :{

// Render the report object to the Layer

// Type: 'column ',

RenderTo: 'Container '//,

// BackgroundColor :{

// LinearGradient: {x1: 0, y1: 0, x2: 0, y2: 1 },

// Stops :[

// [0, 'rgb (96, 96, 96) '],

// [1, 'rgb (16, 16, 16) ']

//]

//}

},

Title :{

Text: 'Organization assessment result statistics'

},

XAxis :{

Title: 'month ',

Categories: date

},

YAxis :{

Title :{

Text: 'number of students (count )'

},

PlotLines :[{

Value: 0,

Width: 1,

Color: '#000000'

}]

},

Tooltip :{

Formatter: function (){

Return '<B>' + this. series. name

+ '</B> <br/>' + this. x + ':'

+ This. y + 'people ';

}

},

Legend :{

ItemStyle :{

Font: '9pt Trebuchet MS, Verdana, sans-serif ',

Color: '# 3e576f'

},

ItemHoverStyle :{

Color: 'black'

},

ItemHiddenStyle :{

Color: 'silver'

}

},

// Set the initial data of the report object

Series :[{

Name: 'number of onsellers ',

Data: []

},

{

Name: 'number of recruits ',

Data: []

},

{

Name: 'number of designees ',

Data: []

},

]

});

// Use JQuery to obtain JSON data from the background

$. Get ('tang. jsp? Date = '+ newDate (), null, function (data ){

// Var data = [222,344,543];

// Var data = '[' + eval (data) + ']';

Alert (data + "12319 ");

Var a = eval (data );

Alert (a [0]. data );

// Chart. series [0]. setName ('20140901'); // set the value for the chart

Chart. series [0]. setData (a [0]. data); // dynamically set data

Chart. series [1]. setData (a [1]. data); // dynamically set data

Chart. series [2]. setData (a [2]. data); // dynamically set data

// Chart. addSeries (a); // assign a value to the entire series. Currently, there is a problem and it cannot be implemented.

// For (var I = 0; I <3; I ++)

//{

// Alert (I );

// Var s1 = "[";

// Var s2 = "]";

// Var s = s1 + a [I]. data + s2;

// Alert (s );

// Chart. series [I]. setName ("123 ");

// Chart. series [I]. setData (s );

//}

// Chart. xAxis [0]. setCategories (a); // dynamically set the value of X-axis.

});

Ni ();

}

Functionni ()

{

Vara = [1, 2, 3];

Alert ("123 ");

// Chart. series [0]. setData ();

Alert ("ee ");

}

$ (Document). ready (function (){

Alert (2 );

// Call the method automatically every 3 seconds to update the chart in real time

Window. setInterval (getForm );

Alert ("kaishi ");

});

});

//]>

</Script>

Request page

<% @ Pageimport = "java. io. PrintWriter" %>

<% @ Pageimport = "java. util. ArrayList" %>

<% @ Pageimport = "java. util. List" %>

<% @ Pageimport = "java. util. *" %>

<% @ Pageimport = "javax. servlet. http. HttpServletResponse" %>

<% @ Pageimport = "java. io. IOException" %>

<% @ Pageimport = "javax. servlet. ServletException" %>

<% @ Pageimport = "javax. servlet. http. HttpServlet" %>

<% @ Pageimport = "javax. servlet. http. HttpServletRequest" %>

<% @ Pageimport = "org. json. simple. *" %>

<%

JSONArray JArray = newJSONArray ();

StringBuilder sBuilder = newStringBuilder ();

StringBuilder sBuilder1 = newStringBuilder ();

StringBuilder sBuilder2 = newStringBuilder ();

StringBuilder sBuilder3 = newStringBuilder ();

// String SQL = "select branchtype, wageorder from laindexvscomm where wageorder = 10 and ccolname = 'longserbonus' and indexcode = 'c00038' and areatype = '08 '";

String sqlpeople = "select count (agentcode) count, substr (employee date, 6, 2) date from laagent where agentstate <> 0 group by substr (employee date, 6, 2 )";

String sqlin = "select count (agentcode) count, substr (employee date, 6, 2) date from laagent where sex = '1' group by substr (employee date, 6, 2 )";

String sqlout = "select count (agentcode) count, substr (outworkdate, 6, 2) date from laagent where substr (outworkdate, 6, 2) is not null group by substr (outworkdate, 6, 2 )";

ExeSQL tExeSql = newExeSQL ();

SSRS sSSRSpeople = newSSRS ();

SSRS sSSRSin = newSSRS ();

SSRS sSSRSout = newSSRS ();

SSSRSpeople extends texesql.exe cSQL (sqlpeople );

SSSRSin =tExeSql.exe cSQL (sqlin );

SSSRSout=tExeSql.exe cSQL (sqlout );

SBuilder1.append ("[");

For (inti = 1; I <= sSSRSpeople. MaxRow; I ++) {// for (int I = 0; I <= 0; I ++ ){

String a = sSSRSpeople. GetText (I, 1 );

SBuilder1.append ();

If (I <sSSRSpeople. MaxRow)

{

SBuilder1.append (",");

}

}

SBuilder1.append ("]");

SBuilder2.append ("[");

For (inti = 1; I <= sSSRSin. MaxRow; I ++) {// for (int I = 0; I <= 0; I ++ ){

String a = sSSRSin. GetText (I, 1 );

SBuilder2.append ();

If (I <sSSRSin. MaxRow)

{

SBuilder2.append (",");

}

}

SBuilder2.append ("]");

SBuilder3.append ("[");

For (inti = 1; I <= sSSRSout. MaxRow; I ++) {// for (int I = 0; I <= 0; I ++ ){

String a = sSSRSout. GetText (I, 1 );

SBuilder3.append ();

If (I <sSSRSout. MaxRow)

{

SBuilder3.append (",");

}

}

SBuilder3.append ("]");

String ss1 = "[23,23, 33,34, 46,66]";

String ss = "['August 11', 'August 11', 'August 11', 'August 11', 'August 11', 'August 11', 'August 11 ', 'August 11', 'August 11', 'August 11', 'August 11'] ";

SBuilder. append (sBuilder1). append (sBuilder2). append (sBuilder3 );

System. out. println (sBuilder1 + "1 --------" + sBuilder2 + "2 -------" + sBuilder3 + "3 -------" + sBuilder );

JSONObject JSONObj1 = newJSONObject ();

JSONObj1.put ("name", "Number of employees ");

JSONObj1.put ("data", sBuilder1 );

JArray. add (JSONObj1 );

JSONObject JSONObj2 = newJSONObject ();

JSONObj2.put ("name", "Number of resigned persons ");

JSONObj2.put ("data", sBuilder2 );

JArray. add (JSONObj2 );

JSONObject JSONObj3 = newJSONObject ();

JSONObj3.put ("name", "Number of employees ");

JSONObj3.put ("data", sBuilder3 );

JArray. add (JSONObj3 );

System. out. println (JArray. toString ());

// Out. write (JArray. toString (). replace ("\" {"," {"). replace ("}\"","}"));

System. out. println (JArray. toString ());

// Response. getWriter (). write (sBuilder. toString ());

// Response. getWriter (). write (JArray. toString ());

// Response. getWriter (). print (ss );

Response. getWriter (). print (JArray. toJSONString ());

// Out. flush ();

// Response. getWriter (). write (ss1 );

// Out. write (ss1 );

// Out1.print (jsonArray2 );

%>

To solve the problem of dynamically passing parameters, you can click query to start the getForm function, and then pass the parameters. form can be written to other js

<Scripttype = "text/javascript">

Varchart;

$ (Function (){

Alert (1 );

Vardate = ['October 1st ', 'October 1st', 'October 1st ', 'October 1st', 'October 1st ', 'October 1st', 'October 1st ', 'August 11', 'August 11', 'August 11'];

// Declare the report object

Chart = newHighcharts. Chart ({

Chart :{

// Render the report object to the Layer

// Type: 'column ',

RenderTo: 'Container '//,

// BackgroundColor :{

// LinearGradient: {x1: 0, y1: 0, x2: 0, y2: 1 },

// Stops :[

// [0, 'rgb (96, 96, 96) '],

// [1, 'rgb (16, 16, 16) ']

//]

//}

},

Title :{

Text: 'Organization assessment result statistics'

},

XAxis :{

Title: 'month ',

Categories: date

},

YAxis :{

Title :{

Text: 'number of students (count )'

},

PlotLines :[{

Value: 0,

Width: 1,

Color: '#000000'

}]

},

Tooltip :{

Formatter: function (){

Return '<B>' + this. series. name

+ '</B> <br/>' + this. x + ':'

+ This. y + 'people ';

}

},

Legend :{

ItemStyle :{

Font: '9pt Trebuchet MS, Verdana, sans-serif ',

Color: '# 3e576f'

},

ItemHoverStyle :{

Color: 'black'

},

ItemHiddenStyle :{

Color: 'silver'

}

},

// Set the initial data of the report object

Series :[{

Name: 'number of onsellers ',

Data: []

},

{

Name: 'number of recruits ',

Data: []

},

{

Name: 'number of designees ',

Data: []

},

]

});

// Use JQuery to obtain JSON data from the background

// $. Get ('tang. jsp? Date = '+ new Date (), null, function (data ){

// Var data = [222,344,543];

// Var data = '[' + eval (data) + ']';

// Alert (data + "12319 ");

// Var a = eval (data );

// Alert (a [0]. data );

// Chart. series [0]. setName ('20140901'); // set the value for the chart

// Chart. series [0]. setData (a [0]. data); // dynamically set data

// Chart. series [1]. setData (a [1]. data); // dynamically sets data

// Chart. series [2]. setData (a [2]. data); // dynamically sets data

// Chart. addSeries (a); // assign a value to the entire series. Currently, there is a problem and it cannot be implemented.

// For (var I = 0; I <3; I ++)

//{

// Alert (I );

// Var s1 = "[";

// Var s2 = "]";

// Var s = s1 + a [I]. data + s2;

// Alert (s );

// Chart. series [I]. setName ("123 ");

// Chart. series [I]. setData (s );

//}

// Chart. xAxis [0]. setCategories (a); // dynamically set the value of X-axis.

//});

});

FunctiongetForm (){

// Var data = ["['Firefox ', 45.0]", "[{name: 'chromi', y: 26.8, sliced: true, selected: true}]", "['ie', 12.8]", "['safari ', 8.5]", "['Opera', 6.2]", "['others ', 0.7] "];

// Var data = "[{'Firefox ', 45.0}, {'chrome', 26.8}, {'ie ', 12.8}, {'safari', 8.5 }, {'Opera ', 6.2}, {'others', 0.7}] ";

// Var data = [['firefox2 ', 45.0], {name: 'chromi', y: 26.8, sliced: true, selected: true}, ['ie ', 12.8], ['safari ', 8.5], ['Opera', 6.2], ['others ', 0.7];

// Var data = [{"name": "Number of employees", "data": [2654,2519, 5413,6422, 4987,5210, 4238,4586, 4665,3228, 3906,5587]}, {"name ": "Number of resigned", "data": [1441,1418, 3016,3826, 2893,2990, 2425,2513, 2665,1940, 2211,3211] },{ "name": "number of new recruits", "data ": [2460,2159, 3564,3037, 2767,3321, 3127,3141, 3135, 2547, 3245, 4364]}];

// Alert (data );

// Var a = eval (data );

// Use JQuery to obtain JSON data from the background

$. Get ('tang. jsp? Date = '+ newDate (), null, function (data) {alert ("---");

// Var data = [222,344,543];

// Var data = '[' + eval (data) + ']';

// Alert (data + "1231449 ");

Var a = eval (data );

// Alert (a [0]. data );

// Chart. series [0]. setName ('20140901'); // set the value for the chart

Chart. series [0]. setData (a [0]. data); // dynamically set data

Chart. series [1]. setData (a [1]. data); // dynamically set data

Chart. series [2]. setData (a [2]. data); // dynamically set data

// Chart. series [0]. setData ();

//}

Chart. redraw ();

});

}

$ (Document). ready (function (){

Alert (2 );

// Call the method automatically every 3 seconds to update the chart in real time

// Window. setInterval (getForm );

GetForm ();

Alert ("kaishi ");

});

//]>

</Script>

The following are dynamic ajax requests on the Internet:

<Script type = "text/javascript">

Var chart;

$ (Function (){

$. Ajax ({

Type: 'post ',

DataType: 'json ',

Url: '$ {pageContext. request. contextPath}/analyseResultAction! GetPlusCharts. action ',

Success: function (result ){

// Create a curve here

$ ('# Iner'). highcharts ({

Chart :{

DefaultSeriesType: 'spline', // Chart display type line, spline, scatter, splinearea bar, pie, area, column)

MarginRight: 125, // gap between upper and lower left

MarginBottom: 25 // gap between upper and lower left

},

Title :{

Text: 'plug-in analysis view', // main title

X:-20 // center

},

XAxis: {// abscissa

<SPAN style = "COLOR: # ff0000"> categories: result. listXdata // dynamic resolution </SPAN>

},

YAxis :{

Title :{

Text: ''// ordinate

},

PlotLines: [{// marking attributes

Value: 0,

Width: 1,

Color: 'red'

}]

},

Tooltip: {// prompt box for data points

Formatter: function () {// formatter

Return '<B>' + this. series. name + '</B> <br/>' +

This. x + ':' + this. y;

}

},

Legend :{

Layout: 'signature ',

Align: 'right ',

VerticalAlign: 'top ',

X:-10,

Y: 100,

BorderWidth: 0

},

<SPAN style = "COLOR: # ff0000"> series: result. </SPAN> <SPAN style = "LINE-HEIGHT: 1.5; FONT-FAMILY: Helvetica, Tahoma, Arial, sans-serif; COLOR: # ff0000 "> listYdata </SPAN> <SPAN style =" LINE-HEIGHT: 1.5; FONT-FAMILY: Helvetica, Tahoma, Arial, sans-serif; COLOR: # ff0000 "> // dynamic resolution </SPAN>

});

}

});

});

</Script>

Good Example

Http://wenku.baidu.com/view/f39593c76137ee06eff9189e.html

Contains the export Function

Exporting: {filename: "chart", type: "image/png", url: 'http: // localhost: 8888/dcweb/pp. do ', width: 800 },

<Scripttype = "text/javascript">

Varchart;

$ (Function (){

Vardate = ['October 1st ', 'October 1st', 'October 1st ', 'October 1st', 'October 1st ', 'October 1st', 'October 1st ', 'August 11', 'August 11', 'August 11'];

// Declare the report object

Chart = newHighcharts. Chart ({

Chart :{

RenderTo: 'Container'

},

Title :{

Text: 'annual HR statistics'

},

XAxis :{

Title: {text: 'month '},

Categories: date

},

YAxis :{

Title :{

Text: 'number of students (count )'

},

PlotLines :[{

Value: 0,

Width: 1,

Color: '#000000'

}]

},

Tooltip :{

Formatter: function (){

Return '<B>' + this. series. name

+ '</B> <br/>' + this. x + ':'

+ This. y + 'people ';

}

},

Legend :{

ItemStyle :{

Font: '9pt Trebuchet MS, Verdana, sans-serif ',

Color: '# 3e576f'

},

ItemHoverStyle :{

Color: 'black'

},

ItemHiddenStyle :{

Color: 'silver'

}

},

// Added the export function.

Exporting :{

Enabled: true,

Filename: 'chart ',

Width: 800,

Type: 'image/png'

},

// Remove the highcharts.com flag

Credits :{

Text: 'chinesoft sci-tech ',

Href :''

},

// Set the initial data of the report object

Series :[{

Name: 'number of onsellers ',

Data: []

},

{

Name: 'number of recruits ',

Data: []

},

{

Name: 'number of designees ',

Data: []

},

]

});

});

FunctiongetForm (){

Vartime = $ ("# time"). val ();

Varmanagecom = $ ("# ManageCom"). val ();

Varbranchattr = $ ("# BranchAttr"). val ();

// Use JQuery to obtain JSON data from the background

$. Get ('tang. jsp? Date = '+ newDate () +' & time = '+ time +' & managecom = '+ managecom +' & branchattr = '+ branchattr, null, function (data ){

Var a = eval (data );

// Set the value for the chart

Chart. series [0]. setData (a [0]. data); // dynamically set data

Chart. series [1]. setData (a [1]. data); // dynamically set data

Chart. series [2]. setData (a [2]. data); // dynamically set data

// Test tangyj826

Chart. xAxis [0]. addPlotBand ({

From: 0.8,

To: 7.5,

Color: '# FCFFC5 ',

Id: 'xx company'

});

Chart. xAxis [0]. addPlotLine ({

Value: 3.5,

Color: 'green ',

Width: 2,

Id: 'plot-line-1'

});

// Chart. setTitle ('Eee ');

// Obtain the critical data of the chart

Varextremes = chart. yAxis [0]. getExtremes ();

// Maximum and minimum ordinate values

Varmax = extremes. max;

Varmin = extremes. min;

// Maximum and minimum values of data in series

VardataMax = extremes. dataMax;

VardataMin = extremes. dataMin;

// Alert ("max:" + max + "min:" + min + "datam:" + dataMax + "dataM:" + dataMin );

// Chart. xAxis [0]. setCategories (['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A','s ', 'o', 'n', 'D'], true );

// Set the critical value of the X axis

// Chart. xAxis [0]. setExtremes (0, 5, true, true );

// Set the critical value of the Y axis

// Chart. yAxis [0]. setExtremes (0,300, true, true );

Alert (chart. series. length );

If (chart. series. length = 3 ){

Chart. addSeries ({

Name: 'ceshi ',

Data: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]

});

}

Chart. exportChart ({

Type: 'application/pdf ',

Filename: 'fff'

});

Chart. exportChart ({exportFormat: 'jpg '});

Chart. redraw ();

});

}

$ (Document). ready (function (){

// Call the method automatically every 3 seconds to update the chart in real time

// Window. setInterval (getForm );

GetForm ();

});

Functiondownload7 (){

GetForm ();

Varw = window. open ("", "_ self ");

W. location. href = "../download/niandurenli.xlsx ";

/// Var file1 = "../download/niandurenli.xlsx ";

// Window. location. href (file1 );

}

Functiontuxing (){

GetForm ();

Alert ("drawn ");

}

</Script>

This article is from "register" blog, please be sure to keep this source http://6203973.blog.51cto.com/6193973/1297382