JQuery implements real-time update of the drop-down menu (the content is time) and the method of following-up update of charts, jquery real-time update

JQuery implements real-time update of the drop-down menu (the content is time) and the method of following-up update of charts, jquery real-time update

Project sharing:

Module 1: real-time display of the drop-down menu for the last week:

// Display date drop-down box for (var I = 0; I <7; I ++) {$ ("# choose1> option: eq (" + I + ") "pai.html (GetDateStr (-I); $ (" # choose1> option: eq ("+ I + ")"). attr ("value", GetDateStr (-I )); // this statement is the value of the selected data to facilitate the drop-down} // This is the corresponding function // The following is the date drop-down box automatically adjust function GetDateStr (AddDayCount) {var dd = new Date (); dd. setDate (dd. getDate () + AddDayCount); // obtain the date var y = dd after AddDayCount. getFullYear (); var m = dd. getMonth () +; var d = dd. getDate (); return y + "-" + m + "-" + d ;}

The output format is year-month-day.

In the project, select the corresponding parameter to refresh the table value. The corresponding content is as follows:

$ ("# Choose1 "). bind ("change", function () {var value = $ (this ). val (); var result = {"time": value + "00:15:00"}; // The engineering refresh time is set to early morning, so the time format is delayed by 15 minutes. // note, the result here is to format the string as the object refreshData (result); // call the Hcharts rendering function}); // the corresponding function is: function refreshData (result) {$. ajax ({type: "POST", // request format is set to post type url: actionname, dataType: "text ", // set the ajax return value to text (which can be returned in json format, and can be printed or set to json) data: result, // The result here is the selected time after formatting, so that the action takes the time parameter to pass success: function (json) {var obj = $. parseJSON (json); // use this method to parse jsonvar xAxisData = new Array (); // convert it to an Array var yAxisData = 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: the formatted time format (meets the hcharts table requirements )} $ ('# box '). highcharts ({chart: {type: 'spline', // type setting marginBottom: 70}, title: {margin: 10}, xAxis: {type: 'datetime', title: {text: 'time', align: 'high'}, dateTimeLabelFormats: {second: '% Y-% m-% d % H: % M: % s '}}, yAxis: {title: {text: 'mobile', 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/>'; // formatted output}, plotOptions: {// Click Event spline: {marker: {enabled: true }}, series: {cursor: 'pointer ', point: {events: {click: function () {// click the function implementation corresponding to the event and the parameter definition var timee = new Date (this. x); timee. setHours (timee. getHours ()-8); // obtain the date var yy = timee after AddDayCount. 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 a single digit, the corresponding ten digits are set to 0var 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 here}]}; refreshTable (result );}}});}

The above section describes how to implement real-time update of the jQuery drop-down menu (the content is time) and follow-up update of charts. I hope this will help you, if you have any questions, please leave a message and the editor will reply to you in time. Thank you very much for your support for the help House website!