Implement real-time dynamic curves on Web pages--Leveraging Highcharts controls and jquery

implementing dynamic curves on the web

--Get the data from the database in real time and implement no refresh display on the Web page.

This paper uses JavaScript to achieve, every 3 seconds, from the database to get a data, and dynamic display on the Web page. And when using the mouse near the point of the curve, can display the corresponding information a pity dorado (horizontal and ordinate values). The effect chart (screenshot of the webpage) is shown below:

Implementation tools: Highcharts (www.highcharts.com/) and jquery (http://jquery.com/). The main reference is a dynamic curve example of Highcharts: Http://www.highcharts.com/demo/dynamic-update.

The development process is described in detail below.

Development tools: Visual Studio 2008

Development languages: C # and JavaScript (scripting language)

System Environment: Windows7

Datasheet: The data table is divided into two columns, the first column "Time", the second class "value", write a stored procedure named Get_value in the database, input parameter starttime,endtime, return the field "Time" The value is the time between the two and the corresponding value value.

Specific steps:

① Open VS2008, create a new site Highchartsdemo, start page (default) for Default.aspx;

② Download Highcharts.js and juery.min.js (search jquery-1.3.2.min.js in Google, and change the file name to Juery.min.js, of course, you can also do not change), the file into the project, and create a new folder JS, Put these two files into the JS folder;

③ add static variables to the class _default:

Static DateTime currenttime= convert.todatetime ("2009/07/13 0:20:00");

④ Add a function to the Default.aspx.cs file: (note to include the appropriate application)

Get the data in the database and display the [WebMethod] public static string Getdatatablebyajax () {//connection string in the Highcharts control Stri
        ng sqlconnstr = "datasource=nuaa-pc\\sqlexpress;initial catalog=tempdata;integratedsecurity=true";
        Data set and data adapter Datasetds = new DataSet ("GetValue");
        Sqldataadapterda = new SqlDataAdapter (); Using (SqlConnection sqlconn= New SqlConnection (Sqlconnstr)) {try {Sqlco Nn.
                Open ();
                Stored procedure, "get_value" is the stored procedure name Sqlcommandsqlcomm = Newsqlcommand ("Get_value", sqlconn);
                Sqlcomm.commandtype = CommandType.StoredProcedure; Add query parameters and Values SqlComm.Parameters.Add ("@starttime", Sqldbtype.datetime).
                Value= currenttime; SQLCOMM.PARAMETERS.ADD ("@endtime", Sqldbtype.datetime). Value= currenttime.
                AddMinutes (2);
                Execute stored procedure sqlcomm.executenonquery (); Da.
       SelectCommand = Sqlcomm;         Da.
                Fill (DS);
                CREATE TABLE Datatabledt = new DataTable () for storing return values; Adds two columns to the table, with the column names X and y dt respectively.
                Columns.Add ("X", typeof (String)); Dt.
				Columns.Add ("Y", typeof (float)); Copy the table in the stored procedure to the return table foreach (DataRow drin ds. Tables[0]. Rows) {DATAROWNEWDR = dt.
                    NewRow (); newdr["x"] = dr[0].
                    ToString ();
                    newdr["y"] = dr[1]; Dt.
                Rows.Add (NEWDR); //Update currenttime, the next time you access the function, you will get a different value, to achieve "real-time" requirements currenttime= currenttime.           
                AddMinutes (2); Stringresult = Dtb2json (dt).
                ToString (); Returnresult.
            ToString ();
            Catch {throw new Exception ("Invoke Ajax Error");
            finally {sqlconn.dispose (); }}} #region Datatablel Json pUblic static string Dtb2json (DATATABLEDTB) {JAVASCRIPTSERIALIZERJSS = new JavaScriptSerializer ();
        Arraylistdic = new ArrayList (); foreach (DataRow row in DTB.
            Rows) {dictionary<string, object> drow = new dictionary<string,object> (); foreach (DataColumn Colin DtB. Columns) {Drow. Add (Col. ColumnName, Row[col.
            ColumnName]); DiC.
        ADD (drow); Return JSS.
    Serialize (DIC);
 } #endregion

⑤    Add the following code where appropriate in default.aspx:

 
⑥ View the Default.aspx page in the browser, or run the project to get real-time dynamic curves.