Highcharts How to implement the graphical presentation of JSON array data

Yesterday spent a day to learn a bit of highcharts, the basic content almost all looked over, and then try to write a complete demo, during the hundred turn back, a lot of time, and finally realized what I want, and then I will how to achieve the process of the statistical chart to everyone to say. As follows:

Although not so good-looking, but still quite a sense of accomplishment.

Okay, here's how to do it, I'll start with the process I'm going to implement: first, I send an AJAX request through the foreground, request a background query, save the query result in a DataTable, and then convert it to a JSON object, and the foreground accepts the result JSON object returned in the background. Then we build the JSON array, build it, and then build the string "Like a JSON array" (note that this is not really a JSON array, actually a string, where I call it "like a JSON array", or a JS array), and finally through Json.parse () The function makes a string to a JSON array.

Let's take a look at my foreground code:

JS Code snippet:

 

        $ (function () {$.ajax ({type: "GET", url: "). /requesthandler.aspx?_rtype=ajax&_class=rm.                    Webapp.org.map&_method=staticspopulation&parentorg=33708000000000000&niandu=2015 ",//                    DataType: "JSON",//has no effect error:function () {alert ("AAA");                    },//The returned response is a JSON object, but the JSON object at this point is not the format we want, we need the JSON array format.                        Success:function (response) {//ST must be defined first, otherwise undefined will appear in front of St.                        var x = "";                        var y = "";                        var str = "";                        var responsestr = "";                        var region = "";                        var regionstr = "";              To construct the data format [[X1,y1],[x2,y2] ...], it is particularly important to note that the string for (var i = 0; i < response.length; i++) is constructed here.              RESPONSESTR = "[" + "\" "+ Response[i].regionfullname +" \ "+", "+ response[i].population;                            Build Xaxis in categories[' x1 ', ' x2 ', ' x3 ' ...]                            Region = region + "\" "+ Response[i].regionfullname +" \ "";                                if (I < response.length-1) {responsestr = Responsestr + "],";                            Region = region + ",";                            } else {responsestr = Responsestr + "]";                        } str = str + responsestr;                        } responsestr = "[" + str + "]";                        REGIONSTR = "[" + Region + "]"; Converts a string into a JSON array format and serializes it directly.                        The serialized value is then assigned to the data var x = Json.parse (RESPONSESTR) in the series;                        Converts a string into a JSON array format. var y = json.parse (regioNSTR);                                $ ("#show"). Highcharts ({chart: {type: ' column ', Style: {fontSize: ' 18px ', Fontweigh                             T: ' Bold ', Color: ' Blue '},                            Title: {text: ' Jining urban population Statistics Chart '},                            Subtitle: {text: ' 2015 '},                    Xaxis: {title: ' administrative district ',// categories:[' Rencheng District ', ' Qufu '] categories:y, gridlinewidth:1// Set the vertical line on the x-axis}, YAxis: {title: ' PopulationNumber ', Gridlinedashstyle: ' Dash ',//y axis default gridlinewidth:1, where y-axis vertical line style is set Labels: {//step:2//This code is to set the y-axis in the original scale of the premise of every two grid to display a bit Labe                                    L value, the decimal value is invalid, rounding//} plotlines: [{                                    Color: "Red",//official web is single quotes, double quotes is also possible dashstyle: ' Solid ',                                Value:30, Width:3}]                                    }, Series: [{name: ' Number ',                                    DATA:X}], credits: {Enabled:false                            }                                });        }                        }); });

HTML code snippet:

<body>    <div id= "show" >    </div></body>

Request section:

Type: "GET",                    URL: ". /requesthandler.aspx?_rtype=ajax&_class=rm. Webapp.org.map&_method=staticspopulation&parentorg=33708000000000000&niandu=2015 ",

This request is for an AJAX way to send the request to the background Method=staticspopulaiton function, and pass two parameters to the background, as for the contents of requesthandler.aspx I will not say that you can own Baidu how to request.

Build Highcharts Graphics Code:

$ ("#show"). Highcharts ({chart: {type: ' column ', Style: {fontSize: ' 18px ', Fontweigh                             T: ' Bold ', Color: ' Blue '},                            Title: {text: ' Jining urban population Statistics Chart '},                            Subtitle: {text: ' 2015 '},                    Xaxis: {title: ' administrative district ',// categories:[' Rencheng District ', ' Qufu '] categories:y, gridlinewidth:1//                           Set the vertical line on the x-axis}, YAxis: {title: ' Population Number ',     Gridlinedashstyle: ' Dash ',//y axis default gridlinewidth:1, here set the y-axis vertical style//                                Labels: {//step:2//This code is to set the y-axis in the original scale of the premise of every two to display a label value, the value of the decimal is invalid, rounding                                    } plotlines: [{                                    Color: "Red",//official web is single quotes, double quotes is also possible dashstyle: ' Solid ',                                Value:30, Width:3}]},                                    Series: [{name: ' Number ', data:x}],                                    Credits: {Enabled:false }                                });

In the inside I have made a note, in doubt to look at the API can be, here I would like to highlight the JSON data passed to the foreground, how to implement Highcharts graphics. Front desk We are ready, next look at the implementation of the background.

Background implementation code:

 #region Variable Description////is used to query String CommandText, retmsg;            Boolean Execright;            Used to hold the information obtained from the query string string parentorg= "";            Int32 year;            String fileName = "";            String content;            String CommandText = "";            DataTable datatable = new DataTable ();            String filecontent = ""; #endregion #region First encode the data passed to the page.            request.contentencoding = System.Text.Encoding.UTF8; #endregion parentorg = page.            request.params["parentorg"]; Year = Convert.ToInt32 (page.            request.params["Niandu"]);            CommandText = "Use organization Select population, regionfullname from Regionxian where parentorg= ' {0} ' and Year={1}"; CommandText = string.            Format (CommandText, parentorg, year);            dataTable = Dataengine.select (CommandText, out execright, out retmsg); Declares a JavaScript serialization object System.Web.Script.SerializatiOn.            JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer (); Defines an array of type list<dictionary> that is used to record key-value pairs of type Dictionary. String record column name, object type records the column values in each row list<dictionary<            String, object>> rows = new list<dictionary<string, object>> ();            Create a row for each column key value pair object dictionary<string, object> row;                foreach (DataRow dr in datatable.rows) {row = new dictionary<string, object> (); foreach (DataColumn dc in datatable.columns) {row. ADD (DC.                ColumnName, DR[DC]); } rows.            ADD (row); } page.            Response.ContentType = "Application/json"; Page.            response.contentencoding = System.Text.Encoding.UTF8; Page. Response.Write (Serializer.            Serialize (rows)); Page. Response.End ();

The process of querying I'm not going to say much, here I just wrote the query as a Dataengine data engine class. Save the query results in a DataTable, then convert to JSON objects, and in C # There are specialized serialized JavaScript objects (JSON is also part of JavaScript, so this can be referred to as a JSON object)System.Web.Script.Serialization.JavaScriptSerializer, because we know that the JSON object is key/value, so we're going to build a JavaScript object like this, and the dictionary class is creating the Key/value pair to construct the JSON object (property name: Value). With two for loops, you can implement all the columns of all rows key/value the JSON object, and then return to the foreground. Here you need to note the type of return and the encoding to return for two days.

All right, we're done in the background, and the next step is how our front desk accepts the JSON objects passed from behind the scenes. We all know that there is a function called callback in Ajax, that is to say we need to return processing.

Through the Highcharts website, we can know that the data of the building graph is mainly stored in the series, which is defined in the following way:

Here I used the second way in the original code, that is to say, I'm building [[,],[,] ...] This type of data (in fact I just need to build Y value here, in the first data way, build method such as build categories), but the light build this is not enough, because you will find that the tutorial also said that the x-axis will be displayed in a self-increment, starting from 0. Shown below:

This is not what we want, we need the x-axis to have our own data to pass over. By looking at the API, we find that the examples are implemented by building the x-axis separately, so we can construct the JS array categories to achieve x-axis coordinates. Build the data and categories code as follows:

St must be defined first, otherwise it will appear undefined in front of St.                        var x = "";                        var y = "";                        var str = "";                        var responsestr = "";                        var region = "";                        var regionstr = "";                            To construct the data format [[X1,y1],[x2,y2] ...], it is particularly important to note that the string for (var i = 0; i < response.length; i++) is constructed here.                            RESPONSESTR = "[" + "\" "+ Response[i].regionfullname +" \ "+", "+ response[i].population;                            Build Xaxis in categories[' x1 ', ' x2 ', ' x3 ' ...]                            Region = region + "\" "+ Response[i].regionfullname +" \ "";                                if (I < response.length-1) {responsestr = Responsestr + "],";                            Region = region + ",";           } else {responsestr = Responsestr + "]";                 } str = str + responsestr;                        } responsestr = "[" + str + "]";                        REGIONSTR = "[" + Region + "]"; Converts a string into a JSON array format and serializes it directly.                        The serialized value is then assigned to the data var x = Json.parse (RESPONSESTR) in the series;                        Converts a string into a JSON array format. var y = json.parse (REGIONSTR);

That's what we want.

-----NET This article can help you

Share Hooray!!!

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Highcharts How to implement the graphical presentation of JSON array data