Project sharing:
Module 1: Real-time display of drop-down menus in the last week:
Display date Drop-down box for
(Var i=0;i<7;i++) {
$ (' #choose1 >option:eq (' +i+ ') '). HTML (GETDATESTR (i));
$ ("#choose1 >option:eq (" +i+ ")"). attr ("Value", getdatestr (-i));//This is the corresponding function in order to easily drop the value of the selected data
}
// /The following is the date Drop-down selection box AutoFit
function Getdatestr (adddaycount)
{
var dd = new Date ();
Dd.setdate (Dd.getdate () +adddaycount);//Get Adddaycount days after the date
var y = dd.getfullyear ();
var m = dd.getmonth () +;
var d = dd.getdate ();
return y+ "-" +m+ "-" +D;
}
Output format is year-month-day
In the project, the realization is to select the corresponding parameters to refresh the table value, the corresponding contents are as follows:
$ ("#choose1"). Bind (' Change ', function () {var value=$ (this). Val (); var result={"time": value+ "00:15:00"};//the project refreshes for the wee hours,
So set the time format to delay 15 minutes//Note that the result here is to format the string as Object RefreshData (result);//Call hcharts draw function}); The corresponding function is: function refreshdata (Result) {$.ajax ({type: Post),//Request format set to POST type Url:actionname, DataType: "Text",// The Ajax return value is set to text (JSON format can also be used to return, print out the results, or set to JSON) data:result,//Here The result is a formatted pass of the selected time, which in turn takes the action with the time parameter pass success:
function (JSON) {var obj = $.parsejson (JSON);//Use this method to parse the JSON var xaxisdata=new array ();
var axisdata=new Array ();
var str=new array (), x=new Array (); y=new Array (); for (Var i=0;i<obj.resultdata.length;i++) {xaxisdata[i]=obj.resultdata[i].date; Yaxisdata[i]=obj.resultdata[i].
Value
Str=xaxisdata[i].split ("");
X=str[0].split ("-");
Y=str[1].split (":"); for (Var j=0;j<3;j++) {x[j]=parseint (x[j]); Y[j]=parseint (y[j);} var year=x[0],month=x[1]-1,day=x[2],hour=y[0],
MINUTE=Y[1],SECOND=Y[2]; AXISDATA[I]=[DATE.UTC (year,month,day,hour,minute,sEcond), yaxisdata[i]];//Note that this is a formatted time format (conforming to the requirements of the Hcharts table)} $ (' #box '). Highcharts ({chart: {type: ' spline '),//Type setting MARGINBOTTOM:70}, Title: {margin:10}, Xaxis: {type: ' DateTime ', title: {text: ' Time ', align: ' high '}, Datetimelabelform ats:{second: '%y-%m-%d%h:%m:%s '}, YAxis: {title: {text: ' energy ', rotation:0, align: ' High '}}, tooltip: {formatter: function () {return ' <b> ' + "ethylene production energy Efficiency value:" +this.y + ' </b><br/> ' + highcharts.dateformat ('%y-%m-%d%h:%m: %s ', this.x) + ' <br/> '; Format Output}}, Plotoptions: {//At this location can be set such as click events like the midpoint of a line chart spline: {marker: {enabled:true}}, series:{cursor: ' pointer ', PO int:{events:{click:function () {//click event corresponding function implementation and parameter definition var timee=new Date (this.x); Timee.sethours (Timee.gethours ()-8);
/Get Adddaycount days of the date var yy = Timee.getfullyear ();
var mt = Timee.getmonth () +1;
var dd = timee.getdate ();
var hh=timee.gethours ();
var mm=timee.getminutes ();
var ss=timee.getseconds ();
if (hh<10) hh= "0" +HH;
if (mm<10) mm= "0" +MM; if (ss<10) ss= "0" +sS
if (dd<10) dd= "0" +DD;
if (mt<10) mt= "0" +mt;//for single-digit digits, the corresponding 10 bits are set to 0 var action=yy+ '-' +mt+ '-' +dd+ ' ' +hh+ ': ' +mm+ ': ' +ss;
$ ("#Time_click"). HTML (action);
var result={"Time": action};
Refreshtable (Result)//Refresh Table}}}, series:[{name:meaning, data:axisdata//write the data to be displayed}});
Refreshtable (result);
}
}
}); }
The above is a small set of jquery to introduce the implementation of the Drop-down menu (content for time) of real-time updates and charts of the following update method, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!